You are not logged in.

Mehrere DIV Container mit AJAX aktualisieren

Torben Brodt

Administrator

Lexicon articles: 104

  • Send private message

Wednesday, April 7th 2010, 7:13pm

Content

Tags

AJAX, autoupdate, autoupdater, container, many div, poll, polling

Abstract

Hier erfahrt ihr wie man mit AJAX mehrere DIV Container mit einem Request aktualisiert.

Article

1. Einleitung


Das folgende Script könnt ihr einerseits dazu verwenden mehrere Divs mit einem einzigen AJAX Request zu aktualisieren. Alle Div container können unabhängig aktualisiert werden.
Außerdem ist das Script in der Lage die Daten ständig aktuell zu halten indem es in einem bestimmten Intervall die Daten aktualisiert.

2. Benutzung


Die Nutzung ist einfach. Unten im Downloadbereich findet ihr zum einen die Scripte die ihr einbinden müsst.
Ansonsten definiert ihr euch ein Updater wie folgt:

HTML Code

 
1
2
3

<script type="text/javascript">
var up = new UpdateManyDivs('callback.php', 750);
</script>


3. Parameter


callback.php ist die Datei welche die Inhalte zur Verfügung stellt. 750 ist das Zeitintervall in Millisekunden zu dem die Updates geladen werden sollen.

4. Updatebereiche definieren


Welche Container aktualisiert werden sollen macht ihr anhand der ElementID fest. Die ID des Containers und der Parameter beim update.push müssen übereinstimmen.
Eine ID muss natürlich eindeutig sein.

HTML Code

 
1
2

<div id="update1">Ich werde aktualisiert #1</div>
<script type="text/javascript">up.push('update1');</script>


5. Updates liefern (callback.php)


In der Demo Applikation sieht die callback php wie folgt aus:

PHP Quellcode

 
1
2
3
4
5

$data = array();
foreach(array_keys($_GET) as $identfier) {
	$data[$identfier] = getRandomText($identfier);
}
echo json_encode($data);


statt der getRandomText müsst ihr nur eure sinnvolle Datenbankabfrage einbauen.

5.1. Beispiel: MySQL


PHP Quellcode

 
1
2
3
4
5
6

function getTextMYSQL($identfier) {
	$sql = "SELECT text FROM tabelle WHERE id = $identifier";
	$res = mysql_query($sql);
	$row = mysql_fetch_array($res);
	return $row['text'];
}


5.2. Beispiel: PDO


PHP Quellcode

 
1
2
3
4
5
6
7
8
9

function getTextPDO($identfier) {
	$sql = "SELECT text FROM tabelle WHERE id = :identifier";
	$stmt = MyDB::getInstance()->prepare($sql);
	$stmt->execute(array(
		':identifier' => $identfier
	));
	$row = $stmt->fetch();
	return $row['text'];
}


6. Code


Download

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/**
 * xxx [..] by http://www.easy-coding.de
 * 
 * @param url
 * @param poll		
 */
function UpdateManyDivs(url, poll) {
	this.url = url;
	this.poll = poll ? poll : 750;
	this.list = [];
	this.timer = null;
 
	/**
	 * adds elem
	 * @param	id		string as id
	 */
	this.push = function(id) {
		this.list.push(id);
	};
 
	/**
	 * sends single request
	 * @param loop	boolean		
	 */
	this.fire = function(loop) {
		ajaxPost(this.url + '?' +this.list.join('&'), 'seed='+ new Date().getTime(), function(up) {
			return function() {
				if (this.readyState == 4 && this.status == 200) {
					if(loop) {
						// start timer
						up.start();
					}
 
					var data = eval('(' + this.responseText + ')');
					for(var key in data) {
						document.getElementById(key).innerHTML = data[key];
					}
				}
			};
		}(this));
	};
 
	/**
	 * stops auto updater
	 */
	this.stop = function() {
		window.clearTimeout(this.timer);
	};
 
	/**
	 * starts auto updater
	 */
	this.start = function() {
		this.timer = window.setTimeout(function(up) {
			return function() {
				up.fire(true);
			};
		}(this), this.poll);
	};
}


7. Steuerung


Ihr steuert das Verhalten mit 3 Funktionen. Zum einen könnt ihr das Update manuell erzwingen. Ihr könnt das Update aber auch über einen automatischen Updater realisieren.

HTML Code

 
1
2
3

<a href="#" onclick="up.fire()">force single update</a>
<a href="#" onclick="up.start()">start autoupdate</a>
<a href="#" onclick="up.stop()">disable autoupdate</a>


Wenn ihr den automatischen Updater immer aktivieren wollt, dann startet ihr doch einfach beim Laden des Dokuments:

HTML Code

 
1

<body onload="up.start()">


8. Demo


Eine Live Demo mit allen möglichen Formularelementen findet ihr unter http://demo.easy-coding.de/ajax/mehrere-…x-aktualisieren. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt: download.zip.
Torben Brodt has attached the following image:
  • autoupdate.png
Lexikon 4.1.3, developed by www.viecode.com