jQuery Diálogo publicación de campos de formulario

Question

Estoy tratando de hacer una entrada de datos a través de un cuadro de diálogo modal jQuery. Esperaba usar algo como lo siguiente para recopilar mis datos y publicarlos.

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

Sin embargo, esto no resulta en nada. Si solo hago referencia al formulario que contiene myDialog, obtengo todos los campos de la página, excepto los que están en mi cuadro de diálogo.

¿Cuál es la mejor forma de reunir campos de formulario dentro de un cuadro de diálogo para un envío de AJAX?

Answer 1

La razón por la que esto sucede es porque dialog está realmente eliminando sus elementos y agregándolos en el nivel raíz en el cuerpo del documento. Esto se hace para que el script de diálogo pueda confiar en su posicionamiento (para asegurarse de que los datos que se dialogan no están contenidos, por ejemplo, en un elemento relativamente posicionado). Esto significa que sus campos son de hecho que ya no contienen en su formulario.

Usted todavía puede obtener sus valores a través de acceder a los campos individuales por ID (o algo parecido), pero si desea utilizar una función útil serialize, vas a necesitar tener una forma dentro del cuadro de diálogo .

Answer 2

Acabo de encontrar exactamente el mismo problema y como tenía demasiados campos en el cuadro de diálogo para hacer referencia a ellos individualmente, lo que hice fue envolver el diálogo en una forma temporal, serializarlo y anexar el resultado a mi original datos serializados del formulario antes de hacer la llamada 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

El elemento del formulario dentro del cuadro de diálogo se elimina del formulario y se mueve al final del cuerpo. Necesitas algo como esto.

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

Esto funciona como encanto