Jquery Mobile AJAX post data not saving to localStorage

Question

I have a jquery mobile web app with various pages using single page architecture (one page per html file -- I have multiple HTML files). "page1" is the originally loaded page. I have 4 other tabs for navigation [page2, page3, page4, and page5] which are all pre-fetched from the menu in page1.

On almost every page, I use AJAX post calls to interact with my application. For efficiency/usability, I save the content to localStorage.

The code on page1 looks like this:

$(document).on('pageshow','#page1', function(){ 

    var postTo = '../api/ajaxreturn.php';
    $.post(postTo, function (data){
        if (localStorage.getItem('ajaxreturn') == JSON.stringify(data)) return;
        else {
          localStorage.setItem('ajaxreturn',JSON.stringify(data));
          //alert(localStorage.getItem('ajaxreturn'))

        }
    }, "json");//end post
     //alert('hi')        

}); // end page1

Other pages are coded similarly.

The problem I experience is that on the ORIGINAL webapp document load, the information is not being saved to localStorage. When I check in the debugger, I see that all the localStorage data of the prefetched pages is saved. In order to get page1's localStorage I have to click to any page2/3/4/5 and then back to page1. This calls the "pageshow" function again and it works.

What is even more weird is that when I uncomment the alert('hi'), IF I leave the alert up for a couple of seconds, the data does show up in localStorage on the ORIGINAL load of the webapp.

Maybe it has to do with timing issues? race conditions? But I know the ajax call is working, because if I uncomment "alert(localStorage.getItem('ajaxreturn'))" I see the actual content.. So not sure what it is.

Any help would be greatly appreciated

Answer 1

Fixed it!!!

So the problem had nothing to do with the code I posted. It had to do with the order of my header files in the HTML.

TIP: FOLLOW JQUERY MOBILE GUIDELINES STRICTLY!!

I had missed the tip where you are supposed to put your custom.js file in between jquery.js and jquery.mobile.js!!!

My previous code looked something like this:

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>
<script src="js/custom.js"></script>

When I changed it to the correct way:

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>

Notice the placement of custom.js (where all custom script is written for the project).

It fixed my problem. So definitely make sure your headers are set correctly -- will save you hours and hours of headaches. Hopefully this helps you out!