CODEWITHSUNDEEP
ajaxjqueryjquery-mobile
xiederong
xiederong

Reputation: 1

javascript could not work when refresh page

I am using the jqm Ajax method to get data from servers , but when change to page2 from page1 and click Refresh , it won't be updated again . The only solution is to exit the browser and reopen it and go to the website again .Anyone can help me?

Here is the code:

Page1:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page1</title>
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.0.css">
        <link rel="stylesheet" href="_assets/css/jqm-demos.css">
        <link rel="stylesheet" href="_assets/css/wechat-mobile-custom.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="js/jquery.params.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",//get data from servers
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                var itemId = item.id;
                                $("#list1").append('<li><a href="page2.html?id='+itemId+'"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list1").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });

            $(document).on("pagebeforeshow","#page2",function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                $("#list2").append('<li><a href="#"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list2").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });
            </script>
    </head>

    <body>

        <div data-role="page" id="page1">
            <div data-role="content" >
                <ul data-role="listview" id="list1"></ul>
            </div>
        </div>

    </body>
  </html>

Page2:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page2</title>
</head>

<body>
        <div data-role="page" id="page2">
        <div data-role="content" >
            <ul data-role="listview" id="list2"></ul>
        </div>
        <script type="text/javascript">
        </script>
    </div>

</body>
</html>

Upvotes: 0

Views: 772

Answers (1)

kennypu
kennypu

Reputation: 6051

from the jQuery Mobile docs:

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

so change your $(document).ready() to $(document).bind('pageinit') and it should work.

Upvotes: 1

Related Questions