Tuesday 15 March 2011

javascript - jQuery UI Sortable with Laravel will not submit -



javascript - jQuery UI Sortable with Laravel will not submit -

after lot of trial , error got sortable list allow drag , drop resort, cannot list save.

my guess is issue js portion of code, because looks like, controller never gets called. , if had wrong how called controller still attempted laravel throw error.

the reply simple, don't know much jquery or ajax couldn't spot problem.

here code:

view

<ul class="sortable" style="list-style-type: none;"> @foreach ($departments $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" can see url did generate correctly, should good.

<script> $('.sortable').sortable().bind('sortupdate', function(e, ui) { var order = $('ul.sortable li').map(function(){ homecoming $(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) { // chapter id $chapter = $this->getchapterfromslug($chapterslug); $input = input::get('order'); $i = 1; foreach($input $value) { $department = department::find($value); $department->sort_order = $i; $department->save(); $i++; } homecoming redirect::route('chapter.chapterdepartments', $chapter->slug); }

route

route::post('{slug}/orderdepartment', ['as' => 'chapter.departmentsort', 'uses' => 'serenitycontroller@departmentsort']);

answer

thanks josh able understand this, , little more searching got work! $.ajax didn't work, , console showed nil that, swapped out $.post , works champ.

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

now problem drag & drop doesn't work on ipad...

there's few things wrong code can see here - i'll seek best set on right path:

firstly in view li tag needs have data-order="" attribute containing section id e.g.

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

this js can , utilize info at:

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

secondly js says:

data: {order: order, uuid: uuid},

you don't have uuid don't need submit one, need submit order so:

data: {order: order},

and suggest utilize google chrome javascript console debug javascript. has error reporting - press option+cmd+j on mac (i assume windows equivalent alt+ctrl+j)

javascript php jquery laravel laravel-4

No comments:

Post a Comment