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

Question

полей ввода в моем окне не быть в курсе, и я не знаю, почему ...

я опробовали его на макинтош светлячок и сафари, а также окна 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> 

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

спасибо!

Answer 1

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

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

jQuery UI Dialog with ASP.NET button postback

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

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

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

Answer 2

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

Удачи.

Answer 3

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

Answer 4

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

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

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

Answer 5

У меня была такая же проблема, и решение было (например, user2100025) добавить «appendTo = '#yourform» в ваш код. Здесь мой код, и он работает нормально.

Я надеюсь, что кто-то HELO :)

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