Multiple POST Optimization via Ajax

Navigation
1

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

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

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

My main doubts are:

  • How can I send the updated indexes in one post, easing the 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 infos 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');
                }
            });
        });
    }
});

link

    
asked by anonymous 18.02.2014 / 19:49

1 answer

1

To have only one POST, use the .ajaxSuccess and trigger the 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 that does to insert into the DB, the only way I see would be to send a json with all the values and then make a function using the .extract_json_value (if it's MySql).

As you are using Eloquent, I do not know if it would be nice to use function ... but I do not see another way out.

Q: I did not test anything ... it's just a suggestion.

    
18.02.2014 / 22:59
Widget layout is not working [closed] Google Maps Coordinates through a Widget on a website