Вход внутри диалогового окна JQuery UI не отправляется?

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

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

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

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

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

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

спасибо!

Ответы

Ответ 1

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

Здесь решение для этого:

jQuery UI Dialog с обратной записью кнопки ASP.NET

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

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

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

Ответ 2

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

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

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

Ответ 3

Я уверен, что пользовательский интерфейс jQuery разбивает раздел диалога из его обычного места в 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 не должна находиться во всплывающем окне, вы можете переместить ее из формы и просто зафиксировать ее значение в событии отправки и добавить ее как скрытый элемент ввода, прежде чем что-либо будет отправлено.

Желаем удачи.

Ответ 4

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

Ответ 5

У меня была та же проблема, и решение было (например, user2100025) добавить "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>