Jquery-Mobile：如何重新加载/刷新内部页面 [英] Jquery-Mobile: How to reload/refresh the internal page

问题描述

我在容器页面（即page.html）中有2个页面（即page_1和page_2）。在第一页中，如果单击它，我只有一个按钮，那么它将导航到第二页。你从第二页回到第一页，然后再次单击导航到第二页的按钮，我想重新加载/刷新页面。我试过但我没有得到，请有人帮助我。

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 come 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.

这里代码：

  <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>

谢谢

推荐答案

您可以尝试这样的事情：

You could try something like this:

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

• 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>

这篇关于Jquery-Mobile：如何重新加载/刷新内部页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！