calling $.mobile.changePage inside the success function of a $.post() isnt changing the page correctly

calling $.mobile.changePage inside the success function of a $.post() isnt changing the page correctly

edit2: I sort of fixed it by having index.php immediately redirect to main.php   Then $.mobile.changePage("main.php") redirects fine, and all the links are working now, but the url is main.php#main.php ... there has to be a better way?



edit: I thought maybe this had something to do with the location hash, so I tried just calling $.mobile.changePage("index"), $.mobile.changePage("#index"), and $.mobile.changePage($("#index")) to go back to the initial index page, which has a data-url of "index", but no luck so far.... it either gives the Error Loading Page, or keeps the #email_results hash in the URL.





I have an online test where after results are calculated, you can choose to email the results to someone.

The form for filling in email details is at email.php, and the code to actually send the email is located in send_mail.php, which is just a php script that I dont actually want to show - just post some data to. After the data is posted and the script emails out the info, I want to change the page back to the index.

It sort of works, in that it does go back to the index. However, the URL never changes from http://localhost/#email_results.  So, from the index page, none of the links work any more.

Am I missing something simple? (possible)

Here are some code snippets of the related pages:


email.php:
  1. <div data-role="page" data-theme="b" data-url="email_results">
           
            <div data-role="header">
                <h1>Email Results</h1>
            </div><!-- /header -->
            <div data-role="content">
                <form id="email_results_form">
                    <div data-role="fieldcontain">
                        <label for="to_address">To:</label>
                        <input type="text" name="to_address" id="to_address" />
                    </div>

            </div>
    </div>













script.js
  1. $("form#email_results_form").live('submit', function(){
            $.post('send_email.php', $(this).serialize(), function(){
                $.mobile.changePage('index.php','slide',false,false);
            });
            return false;
        });






index.php
  1. <div data-role="page" data-theme="b" data-url="index">
            <div data-role="header" data-backbtn="false">
                <h1>Geriatric Assessment</h1>
            </div><!-- /header -->
           
           
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">Foo</li>
                    <li><a href="foo.php">Bar</a></li>
                </ul>
            </div>
       
        </div>