making a POST with items in a container with jquery

Question

Hello im using the droppable example of jquery-ui to get my items in a trash container like the example does.

Now the example finish with the droppable success into the trash container. But now i would want to send with a post request this list of items, in other words, i would like to continue with the natural process of example, that is to communicate the list of trashed items to the server.

I dont know how to put that in a form input or something, maybe in json?

Thanks in advance

Answer 1

I am a fan of ajaxForm so I would do it like this. Let's say your trash can container has an id of "trashCan" and each thing you dropped in it knows what its id is, and stores it in a custom attribute. And you have a button with an id of "emptyTrash".

<div id="trashCan">
    <div class="foo" data-id="7">bar</div>
</div>

Then I would use a script like the following to gather up all the ids and post them to a delete controller on the server. NOTE: this assumes that everything you drop in the Trash is the same type.

$('#emptyTrash').click(function() {
    // get the list of ids
    var data = {
        'ids' : 
    };
    var ids = [];
    $('div', '#trashCan').each(function(i) {
        ids.[i] = $(this).attr('data-id');
    });

    $('#someElement').ajaxSubmit({
        url: 'emptyTrash',
        type: 'post',
        data: { 'ids': ids },
        success: function(responseText) {
            $('#message-container').html(responseText);
        },
        error: function(xhr) {
            $('#message-container').html(xhr.responseText).addClass('error');
        }
    });
});