jquery mobile 1.3 popups navigate back too far on form submission

jquery mobile 1.3 popups navigate back too far on form submission

  1. I have a multi-page JQM site.  So, the user logs in on the home page which takes him/her to Page2.  On Page 2 the user's data is displayed.  If they want to update the data, they click on a button next to the data item which then pulls up a JQM Popup.  Simple.  After entering the data on the Popup "page" the user clicks on a "submit" key which calls a JavaScript function to update the user's records.  Problem is that User is taken all the way back to the login page !!   I need them to return to PAGE 2 where the updated data is displayed.  I've tried using

$('#page2Popup').popup("close");
I also tried just copying and using the JQM sample popup from
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/
still takes me all the way back.

Awesome if someone could give me some pointers !!!!

OK...   I copied the JQM code right off the JQM site above.  I replicated the problem using JQM standard code.  I copied above code into a 2 page simple JQM site, put the above code on the 2nd page.  Click on the "FORM" popup, hit "Sign IN" and you are taken    ALL THE WAY BACK     to "PAGE 1".    NOW, try it using the "DIALOG" Popup.  You sTay on the same page!!!!

Here's the CODE>>>


  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>


    <div data-role="page" id="page">
        <div data-role="header">
            <h1>Page One</h1>
        </div>
        <div data-role="content">   
            <ul data-role="listview">
                <li><a href="#page2">Page Two</a></li>
                <li><a href="#page3">Page Three</a></li>
                <li><a href="#page4">Page Four</a></li>
            </ul>       
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>



    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Page Two</h1>
        </div>
        <div data-role="content">   
            Content   
           
            <br>
            <br>
               <a href="#page2Popup" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Form SRM</a>
           


    <!--
        <div data-role="page" class="type-interior">

            <div data-role="header" data-theme="f">
            <h1>Popup</h1>
            <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
            <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
        </div><!-- /header -->
    -->
        <div data-role="content" class="ui-body">
            <div class="content-primary">

                <h2>Popup</h2>

                <ul data-role="controlgroup" data-type="horizontal" class="localnav">
                    <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
                    <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
                    <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
                    <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
                </ul>

                <p>Toet.</p>

    <pre><code>
    &lt;a href=&quot;#popupBasic&quot; <strong>data-rel=&quot;popup&quot;</strong>&gt;Open Popup&lt;/a&gt;

    &lt;div <strong>data-role=&quot;popup&quot;</strong> id=&quot;popupBasic&quot;&gt;
        &lt;p&gt;This is a completely basic popup, no options set.&lt;p&gt;
    &lt;/div&gt;
    </code></pre>

            <p>This will result in the following popup:</p>
            <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">Open Popup</a>
           
            <div data-role="popup" id="popupBasic">
                <p>This is a completely basic popup, no options set.</p>
            </div>

            <p>Thely).</p>
           
            <p>Thvia <a href="options.html">options</a>).</p>

            <p>Thps:</p>
           
            <a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">Tooltip</a>
            <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true">Menu</a>
            <a href="#popupNested" data-rel="popup" data-role="button" data-inline="true">Nested menu</a>
            <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true">Form</a>
            <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop">Dialog</a>
            <a href="#popupPhoto" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">Photo</a>
           
            <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
              <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
            </div>

            <div data-role="popup" id="popupMenu" data-theme="a">
                    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
                        <li data-role="divider" data-theme="a">Popup API</li>
                        <li><a href="options.html">Options</a></li>
                        <li><a href="methods.html">Methods</a></li>
                        <li><a href="events.html">Events</a></li>
                    </ul>
            </div>


            <div data-role="popup" id="popupNested" data-theme="none">
                <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">

                </div><!-- /collapsible set -->
            </div><!-- /popup -->
           

            <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
                <form>
                    <div style="padding:10px 20px;">
                      <h3>Please sign in</h3>
                      <label for="un" class="ui-hidden-accessible">Username:</label>
                      <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />

                      <label for="pw" class="ui-hidden-accessible">Password:</label>
                      <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />

                      <button type="submit" data-theme="b">Sign in</button>
                    </div>
                </form>
            </div>
           
            <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                    <h1>Delete Page?</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                    <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                    <p>This action cannot be undone.</p>
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>   
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 
                </div>
            </div>




     <br>
               
        </div>
        <div data-role="footer">
            <h4>Page2 Footer </h4>
        </div>
    </div>

    </body>
    </html>