Entrada dentro do diálogo JQuery UI não está sendo enviado?

Question

Os campos de entrada na minha caixa de diálogo não estão sendo postados, e não sei por que ...

Eu o testei no Mac Firefox e Safari, e o Windows IE & Firefox com os mesmos resultados, então não acho que seja o navegador, e os campos postarem bem se eu desativar a caixa de diálogo.

Reli os documentos da interface do usuário do jQuery e não consigo encontrar o que estou fazendo de errado ... parece improvável que a caixa de diálogo não suportasse a entrada.

Aqui está uma versão condensada do código que estou 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 fora do comum, certo? Por que isso não funciona para mim!?

obrigado!

Answer 1

Quando o jQuery abre a caixa de diálogo, ele a move para fora do formulário.

Aqui está a solução para isso:

JQuery UI Dialog with asp.net Button postback

Basicamente, no seu caso:

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

deve consertar isso.

Answer 2

Eu sei que essa é uma pergunta antiga, mas para quem tem o mesmo problema, existe uma solução mais nova e simples: uma opção "Appendto" foi introduzida na JQuery UI 1.10.0

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

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

Answer 3

Tenho certeza de que o JQuery UI divide a seção de diálogo de seu lugar normal no DOM e depois o move para um lugar diferente. Isso retiraria seu elemento de entrada do elemento pai do formulário. Você não pode enviar um formulário sem um elemento de formulário, é por isso que falha.

Eu sugeriria reescrever o 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>

Se o botão PublishSettings não precisar estar no pop -up, você poderá movê -lo para fora do formulário e apenas capturar seu valor no evento de envio e adicioná -lo como um elemento de entrada oculto antes que qualquer coisa seja submetida.

Boa sorte.

Answer 4

Nos navegadores compatíveis com HTML5 (não é o mais recente FF, Chrome e Safari), você pode definir o atributo "formulário" em seus campos de entrada e, faz isso, permite colocá -los onde quiser. Também sofri esse problema e levei algum tempo para descobrir por que o IE não enviou entradas de diálogo.

Answer 5

Eu tive o mesmo problema e a solução foi (como o usuário2100025 disse) para adicionar o "appendto = '#yourform'" no seu código. Aqui meu código e está funcionando bem.

Espero que seja alguém :)

<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>