CODEWITHSUNDEEP
jqueryjquery-mobile
Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 33944

Stop Jquery Mobile from Reinitialize the Page When Back Button Click?

I am handling the Back/Forward button myself in jquery mobile. The problem is that when a user click back button then jquery send ajax request and reinitialize the page which mess up all my work. I have set data-backbtn="false" and $.mobile.ajaxEnabled = false; But none of these trick works for me. Any idea?

Upvotes: 0

Views: 518

Answers (3)

Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 33944

I have ended up using this line which worked for me,

$(window).off('popstate');

Upvotes: 0

Francois Borgies
Francois Borgies

Reputation: 2408

jQuery Mobile removes pseudo-pages from the DOM after they are navigated away from (this is for external pages only). You can stop this behavior on a single pseudo-page by adding the data-dom-cache="true" attribute to the data-role="page" element for the pseudo-page:

<div data-dom-cache="true" data-role="page">
    ...
</div>

There are other ways to enable (well disable really I guess) this functionality; you can read about them here

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

I think your problem is also in $.mobile.ajaxEnabled = false; handling.

That code sample MUST be triggered from mobileinti event like this:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:

<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
<script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });    
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Example:

HTML 1 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <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.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).bind("mobileinit", function () {
                    $.mobile.ajaxEnabled = false;
                });    
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

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

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

HTML2 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <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.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).bind("mobileinit", function () {
                    $.mobile.ajaxEnabled = false;
                });    
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>    
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

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

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

Upvotes: 2

Related Questions