Question

I have an html page called search.html which contains sliders, they work perfectly in this page.

I’m trying to load this page into another one (my main page) using the jQuery .load() function.

I removed the slider initialization from the search.html and put it within the callback function of load() in the main page so it executes after the DOM, set through AJAX, is ready, as follows :

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

I have the JS scripts for jQuery and jQuery UI included in the head of both the search.html page and the main page.

When I load the main page, sometimes, the slider works properly but sometimes it doesn’t work at all (doesn’t initialize) and when this happens, the error console of firebug shows :
$(“#sliderprice”).slider is not a function

All I do is refresh the page, and sometimes it works and sometimes not.

I would like to fix this so it works all the time. Any help would be appreciated.

Answer 1

I have found the solution myself, all I had to do is to remove the JS script for jQuery and jQuery UI from the search.html page and keep it only in the main page.

Apparently, putting it in both, reloads the script again when the .load() function fires and sometimes the callback functions fires before the script finished reloading.

I don’t know how scripts insertions and loading work through .load() or in general but it fixed the problem.