0

I am creating a JQuery Mobile web app and on one page I have javascript that gets values stored in HTML5 local storage and updates web controls on the page with their values. One of the web controls is a slider control.

I need the javascript to execute every time the page is visited so it will update the controls properly from local storage. The only applicable JQuery events I could find that fire at every page are the pageshow and the pagebeforshow events so I tried to tie the code to execute during these events. Example follows:

  var onPageShow = function () {
    // Restore setting values from device browser local storage
    if (localStorage.getItem("mmb_AutoLogin")) {
      $('#AutoLogin').val(localStorage.getItem("mmb_AutoLogin").toLowerCase());
      $('#AutoLogin').slider('refresh');
    }
  };

  $(document).delegate('#maxsettings', 'pageshow', onPageShow);

The problem is that I get an error when trying to reference the slider: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'slider'

I need to refresh the slider web control after changing its value from default or it will not change visually.

That is the issue. How do I run the script every time the page loads and update the slider web control without getting the error? I feel like I have to jump through hoops to make jQuery Mobile handle something which should be so simple.

Omar
  • 32,302
  • 9
  • 69
  • 112
Obi Wan
  • 969
  • 11
  • 26
  • One other thing: If I execute the above code during the JQuery pageinit event then I do not get the error, but the code only executes the first time the page is visited. Thereafter the page gets cached so the event does not fire. The script code is valid. It needs to be tied to an event that will run each time the page is visited. – Obi Wan Jul 23 '13 at 18:49
  • Put the code inside `pageshow` instead of calling a function and use `.on` instead of `.delegate`. – Omar Jul 23 '13 at 23:14

2 Answers2

0

This is how I solved the issue, in case anyone wants to know how to execute JQuery Mobile code every time a page is visited. 

  $(document).ready(function () {
    $('#maxsettings').bind('pageshow', function () {
      // To execute each time page is shown
      // Restore setting values from device browser local storage
      if (localStorage.getItem("mmb_AutoLogin")) {
        $('#AutoLogin').val(localStorage.getItem("mmb_AutoLogin").toLowerCase()).slider('refresh');
       }
    });
  });

I just want to say that, in my experience, I have found a huge amount of conflicting information across the internet regarding JQuery Mobile and I think it should not be this way. There should be clearly documented standards for situations such as the above. This would make it easier for everyone to create mobile web apps.

Obi Wan
  • 969
  • 11
  • 26
0

You can check working example here

My suggestions are:

  1. Use 'on' function instead of 'delegate' $('#maxsettings').on('pageshow', onPageShow);
  2. Store the value of "mmb_AutoLogin" in local variable, so you reduces the amount of times you access local storage var autoLogin = localStorage.getItem("mmb_AutoLogin")
  3. Run your code on $(document).ready
Dima Kuzmich
  • 1,286
  • 11
  • 18
  • I have applied the feedback from both you and Omar. This is working as it should now. Thanks for the feedback. – Obi Wan Jul 25 '13 at 13:30