Issue
I have implemented draggable functionality on table columns using jQuery Sortable in Laravel. I now want to update the database that uses the data in these columns using AJAX.
I am trying to go through resources online but am still not able to understand how to proceed with the same.
Following is the code I have implemented so far:
<!-- 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);
}
});
});
What basically should happen is that once a given value is dragged from one column to the other, the table header gets saved as the status of that particular data.
Right now I am able to retrieve the table headers of both (the original one and the one where the data is being dropped) as well as the id
of the data. I now need to provide the id and save the new status using this id
.
Is there any way I can get this done using AJAX in Laravel? A basic working example of any other references that could help me begin would be more than enough.
Solution
I haven't used jQuery sortable before. But what you can do is inside the function that listens drag events, I'm assuming it's:
$("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);
}
});
You can then add an ajax function inside it like:
$("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")
}
});
}
});
Answered By - Muhammad Adistya Azhar Answer Checked By - Pedro (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.