Ошибка мобильного слайдера Jquery при обновлении - PullRequest
Новая
       10

Ошибка мобильного слайдера Jquery при обновлении

2 голосов
/ 21 августа 2011

Я получаю эту загадочную ошибку, когда пытаюсь динамически изменить значение ползунка jqm (или списка тоже)

Не определено

Невозможно вызвать методы ползунка до инициализации;

попытался вызвать метод refresh

Вот упрощенная версия моего кода 

$("#mypage").bind("pagecreate", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

Я также попробовал это с $(window).load и $(document).ready, но безуспешно, но поскольку jqm сказал мне использовать событие pagecreate, я точно не знаю, что происходит не так.

Ответы [ 5 ]

1 голос
/ 20 апреля 2012

Обновление элементов формы

В jQuery Mobile некоторые улучшенные элементы управления формой просто стилизуются (вводы), а другие представляют собой пользовательские элементы управления (выборки, ползунки), построенные и синхронизированные с собственным элементом управления. Чтобы программно обновить элемент управления формы с помощью JavaScript, сначала манипулируйте собственным элементом управления, а затем используйте метод refresh, чтобы сообщить расширенному элементу управления о необходимости обновить себя в соответствии с новым состоянием. Вот несколько примеров того, как обновить общие элементы управления формой, а затем вызвать метод refresh:

Флажки: 

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Радио: 

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

Выбор: 

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

ползунки: 

$("input[type='range']").val(60).slider("refresh");

Переключатели (они используют ползунок): 

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

Источник: jQuery Mobile Docs (версия 1.1.0)

0 голосов
/ 25 апреля 2013

Попробуйте on pageinit вместо bind pagecreate. 

if (!jQuery.fn.on) jQuery.fn.on = jQuery.fn.live; // older versions of jQuery

$("#mypage").on("pageinit", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

или: 

$(document).on("pageinit", "#mypage", function() {
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});
0 голосов
/ 26 сентября 2012

Я предполагаю, что ползунок на самом деле не находится на этой странице, т.е. ползунок находится где-то в DOM, но не один из элементов, содержащихся в элементе, представляющем страницу [jQuery Mobile], которые инициализируются при загрузке страницы , Обратитесь к странице событий jQM для получения дополнительной информации.

Вот способ обновить только ползунки на странице: 

$(document).on("pagecreate", function(event) {
    $(event.target).find("input[type=number]").slider("refresh");
});
0 голосов
/ 28 октября 2011

У меня была такая же проблема.Я смог заставить его работать, отключив автоинициализацию. 

<input type="range" id="f_range" value="16" min="16" max="99" data-role="none" />

Тогда вам просто нужно вручную инициализировать, как показано ниже, после чего вызовет slider ("refresh") .ОК: 

$("#f_range").slider();

Ясно, что есть какая-то ошибка в мобильном коде jQuery, которая вызывает это, но по крайней мере есть обходной путь.

* Обновление *: только что заметил, что в iOS 5 ползунок теперь появляется рядом с собственным ползунком Safari, без текстового поля, содержащего фактическое значение.Все еще пытаюсь найти решение.

0 голосов
/ 21 августа 2011

Чтобы получить правильный ответ, вам нужно опубликовать свой фактический код.

Возможно, вы захотите изменить первую строку вашего кода на ... 

$("#mypage").live("pagecreate", function(){

или ... 

$('#mypage').live('pagebeforecreate',function(event){

Я уверен, что вы уже видели эту страницу, но если у вас ее нет, то что-то в разделе «События инициализации страницы» в нижней части этой страницы может помочь ...

События инициализации страницы

Вы также можете попробовать предложения на этой странице ...

Работа с автоматической инициализацией jQuery Mobile

...