Question

I am currently using id values in div tags to serialize, i.e:

HTML:

<div class="column">
    <div id="portlet_1">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_3">some content here</div>
</div>

jQuery:

$(this).sortable('serialize', {key: 'item'})

That works fine.

The problem is that I need to allow the user to dynamically choose which porlet s/he wants on screen where they can have the same portlet on the screen many times if they want, i.e:

HTML:

<div class="column">
    <div id="portlet_1">some content here</div>
    <div id="portlet_1">some content here</div>
    <div id="portlet_1">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_2">some content here</div>
    <div id="portlet_3">some content here</div>
</div>

This causes a lot of issues because of the identical ids.

Now that I have changed the structure to use classes instead of ids, i.e:

HTML:

<div class="column">
    <div class="portlet_1">some content here</div>
    <div class="portlet_1">some content here</div>
    <div class="portlet_1">some content here</div>
    <div class="portlet_2">some content here</div>
    <div class="portlet_2">some content here</div>
    <div class="portlet_3">some content here</div>
</div>

How do I serialize based on the class instead of the id?

Here is a more complete extract of the code which doesn’t working because it serializes based on ids:

jQuery:

$(".column").sortable({
    connectWith: '.column',
    update: function(event, ui) {
        var that = this;

        $.ajax({
            url: 'some web service here',
            type: 'POST',
            data: { strItems:$(that).sortable('serialize', {key: 'item'}) },
            error: function(xhr, status, error) {
                //some error message here
            },
            success: function() {
                //do something on success
            }
        });

    }
});

Sorry, forgot to mention that I am using an old jquery version 1.4.

Answer 1

Try this :

$(this).sortable('serialize', {key: 'item', attribute: 'class'});

jQuery UI 1.8 documentation :

The possible options are: ‘key’ (replaces part1[] with whatever you want), ‘attribute’ (test another attribute than ‘id’) and ‘expression’ (use your own regexp).