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

17

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

Я протестировал его на mac firefox и safari, а окна IE & amp; 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>

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

спасибо!

    
задан neil 23.10.2009 в 08:29
источник

5 ответов

32

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

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

Диалоговое окно JQuery UI с обратной записью кнопки ASP.NET

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

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

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

    
ответ дан krishna 23.10.2009 в 08:58
источник
  • Tricky! Я видел этот вопрос, но не закончил его читать, потому что я думал, что это специфичный для asp.net. возгласы. Благодаря!! –  neil 23.10.2009 в 09:23
  • Поскольку jQuery UI v1.10.0 вы можете сделать это напрямую, используя свойство appendTo - api.jqueryui.com/dialog/#option-appendTo –  David Laing 01.09.2013 в 15:10
  • Это глупо. JQuery должен сделать это проще. Спасибо за помощь. –  M H 15.08.2016 в 14:50
10

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

Ссылка

$("#dialog").dialog({
    appendTo: "form"
    ....
});
    
ответ дан Jecho Jekov 15.12.2013 в 01:17
источник
1

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

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

    
ответ дан Alex Sexton 23.10.2009 в 08:46
источник
0

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

ответ дан macl 19.03.2013 в 06:15
источник
0

У меня была та же проблема, и решение было (например, 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>
    
ответ дан Hugo Goyet 05.03.2015 в 06:08
источник