jQuery Mobile导航不起作用

Question

I'm currently working on a web project with jQuery mobile but navigation just won't work.

When i hit a page from the menu (eg. "customers") the url displays correctly ( www.aaa.bb/#customers ) and the page is loaded without any problems. When i hit another page the url is also correct and the page loads but when i then try to go back using the browser's back button the page doesn't change even though the url changes correctly..

I have seperate files for my different pages. Could this cause the problem?

If so, why does the url change correctly then?

Thank you!

Edit: Ajax is enabled on my page

Answer 1

If you are using AJAX to navigate throughout your site it is necessary to update the history yourself using history.pushState , since your HTTP (ajax) call will otherwise not be logged and stored in the history.

There are various ways you can manipulate the history, or change how you AJAX calls get fired, here is a solid doc on how to manipulate browser history, follow this up by creating a function that checks onpopstate event that is fired and update your page.

Answer 2

After hours of reading docs and testing different attempts I wrote this solution:

$(window).on("navigate", function(){
    var file="/";

    if(typeof history.state.pageUrl != 'undefined') {
        file += history.state.pageUrl + ".php";
    }

    else{
        file += "index.php";
    }


    $(":mobile-pagecontainer").pagecontainer( "change", root + file, {"reverse": true} );
});

This solution only works for my specific problem and may not work for others.

Known limitations:

• all your jQuery Mobile pages have to be in the root directory of you website
• the filenames of your pages have to be equal to their data-url attribute
• all your pages have to have the same file extension (.php)

Dialogs will probably cause trouble too. I am also facing a strange issue when navigating to my index.php file.

I will improve my solution over time and post it again.