Okno modalne jQuery usuwa elementy z mojego formularza

Question

jQuery, gdy używam go do utworzenia okna modalnego, które zawiera elemety formularzy, , usuwa te elementy po wysłaniu formularza.

przykład w postaci:

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

exaple JS:

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

Więc co ja nocited podczas inspetion pośrednictwem Firebug, że jquery faktycznie usuwa moje elementy formularza w terminie #add_photo i umieszcza je poza formularzem w DOM, więc nawet trudne w html modalne okno dialogowe jest w mojej formie, w DOM to nie jest ....

To jest powód, dla którego mam problem!

Czy ktoś napotkał podobny problem?

Jakieś rozwiązanie ?! Dziękuję Ci bardzo!

Answer 1

Po prostu miałem ten sam problem. Rozwiązałem go przez dodanie kolejnego

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

na końcu (ale w środku) z formularza, a następnie trzeba dodać to do jQuery:

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

To będzie upewnić się, że przed formą jest złożyć Twój div dialogowy zostanie umieszczony pomiędzy znacznikami formularza. Dzięki arnorhs doszedłem do tego rozwiązania.

Pozdrawiam!

Answer 2

Formularz musi znajdować się wewnątrz elementu div. Tak właśnie jest we wszystkich przykładach Dialogu. Nie wiesz, jak to zrobić, ponieważ dane wejściowe tytułu i adresu URL nie są wyświetlane w oknie dialogowym. Nie możesz ich też na nich włożyć?

ten nie miałby problemu:

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

Nie jestem pewien, co pole dialogowe wtyczki używasz, ale podejrzewam, że plugin okno ciągnie DIV z formularza i umieszczenie go w treści strony, dzięki czemu może przynieść pole przed stroną, poza elementem formularza.

Aby zmienić definicję, aby wtyczka okna dialogowego wyświetliła okno dialogowe przed całą treścią na stronie, musi zostać usunięta z dowolnego elementu, w którym się znajduje, bez względu na to, czy jest to formularz czy coś jeszcze.

Answer 4

This article opisano, jak rozwiązać swój problem:

Zobaczysz, że zawartość mieliśmy w połowie trwania naszej stronie została oznaczona za pomocą dodatkowych klas i, co najważniejsze, umieszczony w dolnej części strona bezpośrednio przed tagiem zamykającym. Dlaczego to jest ważne? Ponieważ oznacza to również, że wszystkie kontrolki ASP.Net, które umieścisz w tym oknie dialogowym, pojawią się również na dole strony, poza tagiem strony. Oznacza to, że nie będziesz w stanie uzyskać do nich kontaktu po odświeżeniu.

Jakie jest rozwiązanie?Cóż, istnieją dwie możliwości:

1. przesuwać elementy z powrotem do formy, i ręcznie złożyć po kliknięciu przycisku
2. Clone elementy podczas tworzenia okna dialogowego, a następnie sklonować wartości z powrotem, spust kliknij oryginalny przycisk (lub, jeśli masz tylko jedną lub dwie wartości do przesłania, po prostu przypisz te wartości do kontrolki pola ukrytego ASP.Net).

Answer 5

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

przywiązać do postaci wykonując $("mydialog").parent().appendTo($("form:first")).

Zauważ, że masz na to wezwanie po już nazwie $("mydialog").dialog()

Answer 6

Jak widać w odpowiedzi na this question, dialogowego jQuery ma pole appendTo, które mogą być używane do konfiguracji, gdzie umieścić swoje okno (div mądry) przy inicjalizacji.

Wygląda na to, że jest to najmniej obrażająca ninja wersja rozwiązania tego problemu.