使用 Ajax 定义按钮操作的路由

Question

您好，我已经使用 Laravel 数据表创建了 CRUD 界面。我也加入了一个行动专栏。如下

    public function getJobs()
    {
        return datatables()->of(Jobs::latest()->get())
            ->addColumn('action', function ($jobs) {
                $button = '<div class="btn-group btn-group-xs">';
                $button .= '<button type="button" name="edit" id="' . $jobs->id . '" class="btn btn-primary btn-xs"><i class="fa fa-edit fa-fw"></i>&nbsp;Edit</button>';
                $button .= '<button type="button" name="delete" id="' . $jobs->id . '" class="btn btn-danger btn-xs"><i class="fas fa-trash-alt"></i>&nbsp;Delete</button>';
                $button .= '</div>';
                return $button;
            })
            ->rawColumns(['action'])
            ->make(true);
    }

此代码运行良好，但现在我想使用 ajax 为这些按钮添加编辑和删除路由。我不能使用模型，因为这些表单有太多数据需要编辑，因此我使用单独的刀片文件来编辑数据。

我的路线：

Route::resource('jobs', 'JobsController');
Route::get('/jobs/destroy/', 'JobsController@destroy');

我的删除模型框：

<div id="confirmModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Confirmation</h2>
            </div>
            <div class="modal-body">
                <h4 align="center" style="margin:0;">Are you sure you want to remove this job?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

我的删除按钮的ajax代码：

    $(document).on('click', '.delete', function(){
            var job_id = $(this).attr('id');
            $('#confirmModal').modal('show');
    });

    $('#ok_button').click(function(){
        $.ajax({
            url:"/jobs/destroy/"+job_id,
                beforeSend:function(){
                    $('#ok_button').text('Deleting...');
                },

            success:function(data)
            {
                setTimeout(function(){
                    $('#confirmModal').modal('hide');
                    $('#jobsTable').DataTable().ajax.reload();
                }, 2000);
            }
        })
    });

我想知道如何为这些编辑和删除按钮分配路线。

Answer 1

Add route on click of button ajax like

$button .= '<button type="button" name="delete" id="' . $jobs->id . '" 
class="btn btn-danger btn-xs deleteButton"><i class="fas fa-trash-alt"> 
</i>&nbsp;Delete</button>';$button .= '</div>';

$(".deleteButton").on('click', function(event){
var Id = $(this).attr('id');  
/* add route name */
 var ajax_url = '/deleteJobs/'+Id; 
 $.ajax({

        url: ajax_url,
        type: "GET", 
        success: function (data) {
            table.draw();
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

  /* Route */
  Route::get('/deleteJobs/{id}', 'appearQuiz@deleteJobs');

  also, you can get the reference from this URL
   https://itsolutionstuff.com/post/laravel-58-ajax-crud-tutorial-using-datatable-jsexample.html

Answer 2

你已经为你的 ajax 上的删除按钮定义了路由是“/jobs/destroy/”。所以在 web.php 中的路由变成了 Route::get('/jobs/destroy/{id}', 'appearQuiz@deleteJobs');

对于打开模型框https://vegibit.com/bootstrap-modal-form-examples/ 通过单击编辑按钮打开一个模型，然后单击确定按钮调用 ajax，其中作业/销毁路由调用。

Answer 3

经过这么多麻烦，我找到了我的代码的问题：

1. JS rabble- 我在布局刀片和索引刀片中加载了很多不必要的 JS 脚本。我将唯一的一个 JS min 加载到我的布局文件中，然后它开始触发 ajax 函数。

2. Ajax 函数错误 - 我的 Ajax 代码缺少某些内容。例如：X-CSRF 设置等。

下面是我的工作代码：

控制器

    public function getJobs()
    {
        return datatables()->of(Jobs::latest()->get())
            ->addColumn('action', function ($jobs) {
                $button = '<div class="btn-group btn-group-xs">';
                $button .= '<a href="/jobs/' . $jobs->id . '/edit" class="btn btn-primary btn-xs"><i class="fa fa-edit fa-fw"></i>&nbsp;Edit</a>';
                $button .= '<button type="button" name="deleteButton" id="' . $jobs->id . '" class="btn btn-danger btn-xs deleteButton"><i class="fas fa-trash-alt"></i>&nbsp;Delete</button>';
                $button .= '</div>';
                return $button;
            })
            ->rawColumns(['action'])
            ->make(true);
    }

    public function destroy($id)
    {
        Jobs::find($id)->delete();
    }

Index.blade.php

<div id="deleteModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Confirmation</h2>
            </div>
            <div class="modal-body">
                <h4 align="center" style="margin:0;">Are you sure you want to remove this job?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Ajax 脚本

var job_id;

    // Delete action
    $(document).on('click', '.deleteButton', function(){
        job_id = $(this).attr('id');
        $('#deleteModal').modal('show');
    });

    $('#ok_button').click(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'DELETE',
            url:"/jobs/destroy/" + job_id,
        });
            $.ajax({
                beforeSend:function(){
                    $('#ok_button').text('Deleting...');
                },
            success:function(data)
            {
                setTimeout(function(){
                    $('#deleteModal').modal('hide');
                    $('#jobsTable').DataTable().ajax.reload();
                }, 1000);
            }
        });
    });


});

感谢大家提供的建议和指点。对调试这段代码有很大帮助。