¿La entrada dentro de Jquery UI Dialog no está siendo enviada?

Question

Los campos de entrada en mi cuadro de diálogo no se están publicando, y no estoy seguro de por qué ...

Lo he probado en Mac Firefox y Safari, y en Windows IE & amp; Firefox con los mismos resultados, así que no creo que sea el navegador, y los campos se publican correctamente si deshabilito el cuadro de diálogo.

He releído los documentos de la interfaz de usuario de jquery y no puedo encontrar lo que estoy haciendo mal ... Parece poco probable que el cuadro de diálogo no admita la entrada.

Aquí hay una versión condensada del código que estoy usando:

<script type="text/javascript">
 $(document).ready(function(){
  $("#dialog").dialog({
   autoOpen: false,
   buttons: {
    "OK": function() {
     $(this).dialog('close');
    }
   }
  });
  $("#publishSettings").click(function(){
   $("#dialog").dialog('open');
  });
 });
</script>

<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
 <div id="dialog">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 </div>
 <input type="submit" name="pubArticle" value="Publish">
</form>

Nada fuera de lo común, ¿verdad? ¿Por qué esto no funciona para mí?

gracias!

Answer 1

Cuando JQuery abre el cuadro de diálogo, lo mueve fuera del formulario.

Aquí está la solución para eso:

jQuery UI Dialog con botón de devolución de botón de ASP.NET

básicamente en tu caso:

var dlg =  $("#dialog").dialog({ 
   autoOpen: false, 
   buttons: { 
    "OK": function() { 
     $(this).dialog('close'); 
    } 
   } 
  }); 
dlg.parent().appendTo($("#yourformId")); 

debería arreglarlo.

Answer 2

Sé que esta es una pregunta antigua, pero para cualquier persona que tenga el mismo problema, existe una solución más nueva y simple: un " appendTo " La opción se ha introducido en jQuery UI 1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});

Answer 3

Estoy bastante seguro de que la interfaz de usuario jQuery rompe la sección de diálogo desde su lugar normal en el dom y luego la mueve a un lugar diferente. Eso sacaría su elemento de entrada del elemento padre de formulario. No puede enviar un formulario sin un elemento de formulario, por eso falla.

Sugeriría reescribir el html como:

<div id="dialog">
<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 <input type="submit" name="pubArticle" value="Publish">
</form>
</div>

Si el botón publishSettings no tiene que estar en la ventana emergente, puede moverlo fuera del formulario y simplemente capturar su valor en el evento de envío y agregarlo como un elemento de entrada oculto antes de que se envíe algo.

La mejor de las suertes.

Answer 4

En los navegadores compatibles con html5 (no IE, pero la versión más reciente de ff, chrome y safari lo admiten), puede configurar el formulario " " atributo en sus campos de entrada, y al hacerlo le permite colocarlos donde desee. También sufrí este problema y me tomé un tiempo para averiguar por qué, por ejemplo, no enviaba entradas de diálogo.

Answer 5

Tuve el mismo problema y la solución fue (como dijo user2100025) agregar el " appendTo = '#yourform', " en su codigo Aquí mi código y está funcionando bien.

Espero que hola a alguien :)

<script>
    $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      resizable: false,
      modal: true,
      appendTo: '#myform',
      buttons: {
        "Yes"function() {
            $( '#myform' ).submit();
        },
        'No' function() {
            $(this).dialog('close');
        }
      }
    });

    $( "#button" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>