jQuery Serialize List Plugin

During several recent projects I needed the ability to serialize an unordered list and pass it back to the server. A google search didn’t reveal much and I didn’t want to go digging this functionality out of larger plugins like sortable, UI, etc.

I decided to wrap it all up into a jQuery plugin so that it’s easier to use in different projects. The serialized un/ordered list may be sent back to the server, and for example in PHP, will be interpreted as an array.

You may use this plugin by simply calling it on your UL or OL.

$(document).ready(function(){
    $('ul').serializelist();
});

You may download the most recent version directly from github:

http://github.com/botskonet/jquery.serialize-list

No related posts.

9 Comments »

  1. This is fantastic, but with the string your plugin provides, how to do you handle that in the backend to insert the ordering in the database?

    Comment by Brett — May 19, 2010 @ 8:04 pm

  2. I’m using PHP on the backend which will properly convert the parameters into an array which I can then use internally. If your backend language doesn’t automatically convert that into a usable object or array, I’m sure there are code samples out there. Once it’s converted into an array, it’s just a matter of iterating over those elements.

    Comment by Michael Botsko — May 20, 2010 @ 7:01 am

  3. Do you think you could post a snippet of the PHP you are using to convert this into a standard array?

    PHP just outputs a huge string like
    &ul[0][id]=page_2&ul[0][class]=&ul[1][id]=page_4&ul[1][class]=sitemap_liOpen&ul[1][children][0][id]

    Thanks!

    Comment by Ryan — September 13, 2010 @ 8:00 am

  4. Nevermind. After some researching found
    parse_str($_POST['sort_page'], $unserialized);
    Printing the $unserialized gives me the array.

    Thanks!

    Comment by Ryan — September 13, 2010 @ 8:07 am

  5. Why not just use the unserialize function itself?

    Comment by Michael Botsko — September 15, 2010 @ 7:34 am

  6. or if you need to serialize nested lists, you might want to give http://plugins.jquery.com/project/serializeTree a try

    Comment by DrakeData — October 2, 2010 @ 1:20 am

  7. A small bug found in this plugin, the line where your recursive call the serializelist function to append the children to the serialized string.

    line nr 46 (currently):
    serialStr += $(this).serializelist({‘prepend’: child_base, ‘is_child’: true});

    line nr 46 (should be):
    serialStr += $(this).serializelist({‘prepend’: child_base, ‘is_child’: true, ‘attributes’:opts.attributes});

    Comment by MGiesbers — December 20, 2010 @ 3:28 am

  8. Thanks! A fix has been pushed to github.

    Comment by Michael Botsko — December 20, 2010 @ 9:31 am

  9. It’s a pity, that when you have a LI item, you cannot nest another LI into it, probably a disadvantage of sortable() right?

    Comment by FAk — February 6, 2011 @ 12:23 am

RSS feed for comments on this post. TrackBack URL

Leave a comment