How to rebind stepcarousel on ajax loaded page?

[bennettberlin]

1) Script Title: stepcarousel 1.91

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem: I'm trying to get stepcarousel working on a page loaded by ajax (XMLHttpRequest). When the ajax page containing stepcarousel loads, stepcarousel does not work. I'm presuming that this is because I have to reset up (rebind?) stepcarousel with jQuery after XMLHttpRequest has loaded the page (status=200). Everything else on the page works fine, but not stepcarousel.

Please note: It is the entire stepcarousel that is being loaded by ajax, NOT its contents. I also had to comment out jQuery.noConflict() when I tested stepcarousel as a non-ajax plugin in order for it to work.

The stepcarousel script and stepcarousel.setup() are loaded in the header on my main (and only page).

I'm no jQuery wiz. and have not been able to find out how to do this on either the DD forums or with Google.

I'd appreciate some tips on how to do this.

Thanks in advance.

[ddadmin]

When you say the entire carousel is loaded via Ajax, does that also include the script reference to stepcarousel.js as well?

In general his isn't an issue with the script, but rather, just a pesky limitation of Ajax. Pages fetched via Ajax should they contain JavaScripts within it in many cases won't run correctly when brought over this way. Ajax basically copies the contents of the external file similar to copying plain text and just dumps it onto the main page. Browsers don't know to interpret scripts or even CSS (in IE) within that copied content. There are ways around it, but it really depends on the specifics of how you're invoking the script via Ajax, and what can be compromised.