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

Question

Я реализовал перетаскиваемую функциональность в столбцах таблицы, используя 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? Базового рабочего примера любых других ссылок, которые могли бы помочь мне начать, было бы более чем достаточно.

Answer 1

Я раньше не использовал сортировку 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")
            }
          });
        }
      });