Вход в Jquery UI Dialog не отправляется?

Question

Поля ввода в моем диалоговом окне не публикуются, и я не уверен, почему ...

Я протестировал его на Mac Firefox и Safari, а также на Windows IE и Firefox с теми же результатами, так что я не думаю, что это браузер, и поля будут опубликованы нормально, если я отключу диалоговое окно.

Я перечитал документы jquery ui и не могу найти, что я делаю неправильно ... Кажется маловероятным, что диалоговое окно не будет поддерживать ввод.

Вот сокращенная версия кода, который я использую:

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

Ничего необычного, верно? Почему это не работает для меня!?

спасибо!

Answer 1

Когда JQuery открывает диалоговое окно, оно перемещает его за пределы формы.

Вот решение для этого:

jQuery UI Dialog с обратной передачей кнопки ASP.NET

в основном в вашем случае:

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

должен это исправить.

Answer 2

Я знаю, что это старый вопрос, но для тех, у кого такая же проблема, есть более новое и более простое решение: в jQuery UI 1.10.0

была введена опция "appendTo"

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

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

Answer 3

Я почти уверен, что jQuery UI вырывает раздел Dialog из обычного места в dom, а затем перемещает его в другое место. Это вывело бы ваш элемент ввода из родительского элемента формы. Вы не можете отправить форму без элемента формы, поэтому она не работает.

Я бы предложил переписать HTML как:

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

Если кнопка publishSettings не должна быть во всплывающем окне, вы можете переместить ее из формы и просто зафиксировать ее значение в событии submit и добавить в качестве скрытого элемента ввода, прежде чем что-либо будет отправлено.

Удачи.

Answer 4

У меня была та же проблема, и решение было (как сказал пользователь 2100025) добавить "appendTo = '#yourform'" в ваш код. Вот мой код и он работает нормально.

Надеюсь, это кто-то привет :)

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

Answer 5

В html5-совместимых браузерах (не в IE, но в последних версиях ff, chrome и safari его поддерживают) вы можете установить атрибут «form» в своих полях ввода, что позволит вам размещать их где угодно. Я тоже столкнулся с этой проблемой и занял некоторое время, чтобы выяснить, почему, например, не отправлял диалоги.