6

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.

4
  • what $_POST['id_array'] prints? Commented Mar 16, 2015 at 5:24
  • @itachi I did end up using $_POST to fetch the array, and it seems to be working, it just doesn't seem like the correct approach to use for the Laravel framework, since you usual use request/response/input to obtain post data in Laravel. Commented Mar 16, 2015 at 11:50
  • There is too much code your question that are not needed. I guess the question is, you're trying to send the data-* values using ajax post but you're not receiving it ? you're sending the data as id_array: data in y our controller the data array could be retrieved as Input::get('id_array') Commented Mar 17, 2015 at 8:44
  • I don't particularly see how it's too much code, covering every aspect I think is good logic. But that aside, using Input::get(); was the correct way, as I tried previously, except I wasn't include use Input; in the controller. I've added this as an answer. Thanks for your replies, it's appreciated. Commented Mar 17, 2015 at 23:08

2 Answers 2

4

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.

Sign up to request clarification or add additional context in comments.

Comments

0

My implementation of UI sortable with Laravel

index.blade.php

...
@foreach($photos as $photo)
<tr data-sortable="{{ $photo->pivot->position }}" data-id="{{ $restaurant->id }}" data-photo-id="{{ $photo->pivot->photo_id }}">
    <td>
        <i class="fa fa-sort" aria-hidden="true"></i>
    </td>
...
</tr>
@endforeach
<script type="text/javascript">
$("#sortable-ui tbody").sortable({
    helper: fixHelper,
    update: function(event, ui) {
        $("#sortable-ui tbody tr").each(function(index){
            console.log($(this).data('id')+', '+(index+1));
            $.ajax({
                url: '{{ route('owner.photo.update.position') }}',
                type: 'POST',
                data: 'restaurant_id='+$(this).data('id')+'&photo_id='+$(this).data('photo-id')+'&position='+(index+1)
            })
            .done(function (response) {
                console.log(response);
            })
            .fail(function (jqXhr) {
                console.log(jqXhr);
            });
        });
    }
}).disableSelection();
</script>

scripts.js

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

AjaxController.php

public function updatePhotoPosition(Request $request)
{
    $restaurant = $this->restaurantRepository->getById($request->get('restaurant_id'));
    $photoId = $request->get('photo_id');
    $photo = $restaurant
        ->photos()
        ->wherePivot('photo_id', $photoId)
        ->first();

    $photo->pivot->position = $request->get('position');
    $photo->pivot->save();
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.