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):
Die ausgelagerte JS-Scriptdatei sieht wie folgt für die Dialoge aus:
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?
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):
HTML:
<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:
Code:
$(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?