0

I use #ahah binding to a form element to modify a #ahah[‘wrapper’] HTML div. It contains a ‘slider’ div for the EasySlider jQuery UI plugin. This div contains a list where each list item represents one slide. When the ahah event is triggered, the wrapper HTML is replaced by a new set of slides.

When the form loads the slider works fine.

Here’s the problem: when the ahah event is triggered the jQuery no longer works. The new slides display one below the other, no animation. Shouldn’t the jQuery function be called automatically, or what is needed to make the call?

1

Not really a Drupal question, but the slider is created in Javascript on the document.ready -event which can't as such be triggered manually.

When you fetch a piece of content via ajax to the page, it just replaces the html, but does not attach any event handlers or run any document.ready -code. You need to handle that explicitly.

What I'd do is I'd check out what function EasySlider calls on document.ready and just repeat that call after the ajax content is fetched.

| improve this answer | |
  • Very helpful thank you, this got me in the right direction. I ended up adding this which solved the problem: $(document).ajaxComplete(function(e, xhr, settings) { $("#slider").easySlider({ auto: true, continuous: true }); }) – Jean-Pierre Dautricourt Mar 17 '12 at 7:32
  • Perfect! Using the ajaxComplete handler is a great tool for hooking into Drupal's ajax events in a simple way. – Tommi Forsström Mar 20 '12 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.