Laravel 5 AJAX Sort Order data (jQuery Sortable) with no HTML form

Question

I'm to trying to store a sort order to each article within a help centre for my new site using Laravel 5 and having a bit of trouble getting it to work. I'm using jQuery UI's .sortable for arranging the elements on the page, and since there are going to be multiple sections throughout the site where areas are sortable, my jQuery script is built in a way for a 'one script for all' purposes. Hence the use of data-* attributes and route name references.

Here is the code I've got so far:

routes.php

Route::post('admin/help-centre/category/{category_id}/section/{section_id}/article/sort-order', 'AdminHelpCentreArticleController@sortOrder');

AdminHelpCentreArticleController.php

public function sortOrder($category_id, $section_id)
{
    /* Return ------------------------------------- */
        return [
            'category_id' => $category_id,
            'section_id' => $section_id
        ];
}

show.blade.php (Admin Article Listing)

<ul id="help-center-articles-sort" class="sortable">
    @foreach ($helpCentreArticles as $helpCentreArticle)
        <li class="sortable-element" data-sortable-element-id="{{ $helpCentreArticle->id }}">
            <a href="{{ action('AdminHelpCentreArticleController@show', array($helpCentreCategory->id, $helpCentreSection->id, $helpCentreArticle->id)) }}" target="_self">{{ $helpCentreArticle->title }}</a>
        </li>
    @endforeach
</ul>

<a href="{{ $helpCentreSection->id }}/article/sort-order" target="_self" class="button bm-remove w-full sortable-save" data-sortable-id="help-center-articles-sort">Save Order</a>

scripts.js (includes CSRF Token _token)

var csrfToken = $('meta[name="csrf-token"]').attr('content');

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    if (options.type.toLowerCase() === 'post')
    {
        options.data += options.data?'&':''; // add leading ampersand if `data` is non-empty
        options.data += '_token=' + csrfToken; // add _token entry
    }
});

$(document).ready(function() {
    $('.sortable').sortable();

    $('.sortable-save').on('click', function(e) {
        e.preventDefault();

        var route = $(this).attr('href'),
            sortableID = $(this).attr('data-sortable-id');

        var data = $('#' + sortableID + ' .sortable-element').map(function() { 
            return $(this).attr('data-sortable-element-id');
        }).get();

        $.ajax({
            type: 'POST',
            url: route,
            dataType: 'json',
            data: { id_array: data },
            success: function(data) {
                console.log(data);
            }, error: function(data) {
                console.log(data);
            },
        });
    });
});

Everything so far is working in terms of the return response in the console, which is Object {category_id: "1", section_id: "1"}. But no matter what I try, I cannot seem to pass through the data map to the controller to use it.

I've tried a bunch of guesswork since I cannot find a single decent tutorial on AJAX in Laravel 5 anywhere, and I've tried things such as adding a $data parameter to the sortOrder() method, I've tried Input::all() and Request::all but it all returns errors (I'm guessing cause it's not an actual form?).

Once I've got the data to be passed through to the controller I'll be able to save the sort order to the database easily enough. But I can't quite get to that stage, any ideas?

EDIT

I should probably note that I do have a HelpCentreArticle model and a HelpCentreArticleRequest request too, here's some of the code from each file in case they are also needed:

HelpCentreArticle.php

class HelpCentreArticle extends Model {
    protected $fillable = [
        'category_id',
        'section_id',
        'title',
        'content',
        'excerpt',
        'is_visible',
        'sort_order',
        'created_by',
        'updated_by',
    ];
}

HelpCentreArticleRequest.php

class HelpCentreArticleRequest extends Request {        

    /* Authorization ------------------------------ */
        public function authorize()
        {
            return true;
        }


    /* Validation rules --------------------------- */
        public function rules()
        {
            $rules = [
                'title' => 'required|min:3',
                'content' => 'required|min:10',
            ];

            return $rules;
        }

}

I wasn't sure if I needed to add HelpCentreSectionRequest $request as the last parameter of the sortOrder() method, so I could use $request->all() but it just returns a 422 (Unprocessable Entity) in the console log.

Answer 1

So it appears that the correct way was to use Input::get('id_array'); instead of $_POST['id_array'];, which I tried, but when I originally tried this I wasn't including use Input; at the top of my controller, as I thought this was already accessible, but it wasn't.

Adding use Input;, and using Input::get(); is now working as expected.

Here is the updated code:

AdminHelpCentreArticleController.php

public function sortOrder($category_id, $section_id)
{

    /* Query Select ------------------------------- */
        $helpCentreCategory = HelpCentreCategory::findOrFail($category_id);
        $helpCentreSection = HelpCentreSection::findOrFail($section_id);


    /* Variables ---------------------------------- */
        $id_array = Input::get('id_array');
        $sort_order = 1;


    /* Query Update ------------------------------- */
        foreach($id_array as $id) {
            $helpCentreArticle = HelpCentreArticle::where('id', $id)->first();

            $helpCentreArticle->sort_order = $sort_order;
            $helpCentreArticle->save();

            $sort_order++;
        }


    /* Return ------------------------------------- */
        return ['success' => true];

}

Then you can obviously access success for an if else statement in your jQuery to manipulate the page.