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

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 - нет....

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

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

Любое решение?! Большое спасибо!

Источник

6 ответов

Решение

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

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

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

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

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

Ура!

Источник

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

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

Источник

Форма должна быть внутри 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>
Источник

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

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

Источник

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

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

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

Источник

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

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

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

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