I have 2 pages(i.e., page_1 and page_2) in the container page(i.e., page.html).In the first page i have only one button if you click on that then it will navigates to the second page.when you e back from the second page to First page and once again click on the button for navigating to the second page at this time i want to reload/refresh the page. i tried but i am not getting please can anybody help me.

Here 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

I have 2 pages(i.e., page_1 and page_2) in the container page(i.e., page.html).In the first page i have only one button if you click on that then it will navigates to the second page.when you e back from the second page to First page and once again click on the button for navigating to the second page at this time i want to reload/refresh the page. i tried but i am not getting please can anybody help me.

Here 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

• javascript
• jquery
• jquery-mobile

1 Answer 1

You could try something like this:

• http://jsfiddle/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>