CODEWITHSUNDEEP
jquery-mobile
user3639745
user3639745

Reputation: 51

jQuery mobile change page does not reload page

I'm using JQM 1.4.2 and have this JS:

$.mobile.changePage( "page.html", { reloadPage: true} );

and it works fine. Problem is, this will be deprecated in 1.5.0 now I try to use this:

$.mobile.pageContainer.pagecontainer("change", "page.html", { reload:true } );

and it does not work (page is not reloaded). How to force page to reload? Thank you.

Upvotes: 5

Views: 2971

Answers (1)

Gajotres
Gajotres

Reputation: 57309

First are you sure you are using correct jQuery Mobile 1.4 version? Beta versions of jQuery Mobile 1.4 didn't have pagecontainer widget.

This functionality works just fine.

I even made you a working example:

HTML1 - index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo 1</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
        <script>
            $(document).on('pageinit', '#index', function(){ 
                $(document).on('click', '#changePage', function(){ 
                    $.mobile.pageContainer.pagecontainer( "change", "second.html", { reload: "true" } );
                });
            });
        </script>
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="button" value="Button" id="changePage">
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

HTML2 - second.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo 2</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
    </head>
    <body>     
        <div data-role="page" id="second" data-theme="a" >
            <div data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>

            <div data-role="content">

            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>  
    </body>
</html>

Update:

From what I can see this is a bug. I have reported it here: https://github.com/jquery/jquery-mobile/issues/7406

Upvotes: 2

Related Questions