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

jquery ui windows

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 y Firefox con los mismos resultados, así que no creo que sea el navegador, y los campos se publican correctamente si desactivo 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:

Diálogo jQuery UI con 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

En los navegadores compatibles con html5 (no IE, pero la versión más reciente de ff, chrome y safari lo admiten), puede establecer el atributo "formulario" en sus campos de entrada, y 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 3

Estoy bastante seguro de que la interfaz de usuario de 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 tu 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

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

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

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

Answer 5

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

Espero que sea 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>