Как обновить веб-контроль слайдера при каждом посещении страницы с помощью JQuery Mobile

Question

Я создаю веб-приложение JQuery Mobile, и на одной странице у меня есть JavaScript, который получает значения, хранящиеся в локальном хранилище HTML5, и обновляет веб-элементы управления на странице своими значениями. Одним из веб-элементов управления является ползунок.

Мне нужно, чтобы JavaScript выполнялся при каждом посещении страницы, поэтому он будет корректно обновлять элементы управления из локального хранилища. Единственными применимыми событиями JQuery, которые я мог обнаружить на каждой странице, являются события pagehow и pagebeforshow, поэтому я попытался связать код для выполнения во время этих событий. Пример следует:

  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);

Проблема в том, что я получаю сообщение об ошибке при попытке сослаться на ползунок: 0x800a01b6 - Ошибка времени выполнения JavaScript: объект не поддерживает свойство или метод "ползунок"

Мне нужно обновить веб-элемент управления ползунка после изменения его значения по умолчанию, иначе он не изменится визуально.

Это проблема. Как мне запускать скрипт каждый раз, когда страница загружается, и обновлять веб-элемент управления ползунком, не получая ошибку? Я чувствую, что мне нужно прыгать через обручи, чтобы jQuery Mobile справился с чем-то, что должно быть настолько простым.

Answer 1

Вот как я решил проблему, если кто-то хочет знать, как выполнять код JQuery Mobile при каждом посещении страницы.

  $(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');
       }
    });
  });

Я просто хочу сказать, что по своему опыту я обнаружил в Интернете огромное количество противоречивой информации о JQuery Mobile, и я думаю, что так быть не должно. Должны быть четко документированные стандарты для таких ситуаций, как указано выше. Это облегчит создание мобильных веб-приложений для всех.

Answer 2

Вы можете проверить рабочий пример здесь

Мои предложения:

1. Используйте функцию "on" вместо "делегат" $('#maxsettings').on('pageshow', onPageShow);
2. Сохраните значение "mmb_AutoLogin" в локальной переменной, чтобы сократить количество обращений к локальному хранилищу. var autoLogin = localStorage.getItem("mmb_AutoLogin")
3. Запустите свой код на $(document).ready