jQuery Registrazione nella finestra dei campi modulo

Question

Sto provando a eseguire l'immissione di dati tramite una finestra di dialogo modale jQuery. Speravo di utilizzare qualcosa di simile al seguente per raccogliere i miei dati per la pubblicazione.

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

Tuttavia, questo non produce nulla. Se faccio riferimento solo al modulo contenente myDialog, ottengo quindi tutti i campi della pagina tranne quelli all'interno della mia finestra di dialogo.

Qual è il modo migliore per raccogliere i campi modulo all'interno di una finestra di dialogo per un invio AJAX?

Answer 1

Il motivo è che dialog rimuove i tuoi elementi e li aggiunge a livello di root nel corpo del documento. Questo è fatto in modo che lo script di dialogo possa essere sicuro del suo posizionamento (per essere sicuro che i dati che sono dialog'd non siano contenuti, ad esempio, in un elemento relativamente posizionato). Ciò significa che i tuoi campi sono in realtà non più contenuti nel modulo.

È ancora possibile ottenere i loro valori attraverso l'accesso ai singoli campi da id (o qualcosa di simile), ma se si desidera utilizzare una comoda funzione di serialize, si sta andando ad avere bisogno di avere una forma all'interno finestra .

Answer 2

Ho appena incontrato esattamente lo stesso problema e poiché avevo troppi campi nel mio dialogo per fare riferimento a loro individualmente, ciò che ho fatto è stato avvolgere il dialogo in una forma temporanea, serializzarlo e aggiungere il risultato al mio originale dati serializzati del modulo prima di effettuare la chiamata ajax:

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

L'elemento modulo all'interno del dialogo viene rimosso dalla forma e spostato alla fine del corpo. Hai bisogno di qualcosa del genere.

$("#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"); 

Questo funziona come fascino