For the Media module, I'm trying to attach a new behavior to an AHAH form submit button. I need to open a previously hidden form element, BEFORE the ajax has loaded. This is ultimately for a throbber/progress indicator, and to allow the user to enter meta-data without having to wait for the 120MB video to finish uploading.
However, it appears that the jQuery bind('click') behavior doesn't allow piggybacking. How can I do this? After the first failed attempt, I tried successfully binding to the 'mouseover' event, so I know my selector is working properly. I've since also tried adding a wrapper to the button, but that's also not working.
Here's what I have thus far:
Drupal.behaviors.mediaAhahHideBrowser = function (context) {
$('.media-browser-submit:not(.mediaAhahHideBrowser-processed)', context).addClass('mediaAhahHideBrowser-processed').bind('click', function () {
alert('Click successful.');
});
};And with a wrapper instead:
Drupal.behaviors.mediaAhahHideBrowser = function (context) {
$('.media-browser-submit-wrapper:not(.mediaAhahHideBrowser-processed)', context).addClass('mediaAhahHideBrowser-processed').bind('click', function() {
alert('Click successful.');
});
}Note: the wrapper behavior works when clicking to the side of the button, but not on the button itself.
Thanks,
Aaron
Comments
Hi Aaron, just to clarify,
Hi Aaron,
just to clarify, is the reason it doesn't work when you bind it to the button itself that your new behaviour happens AFTER the upload button has done its ajax stuff instead of before? I'm not sure if there's any way to control the order in which the behaviours bound to events get called.
As for the wrapper method, as far as I understand, the reason for this click event not being triggered when you click on the button itself is because of event bubbling not happening. As of jQuery 1.3, events do bubble up to the elements beyond their targets by default. Mfer has been working on getting jQuery version 1.3 into jQuery Update module for Drupal 6 and I think the only outstanding problems with it right now are other contrib modules that break with 1.3 due to their use of deprecated syntax. Still, it might be worth testing your code with jQuery 1.3 to see if you can get it to work.
Hope this helps,
Katherine
Thanks for the info,
Thanks for the info, Kat.
Unfortunately, I just tried it with jQuery 1.3.2, and neither method (binding to the original submit button, or bubbling up to the wrapper) works.
I guess I'll have to try creating my own AHAH event.
Thanks,
Aaron
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
I've had success with this
I've had success with this method:
<?php
$form['wrapper'] = array ( '#prefix' =>'<div id="wrap-first">'
, '#value' =>' '
, '#suffix' =>'</div>'
, );
$form['wrapper']['button'] = array ( ... your ahah stuff );
$sneakyJs =
"$(document).ready(function () { $('#wrap-first').bind(...) });";
drupal_add_js($sneakyJs, 'inline', 'footer');
?>
So for me, at least, the bubbling up to the wrapper worked fine.
Maybe the inline get's hit before the ahah processes? ... not sure but might be worth a try.
Changing the order of bound events
Even though I added my binding in the footer during jQuery's document.ready, the AHAH-created events were still being fired before mine.
My solution came by capturing the list of functions currently bound to the DOM object in question, unbinding them, and then explicitly calling them after my code. For example:
$(document).ready(function(){
// capture previously-bound events
var events = $('.content-add-more :input').data('events');
// remove them from the object
$('.content-add-more :input')
.unbind()
// add my function
.mousedown(function(){
...
// call previously-bound functions at the end of my event-handler
for (var i in events.mousedown) {
if (events.mousedown.hasOwnProperty(i)) { events.mousedown[i](); }
}
});
});
hope it helps!
Thanks.
Great snippet, you just saved me a bunch of time.