为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 SortableJS for jQuery 和 AJAX 更改类别的订单 ID?

如何使用 SortableJS for jQuery 和 AJAX 更改类别的订单 ID?

HUH函数 2021-08-26 16:40:58
我正在尝试将这个名为SortableJS 的JavaScript 库与 jQuery 和jQuery SortableJS一起使用。我有前端功能工作,但我的问题是试图让它与 AJAX 请求成功工作。我添加console.log('test')以查看是否可以从 AJAX 请求中获得任何结果,但没有显示任何结果。这也让我相信我的问题与 AJAX 有关。JavaScript<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script><script>$(document).ready(function(){    $("#sortable-cards").sortable({        animation: 350,        easing: "cubic-bezier(1, 0, 0, 1)",        stop: function() {            $.map($(this).find('.col-lg-4'), function(el) {                var id = el.id;                var order = $(el).index();                $.ajax({                    url: '{{route('manage.orderCategories')}}',                    type: 'POST',                    data: {                        id: id,                        order: order                    },                });            });        }    });});<script>我的刀片文件中的可排序卡片 Div<div id="sortable-cards" class="row justify-content-center">    @foreach($categories as $category)    <div id="{{$category->order}}" class="col-lg-4 col-12 mt-4">        <div class="card shadow">            <div class="card-body">                <h3>{{$category->name}}                <p class="text-muted">{{$category->description}}<p>                ID: {{$category->id}}<br>                Order: {{$category->order}}<br>            </div>        </div>    </div>    @endforeach</div>路线Route::post('categories/orderCategories', 'Manage\ManageCategoriesController@orderCategories')->name('orderCategories');控制器public function orderCategories(){    $categories = Category::orderBy('order', 'ASC')->get();    $id = Input::get('id');    $order = Input::get('order');    foreach ($categories as $item) {        return Category::where('id', '=', $id)->update(array('order' => $order));    }}预期的结果是当一个可排序的卡片被移动时,它会向控制器发送一个 AJAX 请求并更新数据库中的“订单”列。就像我之前提到的,前端功能运行良好,并且没有出现错误消息。如果您需要更多信息,请告诉我。感谢您的帮助
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 153 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信