jQuery Slider not working when DIV content refreshed via AJAX

I've got an odd issue that I can't get to the bottom of.

I am updating a div in the body of my page here: http://www.brianrhea.com/newportfolio.php

(click one of the thumbnail images)

The update works fine but the jQuery slider in the target page doesn't work. I view the generated source in Fir开发者_Python百科efox Web Developer Toolbar and the code appears to be correct, but maybe there is some sort of refresh I need to perform?

Any help would be greatly appreciated.

Hey, you're calling ajaxpage function without any parameters:

  $(document).ready(function() {
    ajaxpage();
  });

and you're defining it to have two: ajaxpage(url, containerid) the url and containerid and error appears:

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

Do you need to call it at the begining for some reason?

The slider works for on the destination page when you're loading the content to folioWrap, left and right arrows are working, you're always pointing to the same file, on the destination page (when the new content is loaded) the click on those images is calling the same page and nothing is happening basically from the user point of view but in FireBug Console I can see the ajax calls:

GET http://www.brianrhea.com/web-scwd.html?1294607162197
GET http://www.brianrhea.com/web-scwd.html?1294607169235
GET http://www.brianrhea.com/web-scwd.html?1294607170578
GET http://www.brianrhea.com/web-scwd.html?1294607171257

There's no need for 'restart'/reinitialization of this plugin as I see you're not changing the content of it.

Cheers

G.

You need to re-initialize the slider on the AJAX-loaded content. I noticed you have the following inside $(document).ready():

$(document).ready(function(){
   $("#slider").easySlider({
     auto: false,
     continuous: true,
     speed: 1,
     numeric: true
   });
});

You'll need to add the easySlider initialization code to your loadpage function. This is because loading content into the page will not trigger $(document).ready(). Since you're replacing the slidable element with AJAX, you need to reinitialize the slider.

Also, I noticed you're not doing AJAX without using jQuery's $.ajax and load() functions. These will make your life easier when loading parts of your page VIA AJAX.