I'm trying to call a JavaScript (the initialization for ui.tabs.js) after an #ahah event replaces a set of data but have been unable to get it to trigger after the data itself has loaded. I know the call is working because i've tested with .click().

I have a search form with multiple select elements which cause an #ahah event to replace the data in a specific div. I tried the jQuery .change() event on the search forms select elements but this event occurs before the data is loaded. I also tried the .ready() event on the div which has it's content replaced but this didn't appear to occur.

Does anyone have any suggestions on how to call a JavaScript after the data from the #ahah event has loaded?

Comments

Jaypan’s picture

I'm interested to know this myself. On a recent site, I somewhat hacked it - the AHAH change was set to change the contents of a particular div. I used setInterval() (or setTimeout(), I can't remember) to check the contents of that div, and if it had changed (i.e. the AHAH had been fired and finished), to execute my code. Not a clean solution though. It worked, but it's not ideal, and I'd much prefer to find out that AHAH fires some trigger when it is done executing.

...I suppose I could just look at the actual AHAH javascript code and see what is in there.

joshua.howell’s picture

Thanks for the info Jay. I managed to get it to work using setTimeout() to trigger 0.1sec after the #ahah and it appears to work perfectly.

jauzah’s picture

There is an easy workaround for this -> jQuery .ajaxComplete() ... http://api.jquery.com/ajaxComplete/

inkovation’s picture

Can you clarify that just a bit?

After my span class="myclass" has updated
via my function perform_ajax() called from a module

I want to trigger a function getTotals() in a javascript
(which currently performs beautifully for a moment before being wiped away by the returning ajax)

So I would need to attach an event handler:

$('.myclass').ajaxComplete(function() {
$(this).getTotals();
});

to....what?

Thanks in advance

Jaypan’s picture

I like this ajaxComplete() method. I didn't know about it. I just went through the documentation on it, and it looks very usable for this AHAH situation.

inkovation - the event handler is the ajaxComplete() method. So you have attached it to .myclass. If you don't need to attach it to a specific element, you could probably attach it to the document (think: $(document).ready()) or the body.

duckzland’s picture

did you put the

$('.myclass').ajaxComplete(function() {
$(this).getTotals();
});

inside a "behaviors" function? eg.

Drupal.behaviors.MyFunction = function (context) {

$('.myclass').ajaxComplete(function() {
$(this).getTotals();
});

}

AFAIK, drupal ahah will call Drupal.attachBehavior($context) to re-register the new ajax fetched content.
So if you attach your function in a "behaviors" function, it should be reattached in the new ajax fetched content by AHAH automatically.

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

inkovation’s picture

Thank you for the hints. I'll try to get my head around that.

I've got dropdowns where users select lengths and widths and those selections change the price of the product through a custom module.

We want also to have the length and width converted to inches in decimal format (from feet/inches/fractions of inches selections) displayed below the select boxes.

I created a javascript that reads the selected elements, does conversion as needed and adds them up, displaying them neatly where desired - but when the price updates a moment later, that is all lost.

(see midweststeelsupply(dot)com/TESTINGSETUP/store although I am momentarily breaking that from time to time as I blunder through this)

I'm a brainwreck after trying to code this drupal-side to no avail. I'm encouraged by this post, though, and I do thank you all for your help!

Jaypan’s picture

I just put together a tutorial on this. As I mentioned, it's something I've needed to do in the past, and didn't know how to do, and the .ajaxComlete() function was exactly what I needed. My tutorial is very basic and generalized, but hopefully it will help you work your head around what it is that you need to do, without using the timeout() function (which is undependable).

http://www.jaypan.com/blog/calling-function-after-ahah-event-drupal-6

inkovation’s picture

If you don't mind, I think I'll build a small shrine to you and duckzland in my basement. ;-D

Thank you so much for your help!

duckzland’s picture

if you want the easiest way to do this but "not the drupal way", try installing the jQuery livequery plugin.

So the concept is opposite to drupal behavior, while drupal "attach" the new DOM with the drupal.attachbehavior, if you use the livequery plugin then you need to register the DOM element on document ready and the plugin will auto attach the element when it is available / fetched with ajax.

in a sense the livequery is somehow similar to jQuery 1.3 and above .live() function which drupal is lacking.

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com