Multiple POST Optimization via Ajax

Question

I have a small application, and I built it as I got to know Laravel, so nowadays there are things that I see are wrong and I try to adapt to good programming practices and one of the key points are the endless inclusions in db, via ajax.

Good to better understand the structure of the application is as follows:

• The system is a large reference database of text, video, image, url, are entries in a column of the database;
• The system allows a reordering of items, using the function sortable jQueryUI;
• The big question is, I currently have 448 entries (sorted by descending id) and if for example I want to define that the last entry I made, e.g.: #449, is the first to be displayed (in order:0), I need to map and have a post re-mapped all other entries...

My main doubts are:

• How can I submit updated index in one post only, relieving DB?
• How to generate a response after the list is updated?

I will post only the update function and the ajax function, if you need more inputs put here.

//Controller
public
function updateOrdem() {
    $entries = $this->entrada->orderBy('ordem', 'ASC')->get();
    $itemID = Input::get('itemID');
    $itemPos = Input::get('itemPos');
    foreach($entries as $entry) {
        return DB::table('entradas')->where('id', '=', $itemID)->update(array('ordem' => $itemPos));
    }
}

//AJAX
$('#entradas ul').sortable({
    revert: true,
    cancel: "#entradas ul li span, .modal",
    stop: function (e, ui) {
        $.map($(this).find('li'), function (el) {
            var itemID = el.id
            var itemPos = $(el).index();
            console.log('pos' + itemPos);
            console.log('id' + itemID);
            $.ajax({
                type: "POST",
                url: "updateOrdem",
                data: {
                    itemID: itemID,
                    itemPos: itemPos
                },
                dataType: 'html',
                done: function () {
                    console.log('ok');
                }
            });
        });
    }
});

http://laravel.io/bin/MXE8

Answer 1

To have only one POST, use . ajaxSuccess and fire callback through it.

    $(document).ajaxSuccess(function() {

        $('#entradas ul').sortable({
            revert: true,
            cancel: "#entradas ul li span, .modal",
            stop: function (e, ui) {
                $.map($(this).find('li'), function (el) {
                    var itemID = el.id
                    var itemPos = $(el).index();
                    console.log('pos' + itemPos);
                    console.log('id' + itemID);
                    $.ajax({
                        type: "POST",
                        url: "updateOrdem",
                        data: {
                            itemID: itemID,
                            itemPos: itemPos
                        },
                        dataType: 'html',
                        done: function () {
                            console.log('ok');
                        }
                    });
                });
            }
        });
$( ".log" ).text( "O callback dispara aqui: " );
});

Now with respect to the Loop you do to insert in DB, the only way I see would be to send a json with all the values and then do a function using . extract_json_value (if Mysql).

As you are using the Eloquent, I do not know if it would be cool to use Function... but I see no other way out.

P.S.: I haven’t tested anything... it’s just a suggestion.