Модальное окно jQuery удаляет элементы из моей формы

Question

jQuery, когда я использую его для создания модального окна, которое содержит элементы формы, эти элементы вынимаются при отправке формы.

пример формы:

<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 

    <label for="article_title" class="required">Title:</label> 

    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">Url:</label> 

    <input class="formfield" id="url" name="url" value="" type="text"> 

    <div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content"  title="Add Photo"> 
        <label for="photo_title" class="optional">Photo title:</label> 
        <input class="formfield" id="photo_title" name="photo_title" value="" type="text">
        <label for="photot" class="optional">Photo thumb:</label> 
        <input type="file" name="photot" id="photot" class="formfield">
        <label for="photo_checkbox" class="optional">Include lighbox?</label> 
        <input name="photo_checkbox" value="0" type="hidden"> 
        <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> 
        <label for="photo_big" class="optional">Photo:</label> 
        <input type="file" name="photo_big" id="photo_big" class="formfield"> 
    </div>
</form>

пример JS:

<script>
$(document).ready(function(){
    $("#add_photo").dialog({
        autoOpen: false,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

Итак, что я просил во время проверки через firebug, так это то, что jquery фактически удаляет мои элементы формы в #add_photo и помещает их вне формы в DOM, так что даже в html модальный диалог находится внутри моей формы, в DOM это т ....

Это причина, по которой у меня проблема!

Кто-нибудь сталкивался с подобной проблемой?

Есть решение ?! Большое спасибо!

Answer 1

У меня просто была такая же проблема. Я решил это, добавив еще один

<div id="beforesubmit" style="display:none"></div> 

в конце (но внутри) формы, а затем вы должны добавить это в jQuery:

$("form").submit(function() {
    $("#add_photo").prependTo("#beforesubmit");
});

Это гарантирует, что перед отправкой формы ваш диалог div будет помещен обратно между тегами формы. Благодаря arnorhs я пришел к этому решению.

Ура!

Answer 2

Я не уверен, какой плагин диалогового окна вы используете, но я подозреваю, что плагин диалогового окна вытягивает DIV из формы и помещает его в тело страницы, чтобы он мог принести окно перед страницей, за пределами элемента формы.

Таким образом, чтобы перефразировать, чтобы плагин диалогового окна заставлял ваш диалог появляться перед всем содержимым вашей страницы, он должен удалить его из любого элемента, в котором он находится, независимо от того, является ли он формой или чем-то еще еще.

Answer 3

Форма должна быть внутри div. Так обстоит дело во всех примерах диалога. Не уверен, как вы собираетесь это сделать, если заголовок и URL-адреса не находятся в диалоге. Не могли бы вы тоже надеть их?

Это не будет проблемой:

<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content"  title="Add Photo"> 
  <form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 
    <label for="article_title" class="required">Title:</label> 
    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">Url:</label> 
    <input class="formfield" id="url" name="url" value="" type="text"> 

    <label for="photo_title" class="optional">Photo title:</label> 
    <input class="formfield" id="photo_title" name="photo_title" value="" type="text">
    <label for="photot" class="optional">Photo thumb:</label> 
    <input type="file" name="photot" id="photot" class="formfield">
    <label for="photo_checkbox" class="optional">Include lighbox?</label> 
    <input name="photo_checkbox" value="0" type="hidden"> 
    <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> 
    <label for="photo_big" class="optional">Photo:</label> 
    <input type="file" name="photo_big" id="photo_big" class="formfield"> 
  </form>
</div>

Answer 4

Как видно в ответе на на этот вопрос , в диалоговом окне jQuery есть поле appendTo, которое можно использовать для настройки места размещения вашего диалога (в двух направлениях) при инициализации.

Похоже, что это наименее обходной вариант для ниндзя для решения проблемы.

Answer 5

С http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/

Свяжите это с формой, выполнив $("mydialog").parent().appendTo($("form:first")).

Обратите внимание, что вы должны позвонить после того, как вы уже позвонили $("mydialog").dialog()

Answer 6

Эта статья описывает, как решить вашу проблему:

Вы увидите, что контент, который мы имели в середине нашей страницы, был размечен дополнительными классами и, что наиболее важно, размещен в нижней части страницы непосредственно перед закрывающим тегом. Почему это важно? Потому что это также означает, что любые элементы управления ASP.Net, которые вы размещаете в этом диалоговом окне, также будут отображаться в нижней части страницы вне тега страницы. Это означает, что вы не сможете получить ручку при обратной передаче.

Какое решение? Ну, есть два варианта:

1. Переместить элементы обратно в форму и отправить вручную при нажатии кнопки
2. Клонируйте элементы при создании диалогового окна, затем клонируйте значения назад, нажмите триггер на исходную кнопку (или, если у вас есть только одно или два значения для обратной отправки, просто присвойте значения скрытому полю ASP.Net контроль).