Mehrere div´s per Ajax aktuallisieren

G

Gali

Mitglied
Guten Abend,

ich muss zugeben das ich mich mit Java im Allgemeinen sehr wenig befasse, jedoch mich zu diesem Thema mehrere Stunden versucht habe schlau zu machen. Ich habe mir das Javascript-Buch von Galileocomputing heruntergeladen und werde mich fleisig damit befassen. Demzufolge wünsche ich mir von euch auch keine Komplettlösung, sondern evtl. einen Denkanstoß. Ich wäre euch sehr Dankbar dafür.

Das Problem selbst: Ich habe eine Seite welche mehrere div-elemente enthält. Ich möchte per ajax beispielsweise aller 3 Sekunden die Datei getdata.php laden und damit bestimmte div-elemente ändern. Mit dem derzeitigen Script funktioniert das ganz gut, jedoch natürlich nur im container 'content'.

Code: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="data/prototype.js"></script> 
<script type="text/javascript"> 
<!-- 
function init() { 
   new Ajax.PeriodicalUpdater('content', 'getdata.php', { 
     method: 'get', frequency: 3 
   }); 
} 
window.onload = init; 
--> 
</script> 
</head> 
<body> 
<div id="content"> </div> 
<div id="content_2"> </div>  <div id="content_3"> </div>  <div id="content_4"> </div> 
</body> 
</html>

Ich habe nun versucht in die getdata.php mit folgenden Code etwas in die Container einzufügen, funktioniert aber nicht.

Code: 
<script language=JavaScript type=text/javascript>
document.getElementById("content_2").firstChild.nodeValue = "lalal";
</script>

Wie gesagt, für einen Denkanstoß wäre ich sehr Dankbar :)

mfg Gali
 
Hi,

soweit ich informiert bin, bietet die Methode PeriodicalUpdater nur die Möglichkeit, Container für einen
erfolgreichen (success) bzw. erfolglosen (failure) Request entgegen zu nehmen.
Code: 
new Ajax.PeriodicalUpdater({success: 'content', failure: 'content_1'}, ...);
Vielleicht könntest du stattdessen die Methode Updater verwenden. Den periodischen Aufruf implementierst
du mit Hilfe der Methode setInterval selbst, z.B.
Code: 
function init(){
  hTimer = window.setInterval("PeriodicalAjax()", 3000);
}
Damit wird die Funktion periodisch alle 3 Sekunden aufgerufen.

In der Funktion kannst du den gewünschten Container an Updater übergeben. Im Beispiel wird eine
Zufallszahl generiert, die die Position der Container-ID im Array angibt.
Code: 
var arrContent = new Array("content", "content_2", "content_3", "content_4");
function PeriodicalAjax(){
  var intRnd = (Math.floor(Math.random()*new Date().getTime())%4);
  new Ajax.Updater(arrContent[intRnd], 'blindtext.php', {method: 'get'});
}
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Danke für deine Idee, jedoch sehe ich von der Funktion her nur den Unterschied das er bei einen zufälligen Container mit den Infos füllt. Jedoch mehrere Container mit einem speziellen Inhalt, ohne mehr als eine Datei zu holen, nicht.
 
Hi,

da habe ich dich wohl missverstanden - neuer Versuch.

Als Methode verwendest du Request. Diese wird wie in meinem vorherigen Post periodisch aufgerufen.
Allerdings wird eine Funktion übergeben, die den zurückgegebenen Text verarbeitet. Dieser Text liegt im
JSON-Format vor, sodass er mit eval in ein Objekt überführt werden kann.

JavaScript-Teil:
Code: 
var hTimer;
function init() {
  hTimer = window.setInterval("PeriodicalAjax()", 3000);
}

function PeriodicalAjax(){
  new Ajax.Request('getdata.php', {
    method: 'get',
    onSuccess: function(objReturn) {
      // JSON-String decodieren und in Objekt überführen
      var objTest = eval("("+unescape(objReturn.responseText)+")");

      // Objekt durchlaufen und entsprechende DIVs mit Inhalt füllen
      for(strEntry in objTest){
        document.getElementById(strEntry).innerHTML = objTest[strEntry];
      }
    }
  });
}
getdata.php könnte wie folgt aussehen:
Code: 
<?php header("Content-type:text/html; charset=utf-8");

echo(rawurlencode("{content: 'Inhalt 1<br><br>mit Leerzeile und Umlaut - Ä', content_2: 'Inhalt 2', content_3: 'Inhalt 3'}"));
?>
Die Eigenschaftsnamen des JSON-Objekts entsprechen den IDs der DIVs, die gefüllt werden sollen.

Vielleicht kannst du diesmal mehr damit anfangen.


Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück