• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ajax Formular abgesendet innerhalb eines Arrays, aber wie Werte zusammenfassen?

T

tosam

Neues Mitglied
Hallo,

dies ist mein erster Beitrag hier. Ich habe nach dieser Anleitung Ajax Beispiel 004 auf meiner Seite Ajax in ein Formular eingebaut. Der Code ist nahezu identisch, lediglich wird statt der groß und klein geschriebenen Wörter Zahlen und IDs zurückgegeben. Dies funktioniert auch problemlos.

Mein Problem ist jetzt folgendes: Das Formular ist innerhalb einer foreach Schleife (Artikel Liste) eingebaut. Hier wird für jeden Artikel einmal mit Ajax eine ID und eine vom User eingetragene Menge an den Server geschickt.
Die neue Menge wird vom Server gespeichert und per Javascript wird der Gesamtpreis (neue Menge * Einzelpreis) für jeden Artikel angezeigt. Mein Problem ist jetzt, wie ich außerhalb der Foreach Schleife an die einzelnen Werte komme. Ich möchte die Einzelwerte zu einer Gesamtsumme addieren.

Aber leider sind alle Versuche dahingehend gescheitert.

Also vielen Dank schonmal.
Thomas
 
Hallo,

da dies mein erster Kontakt zu Ajax ist sind meine Versuche wohl eher schwer zu beschrieben. Hier der Code von der Seite:

Code: 
[{foreach key=basketindex from=$oxcmp_basket->getContents() item=basketitem name=test_Contents}]

... restlicher Code für die jeweilige Artikelzeile ...

<script type="text/javascript"> 
 
    // Request senden 
    function setRequest_[{$smarty.foreach.test_Contents.iteration}](id) { 
        // 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 = "basket_update.php"; 
            // Name auslesen 
            var value = document.getElementById('source_[{$smarty.foreach.test_Contents.iteration}]').value; 
            id = '[{ $basketproduct->oxarticles__oxid->value }]'; 
            price = '[{ $basketproduct->oxarticles__oxprice->value }]'; 
            // Request öffnen 
            request.open('post', url, true); 
            $.post("index.php/?shp=1&cl=basket&fnc=changebasket&aid=[{ $basketproduct->oxarticles__oxid->value }]&bindex=0&am="+value, $(this).serialize()); 
            // Requestheader senden 
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
            // Request senden 
            request.send('amount_[{$smarty.foreach.test_Contents.iteration}]='+value+'&id_[{$smarty.foreach.test_Contents.iteration}]='+id+'&price_[{$smarty.foreach.test_Contents.iteration}]='+price); 
            // Request auswerten 
            request.onreadystatechange = interpretRequest_[{$smarty.foreach.test_Contents.iteration}]; 
        } 
    } 
    // Request auswerten 
    function interpretRequest_[{$smarty.foreach.test_Contents.iteration}]() { 
        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 OK\nFehler:"+request.status); 
                } else {             
                    // Antwort des Servers -> als XML-Dokument 
                    var xmlDoc    = request.responseXML; 

                    // Namen aus dem XML-Dokument herauslesen 
                    amount_[{$smarty.foreach.test_Contents.iteration}]    = xmlDoc.getElementsByTagName('amount[{$smarty.foreach.test_Contents.iteration}]')[0].firstChild.nodeValue; 
                    id_[{$smarty.foreach.test_Contents.iteration}]            = xmlDoc.getElementsByTagName('id[{$smarty.foreach.test_Contents.iteration}]')[0].firstChild.nodeValue; 
                    if (amount_[{$smarty.foreach.test_Contents.iteration}] <1) amount_[{$smarty.foreach.test_Contents.iteration}] = 1; 
                    price_[{$smarty.foreach.test_Contents.iteration}]        = xmlDoc.getElementsByTagName('price[{$smarty.foreach.test_Contents.iteration}]')[0].firstChild.nodeValue; 

                    // Werte in die Felder schreiben 
                    // document.getElementById('field_amount_[{$smarty.foreach.test_Contents.iteration}]').innerHTML    = amount_[{$smarty.foreach.test_Contents.iteration}]; 
                    document.getElementById('test_basket_TotalPrice_[{$basketproduct->oxarticles__oxid}]_[{$smarty.foreach.test_Contents.iteration}]').innerHTML = amount_[{$smarty.foreach.test_Contents.iteration}] * [{$basketproduct->oxarticles__oxprice}]; 
                } 
                break; 
            default: 
                break; 
        } 
    } 
  //--> 
  </script>

... restlicher Code für die jeweilige Artikelzeile ...

[{/foreach}]


Das Absenden dieses Ajax requests ist erfolgreich, und ich kann die die Menge, die Id und den Preis wieder entgegennehmen.
Was ich nicht kann ist außerhalb der Foreach Schleife auf die Felder Gesamtpreis (Preis * Menge) zugreifen. Ich habe versucht, außerhalb der Funktion mit einer neuen Funktion

Code: 
<script type="text/javascript"> 
    document.getElementById('test_basketGrandTotal').innerHTML = document.getElementById('test_basket_TotalPrice_jvqf515e833c9a9b742585ae46728d28_1').value; 
</script>

darauf zuzugreifen, aber leider immer ohne Erfolg. Das Feld mit der ID test_basketGrandTotal zeigt immer "undefined" an.


Thomas
 
Zuletzt bearbeitet:
Nun, also zumindest habe ich jetzt den Wert für das Feld mit der ID "test_basketGrandTotal" anpassen können indem ich den Code so angepasst habe:

Code: 
<script type="text/javascript">      document.getElementById('test_basketGrandTotal').innerHTML = document.getElementById('test_basket_TotalPrice_jvqf515e833c9a9b742585ae46728d28_1').firstChild.nodeValue; </script>

Jetzt kommt aber leider schon das nächste Problem auf mich zu:

Ich setze nach dem Ajax Response ein Feld "Gesamtpreis" auf einen neuen Wert.
Diesen Wert (Gesamtpreis) lese ich nun mit der oben geschriebenen Funktion aus. Beim ersten Laden der Seite klappt das auch.
Wenn ich nun den Wert für die Menge ändere wird das Feld "Gesamtpreis" wie gewünscht geändert. Aber der Wert dieses Feldes (Gesamtpreis) wird nicht an das Feld mit der ID 'test_basketGrandTotal' übergeben.

Der Wert für das Feld 'test_basketGrandTotal' bleibt also stehen.
Oder ist es notwendig (eigentlich schon fast logisch) das ich nach dem Setzen des Wertes Gesamtpreis eine Funktion aufrufe welche das Feld mit der ID 'test_basketGrandTotal' neu anpasst.

Mh, das probiere ich jetzt gleich mal.

Thomas
 
Das ist alles viel zu wage um da wirklich helfen zu können. Ich nehme an mit Feld meinst du ein Formularelement, dort werden die Inhalte über die Eigenschaft .value übergeben. Aber warum muss du bei so einer Sache den Gesamtpreis übergeben? Kann der nicht auf dem Server berechnet werden?
 
Ja, entschuldige. Ich habe seit letzter Woche Kontakt zu Ajax und bin froh dass es schonmal so läuft. Ich bin sonst nur im Bereich PHP und Datenbanken tätig.

Das ist natürlich auch ein interessanter Ansatzpunkt, die Werte gleich auf dem Server zu berechnen. Dann kann ich den Wert ja gleich aus der XML auslesen und setzen.
Dies ist also in der von dem Ajax request angesprochenen PHP Datei möglich oder?

Auch das probiere ich jetzt gleich mal.

Vielen Dank.
Thomas
 
Gelöst!

Das von mir angesprochene Problem konnte gelöst werden und der Ajax Request geht sauber an den Server raus und die Response wird per
Code: 
document.getElementById("new_basket").innerHTML = request.response;

in allen Browsern angezeigt. Allen? Nein, leider nicht. Im Internet Explorer bleibt der Inhalt des <tbody> Tags unverändert.

Ich habe dazu im Netz bereits nachgelesen und als kleines Workaround das umschließende <table> Tag wiederum in ein <div> Tag gepackt und dies mit der entsprechenden ID ("new_basket") versehen. Als Ergebnis dessen erhalte ich jetzt im IE "undefined".

Ich habe testhalber auch mal request.status ausgeben lassen und erhalte im gewünschten <div> die 200.
In den Entwicklertools (IE9) wird im Reiter Netzwerk unter Antworttext auch der korrekte neue HTML Code angezeigt.

Woran kann denn jetzt das undefined liegen? In den anderen Browsern (Opera, FF, Safari, Chrom) funktioniert es ja auch problemlos.



Vielen Dank, Thomas

NACHTRAG: Das Problem wurde jetzt gelöst.
Code: 
document.getElementById("new_basket").innerHTML = request.response;
getauscht gegen
Code: 
document.getElementById("new_basket").innerHTML = request.responseText;

Ich frage mich nur warum es in allen anderen Browsern ging. Nun, Schöne Woche noch :)


Viele Grüße Thomas
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben