8

I am writing a form wizard using JQuery's accordion module. The problem is I want to override any mouse clicks on the accordion menu so that the form is validated first before the accordion will show the next section.

I have tried the following:

$('#accordion h3').unbind();
    
$('#accordion h3').click(function() {
  if (validate())
  {
    $("#accordion").accordion('activate', 2);
  }else
  {
    alert("invalid form");
  }
}

But the above code doesn't work. The built-in click event of the accordion still gets called and the accordion shows the next section regardless of whether the form is valid or not.

I have also tried the following code:

$('#accordion h3').click(function(event) {
   if (validate())
   {
     $("#accordion").accordion('activate', 2);
   }else
   {
     alert("invalid form");
   }        
   event.stopPropagation();
});

But the stopPropagation() call doesn't seem to affect the accordion behaviour at all, the next section is displayed whether or not the form is valid.

Any idea what I may be doing wrong?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Stinky Tofu
  • 475
  • 2
  • 5
  • 11

4 Answers4

13

Okay, took a break from coding this function and have come back to it with a fresh pair of eyes. Here's the solution:

$("#accordion").accordion({event: false});

Adding event:false to the accordion intitialization code will prevent mouse clicks on the accordion menu from executing the default action and then I can write custom click handling code to run the validate() function when user clicks on the menu, essentially overriding the accordion's built-in click function if the form fails the validation check.

BTW, I am using JQuery UI's accordion module here.

Works with ie7,8, chrome 19, ff 3.0.3

Michal - wereda-net
  • 940
  • 9
  • 14
Stinky Tofu
  • 475
  • 2
  • 5
  • 11
0

event.stopPropogation() doesn't stop further event handlers registered with the event target from being called, it stops the event from bubbling up the DOM if event.bubbles is true. You might try having the event handler return false or calling event.preventDefault(), see here or here for more info.

Community
  • 1
  • 1
Ryan Lynch
  • 7,676
  • 1
  • 24
  • 33
  • Thanks, but I believe preventDefault() only prevents the default behaviour of the element I am interacting with - for example, preventDefault() on a link will stop the browser from loading a new page, and preventDefault() on a form prevents the form being submitted. With the accordion code, I am not trying to prevent a default action from happening, I am trying to prevent a customised action written in the accordion code from happening. Thanks for the suggestion, but preventDefault and 'return false' doesn't resolve the problem – Stinky Tofu Nov 25 '09 at 05:14
0

Judging from the source code, the event is not bound to the h3's, but to the surrounding container (the plugin uses event delegation). Moreover, the handler is not bound to click, but to click.ui-accordion. So try:

$('#accordion').unbind('click.ui-accordion');

And just for the record: There is no such thing (at least not yet) as "JQuery's accordion module". There are merely several accordion plugins for JQuery.

Tom Bartel
  • 2,283
  • 1
  • 15
  • 18
  • Thanks, I tried $('#accordion').unbind(); before, but it didn't resolve the problem. I think the problem is which element the event is bound to, but I've tried unbinding pretty much every element in the accordion, but the click still gets detected and the code is still executed. – Stinky Tofu Nov 25 '09 at 05:10
  • Have you tried `$('#accordion').unbind('click')` or `$('#accordion').unbind('click.ui-accordion')`? There is a difference. Also try `$('#accordion h3').unbind('click.ui-accordion')`. It depends on the version you are using. – Tom Bartel Nov 25 '09 at 06:23
  • Strange, but I've tried unbinding all elements inside the accordion and the click still gets registered by JQuery. I've tried all the following code: $('#accordion').unbind('click.ui-accordion'); $('#accordion').unbind('click'); $('#accordion h3').unbind('click.ui-accordion'); $('#accordion h3').unbind('click'); $('#accordion div').unbind('click.ui-accordion'); $('#accordion div').unbind('click'); $('#accordion div p').unbind('click.ui-accordion'); $('#accordion div p').unbind('click'); but to no avail... will keep working on this and will post any solution if I find one – Stinky Tofu Nov 26 '09 at 08:24
0

You have to write the below code together at the bottom of ready function:

$('#accordion h3').unbind('click');
$('#accordion a').unbind('click');
Ashwin Chetri
  • 1