9514

jQuery UI Sortable with Laravel will not submit

Question:

After a lot of trial and error I finally got a sortable list to allow you to drag and drop to resort, but I cannot get the list to save.

My guess is that it is an issue with the JS portion of the code, because from what it looks like, the controller never gets called. And if I had something wrong with how I called the controller but it still attempted then Laravel would throw an error.

The answer is probably really simple, but I don't know much about Jquery or Ajax so I couldn't spot the problem.

Here is my code:

<strong>View</strong>

<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>

<strong>JS</strong> After using "view source" I can see that the URL did generate correctly, so that should be good.

<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>

<strong>Controller</strong>

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); }

<strong>Route</strong>

Route::post('{slug}/orderDepartment', ['as' => 'chapter.departmentSort', 'uses' => 'SerenityController@departmentSort']);

<strong>ANSWER</strong>

Thanks to Josh I was able to understand this, and with just a little more searching I got it to work! The $.ajax didn't work, and the console showed nothing for that, but I swapped it out for $.post and it works like a champ.

$.post("{{ URL::route('chapter.departmentSort', $chapter->slug) }}", { order: order } );

Now the only problem is that the drag & drop doesn't work on ipad...

Answer1:

there's a few things wrong with your code I can see here - I'll try my best to set you on the right path:

Firstly in your view your li tag needs to have a data-order="" attribute containing the department id e.g.

<li data-id="{{ $department->id }}">{{ $department->name }}</li>

This is so your JS can get and use this data at:

return $(this).data("id");

Secondly where 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 so:

data: {order: order},

And finally I would suggest you use the Google Chrome Javascript console to debug your javascript. It has good error reporting - just press Option+CMD+J on a Mac (I assume the Windows equivalent is Alt+Ctrl+J)

Recommend

  • MySql how to compare this years month to last years month?
  • SQL statement, subquery count?
  • How to create and populate a nested ViewModel well
  • how to keep many to many relationships in sync with nhibernate?
  • Unmarshalling works incorrectly: javax.xml.bind.UnmarshalException: unexpected element
  • Selecting multiple elements with Selenium
  • Compare a column between 2 csv files and write differences using Python
  • How create references between elements in XML
  • href inside href [duplicate]
  • Root element minOccurs or maxOccurs
  • ASPNetCore MVC Routing Let Server Handle Specific Route
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • Extract All Possible Paths from Expression-Tree and evaluate them to hold TRUE
  • Laravel 4 routing not working due to .htaccess file?
  • Iron Router: How do I send data to the layout?
  • Can I have a variable number of URI parameters or key-value pairs in Laravel 4?
  • XSLT foreach repeating nodes to flat
  • List images(01.png) and descriptions(01.txt) from directory
  • Simulate click Geckofx vb,net
  • How does document.ready work with angular element directives?
  • gspread or such: help me get cell coordinates (not value)
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • D3 nodes and links from JSON with nested arrays of children
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How reduce the height of an mschart by breaking up the y-axis
  • HTML download movie download link
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Web-crawler for facebook in python
  • align graphs with different xlab
  • Circular dependency while pushing http interceptor
  • AngularJs get employee from factory
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once