CODEWITHSUNDEEP
jqueryjquery-ui
Ivo Renkema
Ivo Renkema

Reputation: 2198

.draggable() id is removed from <li> upon dragging/cloning

I was recently forced to upgrade:

(I was forced to upgrade in order to be compatible with the latest version of the Blueimp's jQuery File Upload.)

I have the following code, which worked perfectly under (1.7.1 / 1.8.9)

$( "div.archive li" )
  .draggable({ // make the archive-icons draggable and connect to the album(s)
    connectToSortable:  handleSortable, // ,"#album_45 ul", //
    helper: "clone", // (helper must be set to 'clone' in order to work flawlessly),
    revert: "invalid",
    appendTo: "body"})

and

sortableUL.sortable({
    helper: 'clone',
    appendTo: "body",
    update : function () {
        var serializedSequence = sortableUL.sortable('serialize'); // Fails in jQueryui/1.8.21 !!
        $.ajax({
            url: "/callback/upAlbum",
            type: "post",
            data: serializedSequence,
            success: function(htmlData){
                sortableUL.html(htmlData);
                recursiveSortable(albumID, joPanel); // once the newly ordered zone-album has been read, recurse back to: make list sortable & slidable
            }
        }); // END $.ajax
    } // END update : function ()
});

The above code works fine under the older jQuery and jQueryUI but fails under the new versions. If I downgrade back to the older version, the code will work again (but then my jQuery FileUploader won't work!).

No error messages are generated in the new setup. However, the following scenario plays out:

The draggable list-tems are <li id="icon_1234">. When these are dropped into the .sortable(), they are accepted. Thus, they become a <li> in the .sortable() <ul>. However, at that time the id="icon_1234" becomes removed. Other attributes of the <li> are left in place.

update: In fact the id="icon_1234" becomes removed when the <li> in appended to the <body>, so the .droppable() is apparently not the cause of the problem. However, commenting out the appendTo: option does not change the problem.

Of course, without an id="icon_1234", the newly dropped <li> does not survive the below statement:

var serializedSequence = sortableUL.sortable('serialize');

So, after the update-callback, the newly dropped <li> disappears from the .sortable() list.

I really have no hunch on how to solve this issue...

Upvotes: 2

Views: 994

Answers (2)

Juan Serrats
Juan Serrats

Reputation: 1358

Complementing the answer above by Ivo Renkema, you can use an array push on the key:

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo[]',
  attribute: 'bar'
});

That will produce the array foo[]=1&foo[]=2...

Updated fiddle here

Upvotes: 0

Ivo Renkema
Ivo Renkema

Reputation: 2198

Well, let me share what I found, and the slings and arrows that I endured along the way.

It is my understanding that the jQuery UI gods consider the removal of an id from a draggable when dropped into a sortable to be a feature. It seems that this was introduced somewhere between 1.8.9 and 1.9.2.

The reasoning would be be that one does not want duplicate ID's. If so, the .sortable('serialize') method should not look for the id="" but for some other attribute of the <li>. (However, the serialize method continues to look for id's by default.)

So, here is my work-around. Your list items used to look like so:

<li id="foo_123">

We need to add an attribute to these <li>'s:

<li id="foo_123" bar="foo_123">

Next, we instruct the serialize method to look for the new attribute, rather than the id:

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo',
  attribute: 'bar'
});

This should do the trick. However, in my case there was one more sling/arrow. The serialize method did not produce a properly serialized array. (I don't know why, but I can't afford to lose more time on this feature.) Therefore, I needed to add:

serializedSequence = serializedSequence.replace(/=/g,"[]=");

Update: Here is a fiddle that someone else made for a similar solution.

Hope this helps ...

Upvotes: 2

Related Questions