Jquery UI Accordion - Cancel Change - jquery-ui

Question

I have been wrestling with this one for a while now.
I want to have a confirm() before someone changes the accordion.
I have tried:
$(document).ready(function() {
var edited = false;
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
});
With little joy! I have also tried something like this
$(".accordion-me h3").each(function() {
$(this).unbind("click");
$(this).click(function(e) {
if (confirm("You have unsaved changes! Do you want to navigate away?")) {
$(this).unbind("click");
$(".accordion-me").accordion({
autoHeight: false,
navigation: true,
changestart: function(event, ui) {
if (edited) {
if (!confirm("You have unsaved changes. Do you want to navigate away?") {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
}
}
});
$(this).click();
}
});
});
But again with no joy.
Any help would be greatly appreciated.
Cheers

Answer 1

Use an empty event when creating the accordion, which will allow you to manage the click event of the accordion using a jQuery .click function.
You can then process the confirm box and allow the accordion click event to be executed only if confirmed.
$(document).ready(function()
{
var edited = false,
accordion_me = $('.accordion-me');
// activate the accordion, but with an empty event
accordion_me.accordion({
autoHeight: false,
navigation: true,
event: ''
});
// here's the new accordion event
$('.accordion-me h3').click(function()
{
// find the index of the event being called
var i = $('.accordion-me h3').index(this);
// if we have unsaved changes and do not confirm, stop accordion execution
if (edited && !confirm('You have unsaved changes. Do you want to navigate away?'))
{
return false;
}
// continue with the accordion execution. Activate the requested event index.
accordion_me.accordion('activate', i);
return false;
});
});
If your accordion is collapsible (as mine is) your accordion will still work as it did before.
Also, if you only have 1 accordion, I would recommend using an id to call it instead of the .accordion-me class, which will save some overhead.
If you still need to use a class to call it, put an html tag before it, i.e. div.accordion-me.

Answer 2

You have to bind it to the click event on the anchor tag. For example, if your header links are:
header 1
code would be (also in the document.ready function)
$('.accordionHeaderLink').click(function(){
if (!confirm("You have unsaved changes. Do you want to navigate away?")) {
return false;
}
});