jQuery Mobile Call Page

Question

How do I do the calling page with reload/refresh the page?

The logic: If the user successfully logged in, the page will be moved to the administrator page using HTML5 storage as data.

Ex : sessionStorage.setItem('MyID','12345');

If successfully logged in, the string 12345 will be taken to a administrator page . But the process of making 12345 is derived from the login form.

To read the data I use : sessionStorage.getItem('MyID') on administrator page.

The problem that I faced was when jQuery mobile make the turn pages, administrator page can not read data that although I have to enter in the data readout function block : $(document).ready(function())

But if I do a refresh/reload administrator page, data manually then read properly

I used :

function callAdmin(){
   $.mobile.changePage("admin.html");
}

How do I do the calling page with a refresh page or reload page? or is there another way for the results of data can be sent to the administrator page?

Answer 1

Your main problem here is document ready. This is a common jQuery Mobile problem, you don't need to refresh your page to be able to read your sessionStorage.

What you need to do is use proper jQuery Mobile page events. Document ready should be only used with basic jQuery. In case of jQuery Mobile it will usually trigger before page is successfully loaded into the DOM.

If you want to find more about this read my other answer: jQuery Mobile: document ready vs page events

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. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.

Classic jQuery syntax:

$(document).ready() { 

});

To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:

$(document).on('pageinit', function(){

});

We can go even further and use a page id instead of document selector. Lets say we have jQuery Mobile page with an id index:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

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

    </div>
</div>

To execute a code that will only available to the index page we could use this syntax:

$('#index').on('pageinit') {

});