Question

im developing a mobile app which is based on jqm and local storage

you can view it here:

clients/app2u/Apps/6/home.html
clients/app2u/Apps/6/gallery.html
clients/app2u/Apps/6/categories.html

etc’

local storage contains data for each page (for example: “app2u_app6_home”) and a general tab data (“app2u_app6_Tabs”)

the problem is that on first visit to the page, the page loads before the data is completely load, and only if you refresh the page the page will contain the data.

how can i force the page to show only after the local storage is ready?

Answer 1

Note: I am assuming you are referring to the getPageData function in functions.js on your site.

Your problem is that the $.post call is asynchronous (unlike the call to localStorage.getItem) so your getPageData function cannot return immediately.

Instead, you should refactor it to accept a callback function:

function getPageData(page,wait,extra_data,callback) {
    if (localStorage.getItem(unique_param+page)) {
        callback(localStorage.getItem(unique_param+page, extra_data));
    } else {
        if (typeof(extra_data) == 'undefined') {extra_data = '';}
        $.post(server_path + 'index.php?module=API&pname=' + page + '&pmode=empg&application_id=' + application_id + extra_data,
                function(response) {
                    localStorage.setItem(unique_param+page,JSON.stringify(response));
                    callback(response);
                }
        ,'json'
        );
    }
}

Using this method, your code will always wait for either the call to local storage or the call to the server to complete