0

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.

Ilyes Ferchiou
  • 583
  • 3
  • 10
  • 22
  • Have you tried $(document).ready(function() {}); ?? – JSantos Jun 26 '12 at 13:42
  • Yes it sounds like a load order error. Using the above suggestion may rectify that. – Mark K Jun 26 '12 at 13:43
  • If you mean leaving the code in the search.html page and putting it within a $(document).ready(), this doesn't work. $(document).ready() never triggers when called through .load(). If however, you mean in the main page, I know through debugging, that when the function is called, the DOM is ready for it but it doesn't recognize the function. – Ilyes Ferchiou Jun 26 '12 at 13:44
  • The load callback function is described in jQuery API as follows : "If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. " So, the code within the callback function, launches only after HTML insertion is done (new DOM is ready). There is no need for $(document).ready() besides $(document).ready() triggers only once and for all, it doesn't trigger again after new changes. – Ilyes Ferchiou Jun 26 '12 at 13:49
  • `setTimeout(function(){ // slider stuff }, 300);` should fix it. – Ohgodwhy Jun 26 '12 at 13:52
  • it will certainly work but not an option, I need it to load without any timeout. – Ilyes Ferchiou Jun 26 '12 at 14:05

1 Answers1

0

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.

Ilyes Ferchiou
  • 583
  • 3
  • 10
  • 22