Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    [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
    Stichworte: -
  • #2
    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ß

    Kommentar

    • #3
      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?

      Kommentar

      • #4
        Zuletzt geändert von dex; 28.05.2009, 18:30.
        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

        Kommentar

        • #5
          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ß

          Kommentar

          • #6
            Zuletzt geändert von Celli; 29.05.2009, 00:52.
            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> 

            Kommentar

            • #7
              Nice work!!
              Bin beeindruckt!
              Ich glaub ich werd zum Ajax-Fan
              Echt sauber gelöst!

              Kommentar

              • #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

                Kommentar

                • #9
                  Einfach den Dateinamen erweitern.

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

                  Kommentar

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

                    Kommentar

                    • #11
                      Zuletzt geändert von Scriptfreak; 12.05.2010, 16:13.
                      Hi,
                      habe diesen Skript auch mal angewendet und finde, dass der sehr gut geschrieben is. Bin leider totaler anfänger was Js und Ajax angeht. Bei mir fuktioniert der skript eigentlich auch sehr gut, nur das wenn ich z.B. auf den ersten Link gehe erscheint der neue content, klicke ich auf den nächsten erscheint der neue content, nur das sich jedesmal der content ein wenig verschieb und nicht genau da positioniert wo er soll. wenn ich 10 links durchgeklickt habe steht der content ganz abseits der eigentlichen Homepage. Zweite problem is, dass jeder Browser anders reagiert auf den skript. Safarie z.B. macht garnichts.
                      Gibt es eine möglichkeit, dass sich, wenn man einen weiteren link anklickt, sich das alte refresht und der neue inhalt dort hingelangt wo er hin soll.

                      PHP-Code:
                                  <a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/home.php','header|Lokale-Seiten/home-navi.php','content|Lokale-Seiten/home-content.php');">HOME</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/team.php','header|Lokale-Seiten/team-navi.php','content|Lokale-Seiten/team-content.php');">TEAM</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/boote.php','header|Lokale-Seiten/boote-navi.php','content|Lokale-Seiten/boote-content.php');">BOOTE</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/pilot.php','header|Lokale-Seiten/pilot-navi.php','content|Lokale-Seiten/pilot-content.php');">PILOT</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/termine.php','header|Lokale-Seiten/termine-navi.php','content|Lokale-Seiten/termine-content.php');">TERMINE</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/sponsoren.php','header|Lokale-Seiten/sponsoren-navi.php','content|Lokale-Seiten/sponsoren-content.php');">SPONSOREN</a>
                              <                      a href="#" onclick="javascript:Loader.register('text|Lokale-Seiten/kontakt.php','header|Lokale-Seiten/kontakt-navi.php','content|Lokale-Seiten/kontakt-content.php');">KONTAKT</a> 
                      so sieht meine navigation aus.
                      den ajax skript hab ich von oben übernommen.

                      danke schonmal im vorraus.

                      Kommentar

                      • #12
                        Ich habe eine Frage zum Script von Celli: wie passe ich den Code so an, dass automatisch - also ohne Klick auf einen Link- der Inhalt von content1 -> datei1.php und content2 -> datei2.php nachgeladen wird? Ich bin für jeden Hinweis sehr dankbar. Meine JavaScript-Kenntnisse sind einfach zu schlecht, als dass ich selber den Code anpassen kann.

                        Danke schonmal,
                        Poldi

                        Kommentar

                        Vorherige Weiter
                        Lädt...
                        X