CODEWITHSUNDEEP
jqueryjquery-ui-sortable
ngplayground
ngplayground

Reputation: 21617

jQuery sortable (an empty string)

html

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li data-id="36" data-oid="0" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li data-id="37" data-oid="1" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

jquery

$( "#user-stream-list" ).sortable({
        update : function () {
            var order = $('#user-stream-list').sortable('serialize');
            console.log(order);
            //$("#info").load("process-sortable.php?"+order);
        }
    });

DB

 id     uid     oid     cname 
 20     36       0      Tech Crunch
 21     37       1      Apple

When I rearrange the following my console.log() returns (an empty string) I'm clueless with why its not showing anything. jsFiddle

Im trying to pass the data-id and data-oid so that in php i can tie up the two for processing to my database.

Upvotes: 0

Views: 1377

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It is because the id's of the elements does not follow the required format, the id should have two parts separated by an underscore, equal sign or hyphen

From Docs

Note: If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".

ex

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li id="o_36" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li id="o_37" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

Demo: Fiddle

Based on the update

I think it will be better to use the toArray option here

$("#user-stream-list").sortable({
    update: function () {
        var ids = $(this).sortable('toArray', {
            attribute : 'data-id'
        });
        console.log(ids);
        var oids = $(this).sortable('toArray', {
            attribute : 'data-oid'
        });
        console.log(oids);
        //$("#info").load("process-sortable.php?"+order);
    }
});

Demo: Fiddle

Upvotes: 2

Related Questions