jQuery Dialog Buchung von Formularfeldern

Question

Ich versuche, einige Dateneingabe über eine jQuery modalen Dialog zu tun. Ich hatte gehofft, etwas wie das Folgende zu verwenden, um meine Daten zum Posten zu sammeln.

data = $('#myDialog').serialize(); 

Allerdings ergibt dies nichts. Wenn ich stattdessen nur das umschließende Formular referenziere, bekomme ich alle Felder auf der Seite außer denen in meinem Dialog.

Was ist der beste Weg, Formularfelder in einem Dialog für eine AJAX-Einreichung zu sammeln?

Answer 1

Der Grund dafür ist, dass dialog Ihre Elemente tatsächlich entfernt und sie auf der Stammebene im Dokumenttextkörper hinzufügt. Dies geschieht, damit das Dialog-Skript sicher positioniert werden kann (um sicher zu sein, dass die Daten, die in Dialogform gebracht werden, nicht enthalten sind, z. B. in einem relativ positionierten Element). Das bedeutet, dass Ihre Felder in Wirklichkeit in Ihrem Formular nicht mehr enthalten sind.

Sie können immer noch ihre Werte durch den Zugriff auf die einzelnen Felder durch ID (oder etwas Vergleichbares), aber wenn Sie eine handliche serialize Funktion nutzen möchten, Sie gehen ein Formular innerhalb der Dialog zu haben brauchen .

Answer 2

Ich habe gerade in genau das gleiche Problem gerannt und da ich zu viele Felder in meinem Dialog hatte, um sie einzeln zu referenzieren, was ich getan habe, wickelte den Dialog in ein temporäres Formular, serialisiert es und hängt das Ergebnis an mein Original an Die serialisierten Daten des Formulars vor dem Ajax-Aufruf:

function getDialogData(dialogId) { 
    var tempForm = document.createElement("form"); 
    tempForm.id = "tempForm"; 
    tempForm.innerHTML = $(dialogId).html(); 
    document.appendChild(tempForm); 
    var dialogData = $("#tempForm").serialize(); 
    document.removeChild(tempForm); 
    return dialogData; 
} 

function submitForm() { 
    var data = $("#MyForm").serialize(); 
    var dialogData = getDialogData("#MyDialog"); 
    data += "&" + dialogData; 
    $.ajax({ 
     url: "MyPage.aspx", 
     type: "POST", 
     data: data, 
     dataType: "html", 
     success: function(html) { 
      MyCallback(html); 
     } 
    }); 
} 

Answer 3

Formularelement im Dialogfeld wird aus Formular entfernt und an das Ende des Körpers verschoben. Du brauchst so etwas.

$("#dialog_id").dialog().parent().appendTo($("#form_id")); 

Answer 4

jQuery("#test").dialog({ 
      autoResize:true, 
      width:500, 
      height:600, 
      modal: true, 
      bgiframe: true, 
      }).parent().appendTo("form"); 

Dies funktioniert wie Charme