Given the Following List (UL), how can it be serialized and sent to the Database

Question

I have the follow structure which is created with a nested sortable:

<UL id="container">
    <LI id="main1">
        <input type="checkbox" />
        Lorem ipsum dolor sit amet, consectetur 
        <UL>
            <LI id="child2">
                <input type="checkbox" />
                In hac habitasse platea dictumst. 
                <UL></UL>
            </LI>
        </UL>
    </LI>
    <LI id="main3">
        <input type="checkbox" />
        In hac habitasse platea dictumst. 
        <UL></UL>
    </LI>
    <LI id="main4">
        <input type="checkbox" />
        In hac habitasse platea dictumst. 
        <UL></UL>
    </LI>
    <LI id="main5">
        <input type="checkbox" />
        In hac habitasse platea dictumst. 
        <UL></UL>
    </LI>
</UL>

Where I'm stuck is how to send this back to the database. I'm guessing that it needs to be serialized, does that sound right too? I'm open for suggestions on how to best store the ordering in the db in a way that has each list item as it's on record.

I'm a little lost at this point and appreciate any tips to move me in the right direction.

Thanks,

B

Answer 1

If you wrap your lists in a form element and then give all of your checkboxes name attributes, you can use the jQuery $.serialize method:

$.post('/url/to/send/', $('#myForm').serialize(), function(){//callback});

Answer 2

If the question is literally "how can I display this list in the future?" (i.e. this exact same html) I'd suggest a templating engine (choices will depend on your server-side language).
Now if the question if "how do I get the values of the checkboxes into the appropriate database fields?" then you'll probably want to use jquery's :checkbox css selector syntax to get all the checkboxes and then get their values from that. Or you could throw form tags around the whole thing and do a bunch of processing server-side (not pretty).

EDIT: After looking at your comments on Jason's answer, it occurs to me that you could select all the checkboxes and all the <ul>'s of a particular <ul>. Obviously, you'll need to do this recursively, but it should give you something (an array of some kind) that you can recreate the tree from.