✔ Mehrere Jquery Dialoge mit Formularen auf einer Seite...

[Wutaler]

Guten Morgen, oder gute Nacht?

Ich weiß das man zu gewissen Uhrzeiten eventuell nicht mehr über seinen Quelltexten oder scripten hängen sollte, aber...

Ich habe folgendes Problem:

Ich habe eine index.html-Datei.
In dieser Datei befinden sich 2 JQueryUI-Dialoge mit jeweils einem HTML-Formular. Diese Dialoge kann ich auch mit einem einzigen Script getrennt super über bestimmte Links ansteuern.

Zur verdeutlichung hier der HTML-Code (Jquery, Jquery ui etc ist naturlich im HTML Dokument eingefügt):

<div id="dialog_1" class="dialog" title="Dialog Eins">
    <form id="formular_1" method="post" action="ajax/script1.php">   
        <input name="variable1" type="hidden">
        <fieldset>
            <p>
                <label for="variable2">Benutzername</label>
                <input type="text" name="variable2" id="variable2" class="text ui-widget-content ui-corner-all"  required>
            </p>
            <p>
                <div id="ajaxMessage" class="red bold center"></div>
            </p>
            <p class="center">
                <button type="submit" class="ui-button ui-widget ui-corner-all">Anlegen</button>
            </p>
        </fieldset>
    </form>
</div>

<div id="dialog_2" class="dialog" title="Dialog 2">
    <form id="formular_2" method="post" action="ajax/script2.php">   
        <input name="variable3" type="hidden">
        <fieldset>
            <p>
                <label for="variable4">Textfeld1</label>
                <input type="text" name="variable4" id="variable4" class="text ui-widget-content ui-corner-all" required>
            </p>
            <p>
                <label for="variable5">Textfeld2</label>
                <input type="text" name="variable5" id="variable5" class="text ui-widget-content ui-corner-all" required>
            </p>
            <p>
                <label for="variable6">Textfeld3</label>
                <input type="text" name="variable6" id="variable6" class="text ui-widget-content ui-corner-all"  required>
            </p>
            <p>
                <div id="ajaxMessage" class="red bold center"></div>
            </p>
            <p class="center">
                <button type="submit" class="ui-button ui-widget ui-corner-all">Ändern</button>
            </p>
        </fieldset>
    </form>
</div>

Die ausgelagerte JS-Scriptdatei sieht wie folgt für die Dialoge aus:

$(function() {

    $(".dialog").dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        draggable: false,
        close: function() {
            $("#ajaxMessage").empty();   
            $(".dialog").find('form')[0].reset();
        }
    });

    $("a.opener").click(function (event) {
        event.preventDefault();
        var id = $(this).data("id");
        $(id).dialog("open");
    });



$("form").submit(function(event) {
    // Das eigentliche Absenden verhindern
    event.preventDefault();
  
    // Das sendende Formular und die Metadaten bestimmen

    var form   = $("form").attr("id"); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
    var action = $("#" + form).attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
        method = $("#" + form).attr("method"),
        data   = $("#" + form).serialize(); // baut die Daten zu einem String nach dem Muster vorname=max&nachname=Müller&alter=42 ... zusammen
   
    // Der eigentliche AJAX Aufruf
    $.ajax({
        url : action,
        type : method,
        data : data
    }).done(function (data) {
        // Bei Erfolg
        $("#ajaxMessage").text(data);
        form[0].reset();
    }).fail(function() {
        // Bei Fehler
        $("#ajaxMessage").text("Es ist ein Fehler aufgetreten, die Anfrage konnte nicht verarbeitet werden!");
    });
});


});

Mein Problem ist jetzt, das der untere Teil des JS-Scriptes (Formularverarbeitung) nur das obere Formular verarbeitet, aber nicht das untere im 2ten Dialog. Ich habe das Script was ich aus dem Internet habe schon so umgebaut das es die eindeutige ID des Formulares ausliest und verwendet. Aber es funktioniert leider immer noch nicht.

Habt ihr eine Idee?

 

[Wutaler]

Ich konnte mein Problem selbst lösen, aber ich bedanke mich trotzdem bei den interessierten Lesern.

 

[SpiceLab]

Ich habe das Script was ich aus dem Internet habe schon so umgebaut das es die eindeutige ID des Formulares ausliest und verwendet. Aber es funktioniert leider immer noch nicht.

Habt ihr eine Idee?

id="ajaxMessage" / #ajaxMessage hast Du bei all Deinen Bemühungen, die IDs der zwei Dialoge u. Formulare eindeutig zu gestalten, übersehen, wodurch im Dokumentbaum trotz ihrer individuellen IDs das erste Formular herangenommen wird, in dem dieser ID-Bezeichner vorkommt. Alle nachfolgenden Formulare, in denen ebenfalls <div id="ajaxMessage"> steckt, werden vom Script ignoriert.

Und ein grundsätzlicher Tipp, weil nicht problemrelevant: <p> darf als Block-Element kein Kindelement gleichen Typs (Block-Element, hier <div id="ajaxMessage">) besitzen.

Zulässig ist reiner Text (plain text) und sogenannte Stil-Elemente (phrasing content), wie z.B. <b>,<br>,<button>,<code>,<img>,<input>,<span>, uvm.

[edit]Tipp-Ex[/edit]​