Formular zur Arbeit mit jQuery Mobile Popups

Question

So habe ich ein Projekt, an dem ich arbeite, wo gibt es eine form, die meine gesamte data-role="content" Abschnitt auf meiner Seite einnimmt. Ich habe eine input innerhalb des Inhaltsbereichs. Ich habe auch ein jQuery Mobile-Popup mit einem input in meinem Content-Bereich. Ich versuche, ein Formular zu verwenden, um die Daten von der Eingabe im Inhaltsabschnitt und der Eingabe aus dem Popup zu sammeln.

Das rohe HTML sieht korrekt aus, bis das DOM geladen wird, und dann merke ich, dass jQuery Mobile das Popup außerhalb des Inhaltsbereichs bewegt. Dies macht es so, wenn ich das Formular absende, wird die Eingabe in meinem Popup nicht zusammen mit der Post-Anfrage gesendet. Es sendet nur die Eingabedaten von der ersten Eingabe in meinem Inhaltsabschnitt.

Ich habe ein paar mögliche Fixes gesehen, aber sie scheinen nicht mit dem jQuery Mobile Panel zu funktionieren, das ich in meinem Beispiel habe.

Hat jemand schon einmal in diese Situation geraten? Gibt es eine Arbeit?

Hier ist mein Code und ein etwas Arbeits Beispiel:

JSfiddle (konnte nicht herausfinden, wie die Daten auf JSfiddle schreiben)

<div data-role="page" id="page1"> 

<div data-role="panel" id="mypanel" data-display="reveal" data-position="right"> 
    <form action="index.php" method="get" data-ajax='false'> 
     <label for="filter1">filter1:</label> 
     <input type="text" name="filter1"/> 
     <input type="submit" value="Search"> 
    </form> 
</div><!-- end panel -->  

<div data-role="header"> 
    <h1>Sample Title</h1> 
    <a href="#mypanel" id="#togglePanel" data-role="button" data-inline="true" class="ui-btn-right">Filter Results</a> 
</div><!-- end header --> 

<div data-role="content"> 

<div id='submitResult'></div> <!-- results will show here but only captures the data from val1 --> 

<form id='test'> 

    <label for="val1">Value 1:</label> 
    <input type="text" name="val1"/> 


    <a href="#popup" data-rel="popup" data-role="button" data-inline="true">Show Popup</a> 

    <div data-role='popup' id='popup' data-history='false'>   
     <label for="val2">Value 2:</label> 
     <input type="text" name="val2"/> 
     <input id='sendNow' type='submit' value='Submit'/> 

     <div id='submitResult'></div> <!-- results will not show here at all --> 
    </div><!-- end popup --> 

</form> 

</div><!-- end content --> 

<div data-role="footer"> 

</div><!-- end footer --> 
</div><!-- end page --> 

Answer 1

es Figured für alle aus, die sich über dieses Problem kommen könnte. Als ich meine Daten serialisierte, musste ich nur die einzelnen Eingaben im Popup serialisieren, anstatt das ganze Formular zu serialisieren. Das ist, weil egal, was ich versuche, das Framework scheint alle <form> Tags zu entfernen, die ich in meinem Popup einlege.

wie folgt:

$.post('processVal1andVal2.php', $('#test, input[name='val2']').serialize(), function(data) {