JQuery $.post dynamische Daten versenden

[Fabi_K]

Hi,

folgendes hab ich vor. Und zwar will ich auf einer HTML-Seite alle Formulare ermitteln und sie so umstellen, daß deren Daten per JQuery verschickt werden. Da ich nicht wissen kann, welche Daten in den jeweiligen Formularen vorhanden sind, muss ich diese vor dem Abschicken ermitteln.

Hab diese beiden Funktionen:

function initSubmits() {
    var f;
    for(var i=0; i<document.forms.length; i++) {
        f = document.forms[i];
        if(!f.onsubmit) {
            f.onsubmit = handleSubmit;
        }
    }
}

function handleSubmit(evt) {
    var e;
    var url = evt.target.action;
    var params = {};
    for(var i=0; i<evt.target.elements.length; i++) {
        e = evt.target.elements[i];
        params.add(e.name, e.value);// das funzt nicht. So hätt ich das aber am liebsten
    }
    $.post(url, params, showPage);
    return false;
}

initSubmits() ermittelt alle Formulare und setzt einen Eventhandler für das OnSubmit-Event. Der Eventhandler ist handleSubmit().

$.post(url, params, showPage); versendet die Daten
url: ist klar
params: sind die einzelnen Felder aus dem Formular.
showPage: ist eine Funktion, welche die Antwort vom Webserver verarbeitet.

Die normale Vorgehensweise um Daten per Post zu versenden wäre ja
$.post(url, {paramName1: value1, paramName2: value2}, showPage);

Das ist mir allerdings zu statisch.

Laut JQuery-Doku http://api.jquery.com/jQuery.post/
ist der 2. Paramter für $.post ein Objekt vom Typ "Map". Wie kann ich damit arbeiten? Find leider nichts dazu.


Viele Grüße
Fabian

 

[Kümmelkorn]

Ich würd dir empfehlen, deine Frage von einem Moderator ins Web-Programmierung-Forum verschieben zu lassen

 

[miss.moxy]

Ich würd dir empfehlen, deine Frage von einem Moderator ins Web-Programmierung-Forum verschieben zu lassen

…wenn man nicht grad zufällig reinguggt, übersieht man sowas schnell –
besser is, falsch platzierte Threads einfach mit der roten Hand zu melden,
dann kriegt der zuständige Mod nämlich ne Nachricht

*verschubst*

 

[dms]

Das ist ein Objekt.

Du kannst auch folgendes machen:

var data=new Object();
data.paramName1="value1";
data.paramName2="value2";

Übrigens, da Du ja schon jQuery nutzt, kannst Du Deinen Code noch etwas optimieren.

$("form").submit(function(){
    var params = {};
    for(var i=0; i<this.elements.length; i++) {
        e = this.elements[i];
        params[e.name]=e.value;
    }
    $.post(url, params, showPage);
    return false;
})

 

[Fabi_K]

Hallo,

danke dms. Das ist genau das was ich suche.

die Funktion handleSubmit() hab ich jetzt wie folgt:

function handleSubmit(evt) {
    var e;
    var url = evt.target.action;
    var params = {};
    for(var i=0; i<evt.target.elements.length; i++) {
        e = evt.target.elements[i];
        params[e.name] = e.value;
    }
    $.post(url, params, showPage);
    return false;
}

Läuft wunderbar.

$("form").submit(function(){
    var params = {};
    for(var i=0; i<this.elements.length; i++) {
        e = this.elements[i];
        params[e.name]=e.value;
    }
    $.post(url, params, showPage);
    return false;
})

hab ich dagegen nicht zum laufen bekommen.
Was mach denn $("form") ?
Kann ich da auch einen anderen Wert als "form" eintragen?


Gruß Fabian

 

[dms]

Hi Fabian,

[COLOR="Sienna"]$("form")[/COLOR][COLOR="DarkOliveGreen"].submit([/COLOR][COLOR="DarkOrange"]function(){[/COLOR]
    var params = {};
    for(var i=0; i<[COLOR="Magenta"]this[/COLOR].elements.length; i++) {
        e = this.elements[i];
        params[e.name]=e.value;
    }
    $.post(url, params, showPage);
    return false;
[COLOR="#ff8c00"]}[/COLOR][COLOR="DarkOliveGreen"])[/COLOR]

hab ich dagegen nicht zum laufen bekommen.
Was mach denn $("form") ?

Dieser Schnipsel sollte eigentlich funktionieren (da ich Ihn getestet habe ) und ersetzt Deine beiden Funktionen komplett.

$("form") Damit ermittelst Du per jQuery alle Formular-Tags im Dokument.

.submit ist der Eventhandler. Er gillt für alle zuvor ermittelten Elemente (hier Formulare). Die darin definierte Funktion wird bei onsubmit ausgeführt. Auf das Formular kannst Du innerhalb der Funktion mit this zugreifen.

Du müsstest nur dafür sorgen dass die Variablen url und showPage definiert sind, dann sollte es laufen.

Write Less, Do More

Kann ich da auch einen anderen Wert als "form" eintragen?

Sure thing. Sämtliche CSS3-Selektoren und noch ein bischen mehr sind möglich.

 

[mr660]

vielleicht solltest du mal die doku zu jquery genauer lesen - ist im uebrigen ziemlich cool, habe selbst vor kurzem bei einem umbau auf jquery gesetzt.

was mir allerdings nicht ganz klar ist, was willst du damit bewirken. das formular abschicken, ohne die seite zu wechseln. da die daten ja - zumindest in deinem beispiel - nicht weiter verarbeitet oder ueberprueft werden, macht das doch fast keinen unterscheid?
klingt ja eigentlich fast nach "ajax". waere dann aber ein anderer (womoeglich sauberer) ansatz...

markus

 

[dms]

klingt ja eigentlich fast nach "ajax". waere dann aber ein anderer (womoeglich sauberer) ansatz...

Es IST Ajax. Ajax sagt ja nichts darüber aus, was mit den Daten gemacht wird. Asynchron werden sie aber übertragen. Aber was das ganze bezwecken soll habe ich mich auch schon gefragt.

 

[Fabi_K]

Aber was das ganze bezwecken soll habe ich mich auch schon gefragt.

Ohne weit ausholen zu müssen, schreibe ich an einer Webanwendung, welche mehr oder weniger auf Templates basiert. Jedes Template hat seine eigene Funktion zur Datenverwaltung bzw. -Manipulation.

Wenn ich ein Template speichre, will ich nicht immer die komplette Website neu generieren müssen, sondern nur der Teil vom Template der eben die Daten verschickt hat.

Ich hab also mein HTML-Skelett, welches ich nur auf der Startseite vom Webserver lade. Alle anderen HTML-Code-Teile werden per Ajax nachgeladen.

Ein Wunder der Technik und eine scheiß Arbeit das ganze in HTML umzusetzen.
Ich wünschte HTML wär' nich so kacke und ich könnte Webanwendungen genauso schnell und einfach entwickeln wie Desktop-Anwendungen.

Frohes Schaffen noch,
Gruß Fabian

 

[dms]

Ich wünschte HTML wär' nich so kacke und ich könnte Webanwendungen genauso schnell und einfach entwickeln wie Desktop-Anwendungen.

Alles nur eine Sache der Übung. Ich könnte es genau anders herum sagen, aber nur weil ich mit zweiterem kaum Erfahrung habe.

 

[Fabi_K]

Hi,

ich hab jetzt ein Problem festgestellt.

Ich lade ja HTML-Code-Teile dynamisch nach. In diesen Code-Teilen können auch Forms enthalten sein. Diese muss ich ja jetzt auch so manipulieren, daß sie ebenfalls per Ajax verschickt werden.

Deswegen hatte ich bisher

function initSubmits() {
    $("form").submit(function(evt){
        var url = evt.target.action;
        var params = {};
        for(var i=0; i<this.elements.length; i++) {
            e = this.elements[i];
            params[e.name]=e.value;
        }
        $.post(url, params, showPage);
        return false;
    });
}

jedes Mal aufgerufen, sobald ich Daten per Ajax nachgeladen habe.
Die Forms im nachgelandenen HTML-Code haben dann auch artig ihre Daten per Ajax verschickt.

Dabei registriert JQuery anscheinend bei jedem Aufruf von initSubmits() einen neuen Eventhandler für das OnSubmit-Event und überschreibt den bestehenden nicht. Intern baut sich also ne Liste von lauter Eventhandlern auf.

Das resultiert darin, daß die gleichen Daten X-Mal gesendet werden.

Das kostet irgendwann ordentlich Performance und macht nur unnötig Traffic.
Kann ich JQuery irgendwie sagen, daß es alle bestehenden Eventhandler für OnSubmit entfernt?
Oder evtl. alle bestehenden überschreiben?

Schönen Gruß
Fabian

 

[dms]

Ich würde einfach einen Filter einbauen.

$("form:not(.processed)").addClass("processed").submit(...)

Edit:

Nach nochmaligem Nachdenken ist der Ansatz aber unsauber. Geht auch besser. In Deinem Callback showPage schreibst Du den Inhalt ja irgendwo ins DOM hinein.

Angenommen das sieht inetwa so aus:

var showPage = function(data) {
   $("#dropzone").html(data);
}

Dann kannst Du der #dropzone auch einfach noch die Eventhandler mit aufdrücken.

var showPage = function(data) {
   $("#dropzone").html(data).children("form").submit(...);
}

 

[Fabi_K]

Wie geil. Es geht.

Tausend Dank dms :-D

 

[Fabi_K]

Hi,

eine Sache ist mir noch aufgefallen.

var showPage = function(data) {
   $("#dropzone").html(data).children("form").submit(...);
}

funktioniert nur, wenn in data das Form-Tag als erstes angegeben ist.

Also data = "<form ...> usw. </form>"
funzt.

Und z.B. data = "<div><form ...> usw. </form></div>"
funzt nicht.

Zumindest im Firefox. Hab's auf keinem anderen Browser getestet.

Schönes WE noch.
Gruß Fabian

 

[dms]

Mit find() sollte es auch verschachtelte Formulare finden.

var showPage = function(data) {
   $("#dropzone").html(data).[B]find[/B]("form").submit(...);
}

 

[Fabi_K]

Alles klar. Nochmals Danke.