How to submit data with jQuery?

Question

I have a multiple table.sortables with a number of links in each one. Using jQuery I have done the following.

1. Modified each row to add a table cell with a span.grab in it.
2. Implemented jQuery sortable on the tables.
3. When a row is dropped. A link appears asking whether the user would like to save.
4. When the user clicks the link I catch it in preparation to send an ajax request to a php script.

This is where I am stuck.

Each tr has the link id on it..

<tr id="link1"> ..</tr>

Each table has its own id as well.

<table class="sortable" id="group1">

The question is.. how to pull this data from the html so in my PHP script I preferably get something like this.

$_POST['link_order']['group1'] = '1|2|3';
$_POST['link_order']['group2'] = '4|5|6';

Any variation of the above is fine, I can also modify the HTML. I just need to send PHP the menus.

I started with this.

$('table.sortable').each(function() {

});

This is where I got stuck as I didn't know whether the data should go into an object or a string or what. Has anyone done this?

Answer 1

You can use the serialize() method of the sortable widget. According to the documentation:

It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".

You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).

So, if you add an underscore character to your id attributes (link_1 instead of link1), serialize() will generate a $POST['link'] parameter by default.