JQuery-Mobile: how to reload / refresh inner page

Question

I have 2 pages (e.g. page_1 and page_2) on the container page (e.g. page.html). On the first page I have only one button, if you click on it, then it will go to the second page. you return from the second page to the first page and press the button again to go to the second page at this time when I want to reload / refresh the page. I tried, but I do not get, please, can someone help me.

Here is the code:

<div data-role="page" id="page_1" > <div data-role="content" id="contentlogin"> <a href="#" onclick="refresh();" data-role="button" id="login">Navigation</a> </div> </div> <div data-role="page" id="page_2" > <div data-role="content" id="contentlogin"> //Some Form elements are there </div> </div> <script type="text/javascript"> function refresh() { $.mobile.changePage($("#page_2"), {transition: "pop",reloadPage: true}); } </script> 

thanks

Answer 1

You can try something like this:

• http://jsfiddle.net/sJdfy/4/

Js

 $('#page_3').live('pageshow',function(event, ui) { // refresh specific element $('#refresh').val(''); }); $('#page_2').live('pageshow',function(event, ui) { // refresh all elements var allInputs = $(':input'); allInputs.val(''); }); 

HTML

 <div data-role="page" id="page_1" > <div data-role="content" name="contentlogin"> <a href="#page_2" data-role="button" id="login">Navigate to page 2</a> <a href="#page_3" data-role="button">Navigate to page 3</a> Yeah Page 1 </div> </div> <div data-role="page" id="page_2" > <div data-role="content" name="contentlogin"> <a href="#page_1" data-role="button">Navigate to page 1</a> <!-- Some Form elements are there --> Hello we are on Page 2<br />Refresh All Elements<br /><br /> <label for="basic1">Text Input 1 (Refresh):</label> <input type="text" name="name1" id="basic1" value="" /> <label for="refresh1">Text Input 2 (Refresh):</label> <input type="text" name="name21" id="refresh1" value="" /> <br /> Enter in some values, Navigate to Page 1 and back to Page 2 </div> </div> <div data-role="page" id="page_3" > <div data-role="content" name="contentlogin"> <a href="#page_1" data-role="button">Navigate to page 1</a> <!-- Some Form elements are there --> Hello we are on Page 3<br />Refresh Specific Elements<br /><br /> <label for="basic">Text Input 1:</label> <input type="text" name="name" id="basic" value="" /> <label for="refresh">Text Input 2 (Refresh):</label> <input type="text" name="name2" id="refresh" value="" /> <br /> Enter in some values, Navigate to Page 1 and back to Page 3 </div> </div>