Jquery UI Accordion - Cancel Change

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) {
           开发者_StackOverflow                         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

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.

You have to bind it to the click event on the anchor tag. For example, if your header links are:

<a href="#" class="accordionHeaderLink">header 1</a>

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;
    }
});