[Erledigt] Mehrere DIV Container mit einem Klick ändern (mit mehreren Request Aufrufe

Lebenssonde · 28.05.2009, 15:11

Hallo,

ich hab ein Problem, dessen Lösung ich irgendwie nicht finden kann, obwohl mir das eigentlich naheliegend erscheint, dass es bereits gegeben sein musste:

Ich möchte gerne bei einem Request Aufruf mehrere DIV Containter aktualisieren. An sich ja kein Problem - einfach mehrere xxxx.innerHTMLxxxx Befehle hintereinander ausführen. Oder dazu eine extra Funktion basteln, der mehre andere Funktionen nacheinander aufruft.

Nur habe ich keine Lösung für die Aufgabe gefunden, mehrere Request Aufrufe hintereinander auszuführen, die jede für sich einen bestimmten DIV Container ändert. Ich hab zwar einfach mal durch eine Sammelfunktion ausprobiert, aber es hat nicht hingehauen, weil während der erste Request auf die Antwort von Request - php - Datei gewartet hat, schon der zweite Request gesendet worden ist. Das Resultat war, dass sich immer nur ein DIV Container aktualisiert hat und die anderen nicht.

Mir fällt nur eine Möglichkeit ein, in der ich am Ende der Requestauswertung von Funktion 1 die requestabfragefunktion von Funktion 2 aufruft. Aber das ist doch ziemlich ungelenk, sollte es tatsächlich funktionieren. Oder ich muss irgendwie mehrere Antworten von der Request-Datei erhalten, aber wie geht denn das? Also dass ich dann die gelieferte (mehrere) Argumente in die innerHTML Anweisungen verpacke.

Gibt es irgendwo eine Lösung, in der ich mehrere DIV Container mit jeweilig zugeordneten Requestdateien mit einem Link aufrufen kann?

Lebenssonde

dex · 28.05.2009, 15:38

Ist was du sucht setTimeout?
Du möchtest mit einem Ajax-Prototypen doch verschiedene Inhalte verschiedener Dateien in unterschiedliche Container per [element].innerHTML laden, oder?
Wenn ja: Ein Array der alle Dateien enthält, ein Array der die entsprechenden ContainerID's enthält und schon kannst du ne schleife durchlaufen lassen die dir alle Container nacheinander füllt.
Ich hoffe mal ich kann dir damit weiterhelfen *g*
Gruß

Lebenssonde · 28.05.2009, 16:44

Hi

Erstmal du hast es erfasst, was ich will, allerdings komme ich mit deiner Antwort nicht ganz klar. Kannst du mir das etwas ausfürhrlicher beschreiben? Ich bin noch AJAX Anfänger... Was meinst du genau mit Array mit Dateien und Array mit Container ids? Wie soll denn die Schleife aussehen?

Was ich probiert habe ist mehr oder weniger eine Schleife, aber halt manuell:

PHP-Code:

  <html>
<head>
<title>Ajax Beispiel 002</title>
<script type="text/javascript">
<!--
var request = false;

function start(value){
setRequest(value);
setRequest1(value);

}

// Request senden
function setRequest(value) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}

// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
var url = 'ajaxtest.php';
// Request öffnen
request.open('post', url, true);
// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Request senden
request.send(value);
// Request auswerten
request.onreadystatechange = interpretRequest;
}
}

// Request auswerten
function interpretRequest() {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status);
} else {
var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('content').innerHTML = content;
}
break;
default:
break;
}
}

// Request senden
function setRequest1(value) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}

// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
var url = 'ajaxtest.php';
// Request öffnen
request.open('post', url, true);
// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Request senden
request.send(value);
// Request auswerten
request.onreadystatechange = interpretRequest1;
}
}

// Request auswerten
function interpretRequest1() {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status);
} else {
var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('content1').innerHTML = content;
}
break;
default:
break;
}
}








//-->
</script> 
</head>
<body>
<ul>
<li><a href="javascript:setRequest('name=max')">Max</a></li>
<li><a href="javascript:start('name=süßi')">Susi</a></li>
<li><a href="javascript:setRequest('name=charly')">Charly</a></li>
</ul>
<br />
<div id="content"></div>...<div id="content1">***</div>
</body>
</html>

Das hat aber nicht hingehauen. Er hat jeweils nur 'content' oder 'content1' geändert aber nie beides auf einmal, was ich eigentlich wollte. (Er sollte in beide Containter den jeweiligen angeklickten Namen hinschreiben)

Vielleicht ist meine denkweise falsch?

dex · 28.05.2009, 18:56

Mit Array meine ich folgendes:

Code:

var container = new Array("content1","content2","content3");
var datafile = new Array("datei1.php","datei2.php","datei3.php");

Hier noch eine Hilfe dazu: SELFHTML: JavaScript / Objektreferenz / Array
Die Arrays müssen aber GLOBAL sein, sodass du sie in der folgenden Funktion verwenden kannst.
Mit dem Codeschnipsel willst du ja erreichen, dass content1 den inhalt von datei1.php geliefert bekommt und content2 den inhalt von datei2.php usw...
Also nimmst du einfach folgendes:

Code:

// hier die Array's
SetRequest(container_array,datafile_array,datanumber) {
if(container_array.length != datafile_array.length)
  alert("Ungleiche Anzahl von Elementen!");
else
  {
  // AJAX REQUEST
  // var url = datafile_array[datanumber];
  // container_array[datanumber] mit an den onreadystatechange senden, sodass er gefüllt werden kann
  // nach der kompletten Request einen Timeout von 200 msek. wegen Verarbeitungszeitmaximum ( :( ) und dem Aufruf des nächsten Containers
  setTimeout("SetRequest("+container_array+","+datafile_array+","+(datanumber+1)+")",200); // datanumber um 1 erhöhen um das nächste Array-Element mit der nächsten Indexnr. anzusprechen
  }
}

Fertig.
Skript ist ungetestet.
Werde es nachher ausprobieren und mögliche Fehler suchen.
Bis nachher.
Gruß

EDIT: Bin kurz davor es zu lösen. Es klappt alles, mein Problem ist nur, dass zwischen request.send und request.onreadystatechange eine Pause sein muss (aktuell ein alert), dass alles funktioniert. Wenn das draußen ist, dann stelle ich dir das Skript hier rein. Ist echt nicht ganz einfach

dex · 28.05.2009, 22:07

So jetzt melde ich mich nochmal.
Ich hab's jetzt fertig programmiert aber es ist keine optimale Lösung:

Code:

<html>
<head>
<title>Ajax Beispiel</title>
<script type="text/javascript">
<!--
var request = false;

function SetRequest(container,datafile,datanumber) {
if(container.length != datafile.length)
  alert("Ungleiche Anzahl von Elementen!");
else
  {
  // Request erzeugen
  if (window.XMLHttpRequest) {
  request = new XMLHttpRequest(); // Mozilla, Safari, Opera
  } else if (window.ActiveXObject) {
  try {
  request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
  } catch (e) {
  try {
  request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
  } catch (e) {}
  }
  }
  
  if (!request) {
  alert("Kann keine XMLHTTP-Instanz erzeugen");
  return false;
  } else {
  var url = datafile[datanumber];
  request.open('post', url, true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  request.send(null);
  alert("Container: "+container[datanumber]+" | Datei: "+datafile[datanumber]);
  request.onreadystatechange = interpretRequest(container[datanumber]);
  
  if((datanumber+1) != container.length)
     SetRequest(container,datafile,(datanumber+1));
  }
  }
}
// Request auswerten
function interpretRequest(container_name) {
if(request.readyState == 4)
  if(request.status != 200)
     alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status);
  else
     document.getElementById(container_name).innerHTML = request.responseText;
}
//-->
</script> 
</head>
<body>
<a href="javascript:SetRequest(new Array('content1','content2','content3'),new Array('datei1.php','datei2.php','datei3.php'),0);">SET REQUEST</a>
<div id="content1">...</div>
<div id="content2">---</div>
<div id="content3">###</div>
</body>
</html>

Das Problem liegt beim alert vor dem onreadystatechange.
Es ist so, dass man nach dem Senden einer Request einen Refresh benötigt bzw ein confirm, alert oder promt, um das Skript kurzzeitig zu stoppen.
Ich hoffe jemand anderes hat darauf eine Antwort, da ich nach langem Rumprobieren und Googlen nichts gefunden hab.
Wenn du was findest was den Alert sofort wieder schließt ohne dass er aufgerufen wird denke ich sollte das auch eine Übergangslösung sein.
Viel Spaß damit!
Gruß

Celli · 29.05.2009, 01:08

Habe einen XMLHttpRequest Handler erstellt um die Abläufe zu vereinfachen.
Man kann mehrere oder einzelne Elemente neu befüllen. Die Elemente müssen mit ElementId|Datei angegeben werden und mit Komma getrennt sein.
Das Deklarieren eines Arrays innerhalb des onclick entfällt somit.

Da XMLHttpRequest mit einer zur Zeit maximallen Anzahl von 2 gleichzeitigen laufenden Requests arbeitet, habe ich ein Queue Handling eingesetzt um bei mehreren Elementen diese nacheinander zu laden. Es wird somit gewartet bis ein Request abgearbeitet wurde bis das nächste startet.

PHP-Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">



var LoaderObject = function()
{
    this.connection                = false;
    this.running                = false;
    this.requestQueue            = new Array();
    this.requestCounter            = 0;
    this.requestQueueCounter    = 0;
};


LoaderObject.prototype.initialize = function()
{
    if (window.XMLHttpRequest)
    {
        this.connection = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            this.connection = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e)
        {
            try
            {
                this.connection = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            { 
                return false;
            }
        }
    }

    return true;
};


LoaderObject.prototype.runRequest = function()
{
    if(this.running)
    {
        return false;
    }

    if(!this.connection)
    {
        var reconnected = this.initialize();
        if(!reconnected)
        {
            return false;
        }
    }

    this.running = true;

    var request = this.requestQueue[this.requestCounter];

    if
    (
        !request['url'] ||
        !request['elementId']
    )
    {
        return false;
    }

    try
    {
        this.connection.open('GET', request['url'], true);
    }
    catch(e)
    {
        return false;
    }

    this.connection.onreadystatechange = function()
    {
        if (Loader.connection.readyState == 4)
        {
            if (Loader.connection.status == 200)
            {
                document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText;

                Loader.requestCounter++;
                Loader.requestQueueCounter--;

                if (Loader.requestQueue.length > Loader.requestCounter)
                {
                    Loader.running = false;
                    setTimeout("Loader.runRequest()",100);
                }
                else
                {
                    Loader.running = false;
                    Loader.requestQueue = new Array();
                    Loader.requestCounter = 0;
                    Loader.requestQueueCounter = 0;
                }
            }
            else
            {
                alert('connection error : '+Loader.connection.status);
            }
        }
    };

    this.connection.send(request['send']);
    return true;
};


LoaderObject.prototype.add = function(requestObject)
{
    var requestsParams = requestObject.split('|');

    this.requestQueue[this.requestQueue.length] = {
            'elementId'        : requestsParams[0]        || false,
            'url'            : requestsParams[1]        || false
    };

    this.requestQueueCounter++;
}


LoaderObject.prototype.register = function(request)
{
    if(typeof(request) != 'string')
    {
        return false;
    }

    var requestObjects    = request.split(',');

    if(typeof(requestObjects) == 'object')
    {
        for(var index in requestObjects)
        {
            this.add(requestObjects[index]);
        }
    }

    if
    (
        !this.running &&
        this.requestQueueCounter > 0
    )
    {
        this.runRequest();
    }

    return null;
};

var Loader = new LoaderObject();

</script>
</head>
<body>

<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
<br /><br />
<a href="#" onclick="javascript:Loader.register('content1|datei1.php');">SET CONTENT 1</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content2|datei2.php');">SET CONTENT 2</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content3|datei3.php');">SET CONTENT 3</a>&nbsp;
<a href="#" onclick="javascript:Loader.register('content1|datei1.php,content2|datei2.php,content3|datei3.php');">SET ALL</a>

</body>
</html>

dex · 29.05.2009, 08:51

Nice work!!
Bin beeindruckt!
Ich glaub ich werd zum Ajax-Fan

Echt sauber gelöst!

Lebenssonde · 29.05.2009, 10:09

Hey ihr beiden, ihr habt ganze Arbeit geleistet. Ich danke euch herzlich! Ich werde es mal ausprobieren... Da ich AJAX / JS anfänger bin, werde ich sicher paar Stunden brauchen, um alles nachvollziehen zu können. Denn ich habe noch ein kleines Wunsch - Ich will noch der Requestdatei eine Zeile (Anweisungstext, was die Requestdatei eigentlich machen soll im Form von content=profile&userid=5) Ich muss also bei dem Aufruf noch eine Variable Value mitgeben und das dann im Händler weiterbehandeln.... Wärt ihr so gut, das noch zu ergänzen? Dann habe ich ein Brocken zum Zerkauen und darüber zu grübeln

Nochmals vielen vielen Dank für die Mühe

Lebenssonde

Celli · 29.05.2009, 10:51

Einfach den Dateinamen erweitern.

PHP-Code:

  Loader.register('content1|datei1.php?content=profile&userid=5');

Lebenssonde · 29.05.2009, 20:33

Hey super. Es funktioniert einwandfrei. Danke nochmal für die Hilfe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
durch klick auf bild user aufrufen	david1985	PHP Tipps 2009	21	30.03.2009 15:56
[Erledigt] Bild per klick ändern?	fan34	JavaScript, Ajax und mehr	2	22.11.2008 13:10
[Erledigt] Variable per Klick ändern	Jacke	PHP Tipps 2008	4	06.11.2008 10:29
[Erledigt] per klick (außerhalb vom div) funktion aufrufen	amateur_php	JavaScript, Ajax und mehr	9	17.10.2008 14:32
mehrere datensätze mit mehreren submits ändern	kladotti	PHP Tipps 2008	2	27.04.2008 21:43
input inhalt bei klick ändern	jar3d	HTML, Usability und Barrierefreiheit	3	10.01.2008 16:33
Bestimmten Wert in mehreren Zeilen ändern		PHP-Fortgeschrittene	1	06.02.2005 17:41
PHP-Datei mit mehreren Parametern aufrufen		HTML, Usability und Barrierefreiheit	2	15.11.2004 22:03

28.05.2009, 15:11
Lebenssonde Neuer Benutzer Registriert seit: 28.05.2009 Beiträge: 8	[Erledigt] Mehrere DIV Container mit einem Klick ändern (mit mehreren Request Aufrufe Hallo, ich hab ein Problem, dessen Lösung ich irgendwie nicht finden kann, obwohl mir das eigentlich naheliegend erscheint, dass es bereits gegeben sein musste: Ich möchte gerne bei einem Request Aufruf mehrere DIV Containter aktualisieren. An sich ja kein Problem - einfach mehrere xxxx.innerHTMLxxxx Befehle hintereinander ausführen. Oder dazu eine extra Funktion basteln, der mehre andere Funktionen nacheinander aufruft. Nur habe ich keine Lösung für die Aufgabe gefunden, mehrere Request Aufrufe hintereinander auszuführen, die jede für sich einen bestimmten DIV Container ändert. Ich hab zwar einfach mal durch eine Sammelfunktion ausprobiert, aber es hat nicht hingehauen, weil während der erste Request auf die Antwort von Request - php - Datei gewartet hat, schon der zweite Request gesendet worden ist. Das Resultat war, dass sich immer nur ein DIV Container aktualisiert hat und die anderen nicht. Mir fällt nur eine Möglichkeit ein, in der ich am Ende der Requestauswertung von Funktion 1 die requestabfragefunktion von Funktion 2 aufruft. Aber das ist doch ziemlich ungelenk, sollte es tatsächlich funktionieren. Oder ich muss irgendwie mehrere Antworten von der Request-Datei erhalten, aber wie geht denn das? Also dass ich dann die gelieferte (mehrere) Argumente in die innerHTML Anweisungen verpacke. Gibt es irgendwo eine Lösung, in der ich mehrere DIV Container mit jeweilig zugeordneten Requestdateien mit einem Link aufrufen kann? Lebenssonde


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.05.2009, 15:38
dex Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 195	Ist was du sucht setTimeout? Du möchtest mit einem Ajax-Prototypen doch verschiedene Inhalte verschiedener Dateien in unterschiedliche Container per [element].innerHTML laden, oder? Wenn ja: Ein Array der alle Dateien enthält, ein Array der die entsprechenden ContainerID's enthält und schon kannst du ne schleife durchlaufen lassen die dir alle Container nacheinander füllt. Ich hoffe mal ich kann dir damit weiterhelfen g Gruß

28.05.2009, 16:44
Lebenssonde Neuer Benutzer Registriert seit: 28.05.2009 Beiträge: 8	Hi Erstmal du hast es erfasst, was ich will, allerdings komme ich mit deiner Antwort nicht ganz klar. Kannst du mir das etwas ausfürhrlicher beschreiben? Ich bin noch AJAX Anfänger... Was meinst du genau mit Array mit Dateien und Array mit Container ids? Wie soll denn die Schleife aussehen? Was ich probiert habe ist mehr oder weniger eine Schleife, aber halt manuell: PHP-Code: <html> <head> <title>Ajax Beispiel 002</title> <script type="text/javascript"> <!-- var request = false; function start(value){ setRequest(value); setRequest1(value); } // Request senden function setRequest(value) { // Request erzeugen if (window.XMLHttpRequest) { request = new XMLHttpRequest(); // Mozilla, Safari, Opera } else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5 } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6 } catch (e) {} } } // überprüfen, ob Request erzeugt wurde if (!request) { alert("Kann keine XMLHTTP-Instanz erzeugen"); return false; } else { var url = 'ajaxtest.php'; // Request öffnen request.open('post', url, true); // Requestheader senden request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Request senden request.send(value); // Request auswerten request.onreadystatechange = interpretRequest; } } // Request auswerten function interpretRequest() { switch (request.readyState) { // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen case 4: if (request.status != 200) { alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status); } else { var content = request.responseText; // den Inhalt des Requests in das <div> schreiben document.getElementById('content').innerHTML = content; } break; default: break; } } // Request senden function setRequest1(value) { // Request erzeugen if (window.XMLHttpRequest) { request = new XMLHttpRequest(); // Mozilla, Safari, Opera } else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5 } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6 } catch (e) {} } } // überprüfen, ob Request erzeugt wurde if (!request) { alert("Kann keine XMLHTTP-Instanz erzeugen"); return false; } else { var url = 'ajaxtest.php'; // Request öffnen request.open('post', url, true); // Requestheader senden request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Request senden request.send(value); // Request auswerten request.onreadystatechange = interpretRequest1; } } // Request auswerten function interpretRequest1() { switch (request.readyState) { // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen case 4: if (request.status != 200) { alert("Der Request wurde abgeschlossen, ist aber nicht OKnFehler:"+request.status); } else { var content = request.responseText; // den Inhalt des Requests in das <div> schreiben document.getElementById('content1').innerHTML = content; } break; default: break; } } //--> </script> </head> <body> <ul> <li><a href="javascript:setRequest('name=max')">Max</a></li> <li><a href="javascript:start('name=süßi')">Susi</a></li> <li><a href="javascript:setRequest('name=charly')">Charly</a></li> </ul> <br /> <div id="content"></div>...<div id="content1">***</div> </body> </html> Das hat aber nicht hingehauen. Er hat jeweils nur 'content' oder 'content1' geändert aber nie beides auf einmal, was ich eigentlich wollte. (Er sollte in beide Containter den jeweiligen angeklickten Namen hinschreiben) Vielleicht ist meine denkweise falsch?

28.05.2009, 18:56
dex Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 195	Mit Array meine ich folgendes: Code: var container = new Array("content1","content2","content3"); var datafile = new Array("datei1.php","datei2.php","datei3.php"); Hier noch eine Hilfe dazu: SELFHTML: JavaScript / Objektreferenz / Array Die Arrays müssen aber GLOBAL sein, sodass du sie in der folgenden Funktion verwenden kannst. Mit dem Codeschnipsel willst du ja erreichen, dass content1 den inhalt von datei1.php geliefert bekommt und content2 den inhalt von datei2.php usw... Also nimmst du einfach folgendes: Code: // hier die Array's SetRequest(container_array,datafile_array,datanumber) { if(container_array.length != datafile_array.length) alert("Ungleiche Anzahl von Elementen!"); else { // AJAX REQUEST // var url = datafile_array[datanumber]; // container_array[datanumber] mit an den onreadystatechange senden, sodass er gefüllt werden kann // nach der kompletten Request einen Timeout von 200 msek. wegen Verarbeitungszeitmaximum ( :( ) und dem Aufruf des nächsten Containers setTimeout("SetRequest("+container_array+","+datafile_array+","+(datanumber+1)+")",200); // datanumber um 1 erhöhen um das nächste Array-Element mit der nächsten Indexnr. anzusprechen } } Fertig. Skript ist ungetestet. Werde es nachher ausprobieren und mögliche Fehler suchen. Bis nachher. Gruß EDIT: Bin kurz davor es zu lösen. Es klappt alles, mein Problem ist nur, dass zwischen request.send und request.onreadystatechange eine Pause sein muss (aktuell ein alert), dass alles funktioniert. Wenn das draußen ist, dann stelle ich dir das Skript hier rein. Ist echt nicht ganz einfach Geändert von dex (28.05.2009 um 19:30 Uhr).

29.05.2009, 01:08
Celli Erfahrener Benutzer Registriert seit: 24.05.2009 Beiträge: 158	Habe einen XMLHttpRequest Handler erstellt um die Abläufe zu vereinfachen. Man kann mehrere oder einzelne Elemente neu befüllen. Die Elemente müssen mit ElementId\|Datei angegeben werden und mit Komma getrennt sein. Das Deklarieren eines Arrays innerhalb des onclick entfällt somit. Da XMLHttpRequest mit einer zur Zeit maximallen Anzahl von 2 gleichzeitigen laufenden Requests arbeitet, habe ich ein Queue Handling eingesetzt um bei mehreren Elementen diese nacheinander zu laden. Es wird somit gewartet bis ein Request abgearbeitet wurde bis das nächste startet. PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Beispiel</title> <script type="text/javascript"> var LoaderObject = function() { this.connection = false; this.running = false; this.requestQueue = new Array(); this.requestCounter = 0; this.requestQueueCounter = 0; }; LoaderObject.prototype.initialize = function() { if (window.XMLHttpRequest) { this.connection = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { this.connection = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { this.connection = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return false; } } } return true; }; LoaderObject.prototype.runRequest = function() { if(this.running) { return false; } if(!this.connection) { var reconnected = this.initialize(); if(!reconnected) { return false; } } this.running = true; var request = this.requestQueue[this.requestCounter]; if ( !request['url'] \|\| !request['elementId'] ) { return false; } try { this.connection.open('GET', request['url'], true); } catch(e) { return false; } this.connection.onreadystatechange = function() { if (Loader.connection.readyState == 4) { if (Loader.connection.status == 200) { document.getElementById(Loader.requestQueue[Loader.requestCounter].elementId).innerHTML = Loader.connection.responseText; Loader.requestCounter++; Loader.requestQueueCounter--; if (Loader.requestQueue.length > Loader.requestCounter) { Loader.running = false; setTimeout("Loader.runRequest()",100); } else { Loader.running = false; Loader.requestQueue = new Array(); Loader.requestCounter = 0; Loader.requestQueueCounter = 0; } } else { alert('connection error : '+Loader.connection.status); } } }; this.connection.send(request['send']); return true; }; LoaderObject.prototype.add = function(requestObject) { var requestsParams = requestObject.split('\|'); this.requestQueue[this.requestQueue.length] = { 'elementId' : requestsParams[0] \|\| false, 'url' : requestsParams[1] \|\| false }; this.requestQueueCounter++; } LoaderObject.prototype.register = function(request) { if(typeof(request) != 'string') { return false; } var requestObjects = request.split(','); if(typeof(requestObjects) == 'object') { for(var index in requestObjects) { this.add(requestObjects[index]); } } if ( !this.running && this.requestQueueCounter > 0 ) { this.runRequest(); } return null; }; var Loader = new LoaderObject(); </script> </head> <body> <div id="content1">content 1</div> <div id="content2">content 2</div> <div id="content3">content 3</div> <br /><br /> <a href="#" onclick="javascript:Loader.register('content1\|datei1.php');">SET CONTENT 1</a>  <a href="#" onclick="javascript:Loader.register('content2\|datei2.php');">SET CONTENT 2</a>  <a href="#" onclick="javascript:Loader.register('content3\|datei3.php');">SET CONTENT 3</a>  <a href="#" onclick="javascript:Loader.register('content1\|datei1.php,content2\|datei2.php,content3\|datei3.php');">SET ALL</a> </body> </html> Geändert von Celli (29.05.2009 um 01:52 Uhr).

29.05.2009, 08:51
dex Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 195	Nice work!! Bin beeindruckt! Ich glaub ich werd zum Ajax-Fan Echt sauber gelöst!

29.05.2009, 10:09
Lebenssonde Neuer Benutzer Registriert seit: 28.05.2009 Beiträge: 8	Hey ihr beiden, ihr habt ganze Arbeit geleistet. Ich danke euch herzlich! Ich werde es mal ausprobieren... Da ich AJAX / JS anfänger bin, werde ich sicher paar Stunden brauchen, um alles nachvollziehen zu können. Denn ich habe noch ein kleines Wunsch - Ich will noch der Requestdatei eine Zeile (Anweisungstext, was die Requestdatei eigentlich machen soll im Form von content=profile&userid=5) Ich muss also bei dem Aufruf noch eine Variable Value mitgeben und das dann im Händler weiterbehandeln.... Wärt ihr so gut, das noch zu ergänzen? Dann habe ich ein Brocken zum Zerkauen und darüber zu grübeln Nochmals vielen vielen Dank für die Mühe Lebenssonde

29.05.2009, 10:51
Celli Erfahrener Benutzer Registriert seit: 24.05.2009 Beiträge: 158	Einfach den Dateinamen erweitern. PHP-Code: `Loader.register('content1\|datei1.php?content=profile&userid=5');` __________________ Eine Antwort oder Lösung habe ich nicht immer, aber zu 99,9% eine Idee. (200 Posts Limit)

29.05.2009, 20:33
Lebenssonde Neuer Benutzer Registriert seit: 28.05.2009 Beiträge: 8	Hey super. Es funktioniert einwandfrei. Danke nochmal für die Hilfe.