没有 HTML 表单的 Laravel 5 AJAX 排序顺序数据（jQuery Sortable）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29067219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5 AJAX Sort Order data (jQuery Sortable) with no HTML form
提问by no.
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 .sortablefor 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.
我将尝试使用 Laravel 5 在我的新网站的帮助中心内为每篇文章存储排序顺序，但在使其正常工作时遇到了一些麻烦。我正在使用 jQuery UI.sortable来排列页面上的元素，并且由于整个站点中将有多个部分可以对区域进行排序，因此我的 jQuery 脚本是以一种“一个脚本用于所有”目的的方式构建的。因此使用data-*属性和路由名称引用。
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
AdminHelpCenterArticleController.php
public function sortOrder($category_id, $section_id)
{
/* Return ------------------------------------- */
return [
'category_id' => $category_id,
'section_id' => $section_id
];
}
show.blade.php (Admin Article Listing)
show.blade.php（管理文章列表）
<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)
scripts.js（包括 CSRF 令牌_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 datamap to the controller to use it.
到目前为止，一切都在控制台中的返回响应方面工作，即Object {category_id: "1", section_id: "1"}. 但是无论我尝试什么，我似乎都无法将data地图传递给控制器来使用它。
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 $dataparameter to the sortOrder()method, I've tried Input::all()and Request::allbut it all returns errors (I'm guessing cause it's not an actual form?).
我尝试了很多猜测，因为我在 Laravel 5 的任何地方都找不到关于 AJAX 的一个像样的教程，并且我尝试了诸如向方法添加$data参数之类的事情sortOrder()，我已经尝试过Input::all()，Request::all但它都返回错误（我我猜是因为它不是一个实际的形式？）。
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 HelpCentreArticlemodel and a HelpCentreArticleRequestrequest too, here's some of the code from each file in case they are also needed:
我可能应该注意到，我也有一个HelpCentreArticle模型和一个HelpCentreArticleRequest请求，这里是每个文件中的一些代码，以防万一它们也需要：
HelpCentreArticle.php
帮助中心文章.php
class HelpCentreArticle extends Model {
protected $fillable = [
'category_id',
'section_id',
'title',
'content',
'excerpt',
'is_visible',
'sort_order',
'created_by',
'updated_by',
];
}
HelpCentreArticleRequest.php
帮助中心文章请求.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 $requestas 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.
我不确定是否需要添加HelpCentreSectionRequest $request作为方法的最后一个参数sortOrder()，所以我可以使用$request->all()但它只是422 (Unprocessable Entity)在控制台日志中返回一个。
采纳答案by no.
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.
所以看起来正确的方法是使用Input::get('id_array');而不是$_POST['id_array'];，我试过，但是当我最初尝试这个时，我没有包括use Input;在我的控制器的顶部，因为我认为这已经可以访问了，但事实并非如此。
Adding use Input;, and using Input::get();is now working as expected.
添加use Input;, 和 usingInput::get();现在按预期工作。
Here is the updated code:
这是更新后的代码：
AdminHelpCentreArticleController.php
AdminHelpCenterArticleController.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 successfor an if elsestatement in your jQuery to manipulate the page.
然后，您显然可以访问jQuery 中success的if else语句来操作页面。
回答by Pavel Berka
My implementation of UI sortable with Laravel
我使用 Laravel 实现可排序的 UI
index.blade.php
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
脚本.js
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
AjaxController.php
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();
}
