4

I have a problem with the jquery sortable plugin. Indeed, I have items (questions) which use both accordion and sortable.

I use the update event of sortable to show extra content in each question accordion.

But my problem is that after sorting the questions, the accordion of the one I moved opens itself automatically.

Here is a simple example which reproduces the problem : http://jsfiddle.net/JwzH2/1/

Try to sort the questions, and you'll see the accordion opening itself (it might work correctly sometimes, so try again).

Do someone have an idea on how to fix it ?

EDIT : Fosco gave me a partially working solution, but there is still a problem => it does not work on dynamically added elements (see my comments on his answer).

Moreover, I am still astonished seeing the code working without this line : $('.hidden-content', question).show();. Indeed, the event propagation should be the same with and without this line

http://jsfiddle.net/JwzH2/38/

Romain Guidoux
  • 3,784
  • 3
  • 24
  • 45
  • 2
    It happens because in order to sort you have to click... the click handler for the accordion is taking effect once you let go of the element. Happens every time for me... move a closed one, it opens, move an open one, it closes. – Fosco Jun 10 '11 at 17:53

1 Answers1

7

I believe your answer lies here in the sample code from jQuery UI: http://jqueryui.com/demos/accordion/sortable.html

$(function() {
    var stop = false;
    $( "#accordion h3" ).click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });
    $( "#accordion" )
        .accordion({
            header: "> div > h3"
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });
});
</script>

Notice the use of a stop variable, and how it is caught and manipulated by both the sorting mechanism and the click handler.

Edit: I spent a bit of time this morning playing with your dynamic content issue and here's what I came up with. When a new item is added, I destroy and re-set the accordion and the appropriate click handlers. I moved the click handler setup and the accordion setup into functions, and call them initially and when a new item is added. It happens so quick that I don't see any flicker or visual problems, but your mileage may vary. Give it a shot here: http://jsfiddle.net/JwzH2/41/

Fosco
  • 36,451
  • 6
  • 79
  • 100
  • Thanks ;) But do you know why the 'live' method does not work ? `$( "#accordion h3" ).live('click', function( event ) { if ( stop ) { event.stopImmediatePropagation(); event.preventDefault(); stop = false; } });` Indeed, I have to add elements dynamically, so the simple `click()` method does not work for 'post-dom-loaded' elements – Romain Guidoux Jun 10 '11 at 19:00
  • I have tried with `delegate` instead of `live`, but it does not work : http://jsfiddle.net/JwzH2/37/ – Romain Guidoux Jun 10 '11 at 19:35
  • Moreover, there is another thing I don't understand. Why does it work perfectly when I simply comment the line `$('.hidden-content', question).show();` ? The event propagation should be the same.. – Romain Guidoux Jun 10 '11 at 19:56
  • @Romain I edited my answer and posted another fiddle which does what you ask.. let me know if it is acceptable. – Fosco Jun 21 '11 at 13:34