Как я могу реализовать AJAX для перетаскиваемых столбцов в Laravel

Question

Как я могу реализовать AJAX для перетаскиваемых столбцов в Laravel

Я реализовал перетаскиваемую функциональность в столбцах таблицы, используя jQuery Sortable в Laravel. Теперь я хочу обновить базу данных, которая использует данные в этих столбцах, используя AJAX.

Я пытаюсь просмотреть ресурсы онлайн, но все еще не могу понять, как поступить с тем же.

Ниже приведен код, который я реализовал до сих пор:

<!-- View(blade template) -->
<table id="sort1">
<thead>
<tr>
@foreach($tasks as $status => $task)
<td id="{{$status}}"><strong>{{$status}}</strong><br><br>
<table id="sort" style="table-layout: fixed;width: 180px;">
<tr>
<td id="{{$status}}" style="table-layout: fixed; background-color: Cornsilk  ; ">Drop the task here</td>
</tr>
</table>
@foreach($task as $key => $list)
<table id="sort" style="table-layout: fixed;width: 180px;">
<tr>
<td id="" {{$list[ '_id']}} style="table-layout: fixed; background-color: Cornsilk  ; ">
Summary:{{$list['summary']}}<br>
Milestone ID:{{$list['projectID']}}<br>
Assignee:{{$list['assignee']}}<br>
Priority:{{$list['priority']}}<br>
<label id="{{$list['_id']}}" style="display:none;">{{$list['_id']}}</label>
</td>
</tr>
</table>
@endforeach
</td>
@endforeach
</tr>
</thead>
</table>

$(function() {
$("table #sort").sortable({
tolerance: "intersect",
connectWith: "table #sort",
dropOnEmpty: "true"}).disableSelection();
});

$("table #sort").sortable({
start: function(event, ui) {
var line = ui.item.closest('td').text();
var new_status = line.split('\n')[0];
console.log(new_status);
}
});

$(function() {
$("table #sort").sortable({
receive: function(event, ui) {
var line = ui.item.closest('td').text();
var new_status = line.split('\n')[0];
console.log(new_status);
var objid = ui.item.find('label').html()
console.log(objid);
}
});
});

Что в основном должно произойти, так это то, что как только заданное значение перетаскивается из одного столбца в другой, заголовок таблицы сохраняется как статус этих конкретных данных.

Прямо сейчас я могу получить как заголовки таблиц (исходный и тот, где отбрасываются данные), так и id данных. Теперь мне нужно предоставить идентификатор и сохранить новый статус, используя эту id,

Есть ли способ, которым я могу сделать это с помощью AJAX в Laravel? Базового рабочего примера любых других ссылок, которые могли бы помочь мне начать, было бы более чем достаточно.

0

ajax javascript jquery laravel php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я не использовал сортировку jQuery раньше. Но то, что вы можете сделать, это внутри функции, которая слушает события перетаскивания, я предполагаю, что это:

  $("table #sort").sortable({
receive: function(event, ui) {
var line = ui.item.closest('td').text();
var new_status = line.split('\n')[0];
console.log(new_status);
var objid = ui.item.find('label').html()
console.log(objid);
}
});

Затем вы можете добавить в него ajax-функцию, например:

  $("table #sort").sortable({
receive: function(event, ui) {
var line = ui.item.closest('td').text();
var new_status = line.split('\n')[0];
console.log(new_status);
var objid = ui.item.find('label').html()
console.log(objid);
$.ajax({
url: 'new/status', //create a route that points to controller to  save new status
data: {objid, new_status},
method: 'post',
success: function(data){
alert("success")
},
error: function(data){
alert("fail")
}
});
}
});

1