[FIXED] How can I implement AJAX for draggable columns in Laravel

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)