javascript - Send multiple field arrays via ajax to Laravel 5

904

I need help with saving a drag n drop menu order. I use http://farhadi.ir/projects/html5sortable to drag and update the list. Each menu item has two hidden fields:id andorder. The order is updated dynamically when dropped. I don't know how to turn the fieldsid andorder into a correct array so I can update via AJAX into Laravel.

HTML - Menu :

<div>
  <input name="menu[1][id]" type="hidden" value="1">
  <input name="menu[1][order]" type="hidden" value="3">
</div>
<div>
  <input name="menu[2][id]" type="hidden" value="2">
  <input name="menu[2][order]" type="hidden" value="4">
</div>
<div>
  <input name="menu[3][id]" type="hidden" value="3">
  <input name="menu[3][order]" type="hidden" value="5">
</div>

jQuery - Drag/drop, update order value then send via ajax :

// Sortable options
$('.nav-pages__items').sortable({
    handle: '.nav-pages__drag',
    items: ':not(.home)'
}).bind('sortupdate', function() {

    // When dropped clear list order
    $(this).find('input[name=menu]').attr('value', '');
    // Then update list order
    $('.nav-pages__items li:not(.home)').each(function(i, element) {
        element = i+1;
        $(this).find('input.new-order').attr('value'),
            $(this).find('input.new-order').attr('value', + element);
    });

    // !! Somehow create array to send/save !!

    // Ajax to send
    $.post('/menu-update', {
        _token: token,
        id: id,
        order: order
    }, function(data) {
        if (data.status == 'success') {
            console.log('success: ', data);
        } else if (data.error == 'error') {
            console.log('error: ', data);
        };
    });

});

PHP/Laravel - Not got this far (without errors):

public function update()
{
    $menu = Input::all();

    $save = Page::where('id', $menu['id'])->update([
        'order' => $menu['order']
    ]);

    if ($save) {
        $response = [
            'status' => 'success',
            'msg' => 'Message here',
            'id' => $menu['id'],
            'order' => $menu['order'],
        ];
    };

    return Response::json($response);
}

To summarise:

  1. Get theid andorder for each field group
  2. Loop though them in js and crate correct array
  3. Send array to Laravel and updateorder based onid

Also, if there's a much simpler way to do this, I'm all ears.

80

Answer

Solution:

I don't believe you need those hidden inputs -- what about something like:

jQuery:

// Sortable options
$('.nav-pages__items').sortable({
    handle: '.nav-pages__drag',
    items: ':not(.home)'
}).bind('sortupdate', function() {

    // Collect the new orderings
    var newOrders = [];
    $('.nav-pages__items li:not(.home)').each(function(i, element) {
        var id = $(element).data('id'); // Set a data-id attribute on each li
        var order = i;
        newOrders[order] = id;
    });

    // Ajax to send
    $.post('/menu-update', {
        _token: token,
        newOrders: newOrders
    }, function(data) {
        if (data.status == 'success') {
            console.log('success: ', data);
        } else if (data.error == 'error') {
            console.log('error: ', data);
        };
    });

});

PHP/Laravel:

public function update()
{
    $responses = [];
    foreach (Input::get('newOrders') AS $order => $id) {
        $save = Page::where('id', $id)->update([
            'order' => $order
        ]);

        if ($save) {
            $response[$id] = [
                'status' => 'success',
                'msg' => 'Message here',
                'id' => $id,
                'order' => $order,
            ];
        }

    }


    return Response::json($responses);
}

People are also looking for solutions to the problem: php - MYSQL - Timeclock Count Hours In/Out for each day of current week

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.