JQuery UI Accordion - Undo Change

Question

I struggled with this for a while.

I want to have confirmation () before someone changes the accordion.

I 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 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, without joy.

Any help would be greatly appreciated.

Greetings

Answer 1

Use the empty event when creating the accordion, which allows you to control the click event of the accordion using the jQuery.click function. Then you can process the confirmation window and enable the execution of the accordion event only if it is 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 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;
    });
});

( ), , . , 1 , id .accordion-me, . , html-, .. Div.accordion-me.

Answer 2

click . , :

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

( document.ready)

$('.accordionHeaderLink').click(function(){
    if (!confirm("You have unsaved changes. Do you want to navigate away?")) {
        return false;
    }
});