JQuery Sortable UI with Laravel won't submit
After a lot of trial and error, I finally got the list sorted so you can drag and drop, but I can't get the list to save.
My guess is that this is a problem with part of the JS code, because because of what it looks like, the controller is never called. And if I had something wrong with the way I called the controller, but it was still trying, then Laravel would throw an error.
The answer is probably very simple, but I don't know much about JQuery or Ajax, so I couldn't spot the problem.
Here is my code:
View
<ul class="sortable" style="list-style-type: none;">
@foreach ($departments as $department)
<li class="row" id="{{ $department->id }}">
<div class="col-xs-9"><span style="color: {{ $department->color }};">{{ $department->name }}</span></div>
<div class="col-xs-3">
<a href="{{ URL::route('chapter.editDepartment', (array($chapter->slug, $department->id))) }}"> EDIT </a>
</div>
</li>
@endforeach
</ul>
JS After using "view source" I see that the url is indeed generating correctly, so it should be fine.
<script>
$('.sortable').sortable().bind('sortupdate', function(e, ui) {
var order = $('ul.sortable li').map(function(){
return $(this).data("id");
}).get();
$.ajax({
type: "POST",
url: "{{ URL::route('chapter.departmentSort', $chapter->slug) }}",
dataType: "json",
data: {order: order, uuid: uuid},
success: function(order){
console.log(order)
}
});
});
</script>
controller
public function departmentSort($chapterSlug)
{
// Get the chapter ID
$chapter = $this->getChapterFromSlug($chapterSlug);
$input = Input::get('order');
$i = 1;
foreach($input as $value) {
$department = Department::find($value);
$department->sort_order = $i;
$department->save();
$i++;
}
return Redirect::route('chapter.chapterDepartments', $chapter->slug);
}
Route
Route::post('{slug}/orderDepartment', ['as' => 'chapter.departmentSort', 'uses' => 'SerenityController@departmentSort']);
ANSWER
Thanks to Josh I was able to figure it out, and with a little searching I got it to work! $ .ajax didn't work and the console didn't show anything for that, but I changed it to $ .post and it works like a champion.
$.post("{{ URL::route('chapter.departmentSort', $chapter->slug) }}", { order: order } );
Now the only problem is that drag and drop doesn't work on ipad ...
source to share
there is something wrong with your code i see here - i will try to get you set the correct path:
First, in your view, your li tag should have a data-order = "" attribute containing the department id, eg.
<li data-id="{{ $department->id }}">{{ $department->name }}</li>
This means that your JS can receive and use this data at:
return $(this).data("id");
Second, where is your JS says:
data: {order: order, uuid: uuid},
You don't have a uuid, so you don't need to submit one, you only need to submit the order like this:
data: {order: order},
And finally, I suggest you use the Google Chrome Javascript Console to debug your javascript. It has good error reporting - just press Option + CMD + J on Mac (I assume the Windows equivalent is Alt + Ctrl + J)
source to share