Ползунок пользовательского интерфейса jQuery с функцией загрузки jQuery-AJAX не работает

У меня есть html-страница с именем search.html, которая содержит ползунки, они отлично работают на этой странице.

Я пытаюсь загрузить эту страницу на другую (мою главную страницу), используя функцию jQuery .load().

Я удалил инициализацию ползунка из search.html и поместил его в функцию обратного вызова load() на главной странице, чтобы он выполнялся после того, как DOM, установленный через AJAX, будет готов следующим образом:

$("#display_area").load("search.html","",function(response,status,xhr){ 
//#display_area is a div
$( "#sliderprice" ).slider({ max: 1000 },{ step: 10 }); 
//#sliderprice is a div
})

У меня есть JS-скрипты для jQuery и пользовательского интерфейса jQuery, включенные в заголовок как страницы search.html, так и главной страницы.

Когда я загружаю главную страницу, иногда слайдер работает правильно, но иногда он вообще не работает (не инициализируется), и когда это происходит, консоль ошибок firebug показывает: $("#sliderprice").slider is не функция

Все, что я делаю, это обновляю страницу, и иногда это работает, а иногда нет.

Я хотел бы исправить это, чтобы он работал все время. Любая помощь будет оценена по достоинству.


jquery jquery-ui jquery-ui-slider jquery-load
person Ilyes Ferchiou    schedule 26.06.2012    source источник
comment
Вы пробовали $(document).ready(function() {}); ??   -  person JSantos    schedule 26.06.2012
comment
Да, это похоже на ошибку порядка загрузки. Использование приведенного выше предложения может исправить это.   -  person Mark K    schedule 26.06.2012
comment
Если вы имеете в виду оставить код на странице search.html и поместить его в $(document).ready(), это не сработает. $(document).ready() никогда не срабатывает при вызове через .load(). Однако, если вы имеете в виду главную страницу, я знаю благодаря отладке, что при вызове функции DOM готов к этому, но не распознает функцию.   -  person Ilyes Ferchiou    schedule 26.06.2012
comment
Функция обратного вызова загрузки описана в jQuery API следующим образом: если предоставлен полный обратный вызов, он выполняется после постобработки и вставки HTML. Таким образом, код внутри функции обратного вызова запускается только после того, как вставка HTML завершена (новый DOM готов). Нет необходимости в $(document).ready(), кроме того, что $(document).ready() срабатывает только один раз и навсегда, после новых изменений он не срабатывает снова.   -  person Ilyes Ferchiou    schedule 26.06.2012
comment
setTimeout(function(){ // slider stuff }, 300); должен это исправить.   -  person Ohgodwhy    schedule 26.06.2012
comment
это конечно сработает но не вариант, мне нужно чтоб грузился без таймаута.   -  person Ilyes Ferchiou    schedule 26.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я сам нашел решение, все, что мне нужно было сделать, это удалить JS-скрипт для jQuery и пользовательского интерфейса jQuery со страницы search.html и оставить его только на главной странице.

По-видимому, вставив его в оба, скрипт снова перезагружается, когда срабатывает функция .load(), а иногда функции обратного вызова срабатывают до того, как скрипт завершит перезагрузку.

Я не знаю, как вставки и загрузка скриптов работают через .load() или вообще, но это решило проблему.

person Ilyes Ferchiou    schedule 26.06.2012