Jquery UI Accordion - Annuler le changement

Question

Je me bats avec celui-ci depuis un moment maintenant.

Je veux avoir une confirmation() avant que quelqu'un ne change l'accordéon.

J'ai essayé:

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

Avec peu de joie! J'ai aussi essayé quelque chose comme ça

$(".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(); 
         } 
        }); 
       }); 

Mais encore une fois sans joie.

Toute aide serait grandement appréciée.

Vive

Answer 1

Vous devez lier il à l'événement, cliquez sur la balise d'ancrage. Par exemple, si vos liens d'en-tête sont:

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

Code

serait (également dans la fonction document.ready)

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

Answer 2

Utilisez un événement vide lors de la création de l'accordéon, qui vous permettra de gérer l'événement click de l'accordéon à l'aide d'une fonction jQuery .click. Vous pouvez ensuite traiter la case de confirmation et autoriser l'exécution de l'événement de clic d'accordéon uniquement s'il est confirmé.

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

Si votre accordéon est pliable (comme le mien l'est), votre accordéon fonctionnera comme auparavant. Aussi, si vous avez seulement 1 accordéon, je recommanderais d'utiliser un id pour l'appeler au lieu de la classe .accordion-me, ce qui économisera un peu de frais généraux. Si vous avez toujours besoin d'utiliser une classe pour l'appeler, placez une balise html avant, c'est-à-dire div.accordion-me.