How to cancel change event for accordion controls

Question

$("#accordion").accordion({
    change: function (event, ui) {
        alert('event have to be changed')
    },
    changestart: function (event, ui) {
       return false;
    }
});

Is it possible to cancel the change event?

Robb

this cancel event but action still working – Robb

Answer 1

I am not sure about change but for other events in jqueryui returning false cancels the event.

Gash

This works because return false is equivalent to calling e.preventDefault(); and e.stopPropagation(); – Darrendarrey

Answer 2

stopPropagation() is the key to stopping a jQueryUI action from processing, but it must be interrupted BEFORE the changestart event. For example, when the header item is actually clicked.

If this is a header/content pair in your accordion:

<h3 class='noexpand'>This is a dummy header</h3>
<div>This is dummy content</div>

Then this will prevent the accordion from expanding the div when the header is clicked:

$("h3.noexpand").click(function(e) {
    e.stopPropagation();
});

See jquery accordion prevent bubbling / allow default link action.

Deepseated

Answer 3

As Martin said you can return false. See a code sample below.

...
eventname: function( event, ui ) {
    // Add your code here
    ...

    return false;
}

Boon

Answer 4

event.preventDefault();
event.stopPropagate();

Telephotography

stopPropagation(), not "stopPropogate()" – Darrendarrey

Answer 5

Returning false does nothing, to cancel an event in jQueryUI you need to call preventDefault() on the event.

$("#accordion").accordion({
    changestart: function (event, ui) {
       event.preventDefault();
    }
});

This should work with all event methods, including autocomplete. Handy if you wish to include a few custom options in your autocomplete menu that you want someone to select but don't actually want to add to the input it is tied to. :)

Sochi

"These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false." - api.jquery.com/event.stoppropagation – Publius

This actually doesn't work. It was my first thought too. – Darrendarrey

Answer 6

What worked for me is calling:

function onChange(e, ui) {
    e.preventDefault();
    e.stopPropagation();
}

Returning false at the end of the function has the same affect because it's the equivalent of making those two function calls.

Darrendarrey