2020年1月3日 15:05:46go评论85阅读模式

英文:

Ajax Error on Datatable using Laravel 5.2

问题

I have a table and showing data and using Datatables Yajra. This datatables is showing data, and all function is OK. But, sometimes error.
我有一个表格，显示数据并使用Datatables Yajra。这个Datatables正常显示数据，所有功能都正常。但是，有时会出现错误。

I am using Laravel 5.2.* and yajra datatable 6.0.*.
我正在使用Laravel 5.2.和yajra datatable 6.0.。

And this is the error notification.
这是错误通知。

This is my js code
这是我的JavaScript代码

This is my slave-variable.blade.php
这是我的slave-variable.blade.php

This is my routes
这是我的路由配置

And the last is my SlaveController.php
最后是我的SlaveController.php

Then, this is the display when code run normally
然后，这是代码正常运行时的显示。

Please help me guys, thank u.
请帮助我，谢谢。

英文:

I have a table and showing data and using Datatables Yajra. This datatables is showing data, and all function is OK. But, sometimes error.
I am using Laravel 5.2.* and yajra datatable 6.0.*.

And this is the error notification.

This is my js code

&lt;!--------------------------------------------&gt;
&lt;!-------------- SLAVE VARIABLE --------------&gt;
&lt;!--------------------------------------------&gt;

&lt;script&gt;
$(document).ready(function() {
    
    $(&#39;#slave-variable-table&#39;).DataTable({
        processing: true,
        serverSide: true,
        ajax: {
                url: &#39;{{ url(&quot;/variable-list/slave-variable/data-slave-variable&quot;) }}&#39;
            },
        columns: [
            { data: &#39;VARIABLE_NAME&#39;, name: &#39;VARIABLE_NAME&#39; },
            { data: &#39;TYPE&#39;, name: &#39;TYPE&#39; },
            { data: &#39;ADDRESS&#39;, name: &#39;ADDRESS&#39; },
            { data: &#39;ACCESS&#39;, name: &#39;ACCESS&#39; },
            { data: &#39;VALUE&#39;, name: &#39;VALUE&#39; },
            { data: &#39;action&#39;, name: &#39;action&#39;, orderable: false, searchable: false},
            { data: &#39;checkbox&#39;, name: &#39;checkbox&#39;, orderable: false, searchable: false},
        ]
    });
    
});
&lt;/script&gt;

&lt;!-- DELETE DATA SLAVE_VARIABLE pada view variable-list/slave-variable --&gt;
&lt;script&gt;
    $(document).on(&#39;click&#39;, &#39;.deleteSlaveVariable&#39;, function() {
        var id = $(this).data(&#39;id-variable&#39;);
        Swal.fire({
            title: &#39;Are you sure to delete this variable?&#39;,
            text: &quot;You won&#39;t be able to revert this!&quot;,
            type: &#39;warning&#39;,
            showCancelButton: true,
            confirmButtonColor: &#39;#0B5EA3&#39;,
            cancelButtonColor: &#39;#E6222C&#39;,
            confirmButtonText: &#39;Delete&#39;
        }).then((result) =&gt; {
            if(result.value) {
                $.ajax({
                    url:&quot;/variable-list/slave-variable/delete/&quot; + id,
                    method:&quot;GET&quot;,
                    data:{id:id},
                    success:function(data)
                    {
                        alert(data);
                        $(&#39;#slave-variable-table&#39;).DataTable().ajax.reload();
                    }
                });
            }
        })
    });

&lt;!-- AJAX CRUD operations --&gt;
    // Edit a slave_variable
    $(document).on(&#39;click&#39;, &#39;.modify-modal&#39;, function() {
        $(&#39;.modal-title&#39;).text(&#39;Modify Data&#39;);
        $(&#39;#id_variable_edit&#39;).val($(this).data(&#39;id-variable&#39;));
        $(&#39;#id_slave_edit&#39;).val($(this).data(&#39;id-slave&#39;));
        $(&#39;#id_slot_edit&#39;).val($(this).data(&#39;id-slot&#39;));
        $(&#39;#variable_name_edit&#39;).val($(this).data(&#39;variable-name&#39;));
        $(&#39;#type_edit&#39;).val($(this).data(&#39;type&#39;));
        $(&#39;#access_edit&#39;).val($(this).data(&#39;access&#39;));
        $(&#39;#address_edit&#39;).val($(this).data(&#39;address&#39;));
        $(&#39;#ModifyModal&#39;).modal(&#39;show&#39;);
    });

    $(document).on(&#39;click&#39;, &#39;#bulk_delete&#39;, function(){
        var id = [];
        if(confirm(&quot;Are you sure you want to Delete this data?&quot;))
        {
            $(&#39;.slave_checkbox:checked&#39;).each(function(){
                id.push($(this).val());
            });
            if(id.length &gt; 0)
            {
                $.ajax({
                    url:&#39;{{ url(&quot;/variable-list/slave-variable/delete-all&quot;)}}&#39;,
                    method:&quot;GET&quot;,
                    data:{id:id},
                    success:function(data)
                    {
                        alert(data);
                        $(&#39;#slave-variable-table&#39;).DataTable().ajax.reload();
                    }
                });
            }
            else
            {
                alert(&quot;Please select atleast one checkbox&quot;);
            }
        }
    });
&lt;/script&gt;

This is my slave-variable.blade.php

&lt;div class=&quot;card-body border-top&quot;&gt;
                                    &lt;h5&gt;Slave&#39;s Variable Data&lt;/h5&gt;
                                        &lt;div class=&quot;table-responsive&quot;&gt;
                                            &lt;table class=&quot;table table-bordered table-hover&quot; id=&quot;slave-variable-table&quot; name=&quot;slave-variable-table&quot;&gt;
                                                &lt;thead class=&quot;bg-light&quot; align=&quot;center&quot;&gt;
                                                    &lt;tr class=&quot;border-1&quot;&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;NAME&lt;/th&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;TYPE&lt;/th&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;ADDRESS&lt;/th&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;ACCESS&lt;/th&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;VALUE&lt;/th&gt;
                                                        &lt;th class=&quot;border-1&quot;&gt;ACTION&lt;/th&gt;
                                                        &lt;th&gt;
                                                            &lt;button type=&quot;button&quot; name=&quot;bulk_delete&quot; id=&quot;bulk_delete&quot; class=&quot;bulk_delete btn btn-danger btn-xs&quot;&gt;X&lt;/button&gt;
                                                        &lt;/th&gt;
                                                    &lt;/tr&gt;
                                                &lt;/thead&gt;
                                            &lt;/table&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

This is my routes


    //Read data from table SLAVE_VARIABLES to view /variable-list/slave-variable
    Route::get(&#39;/variable-list/slave-variable&#39;, &#39;SlaveController@index&#39;);
    Route::get(&#39;/variable-list/slave-variable/data-slave-variable&#39;, &#39;SlaveController@data&#39;);

    //Update data dari table slave_variables
    Route::post(&#39;/variable-list/slave-variable/update&#39;, &#39;SlaveController@update&#39;);

    //Delete data dari table slave_variables
    Route::get(&#39;/variable-list/slave-variable/delete/{ID_VARIABLE}&#39;, &#39;SlaveController@delete&#39;);
    Route::get(&#39;/variable-list/slave-variable/delete-all&#39;, &#39;SlaveController@deleteAll&#39;);

And the las is my SlaveController.php

public function data()
    {
        $SLAVE_VARIABLES = SlaveModel::select(&#39;*&#39;);
        return Datatables::of($SLAVE_VARIABLES)
            -&gt;addColumn(&#39;action&#39;, function($row){
                $btn = &#39;&lt;a href=&quot;javascript:void(0)&quot; data-toggle=&quot;tooltip&quot; 
                    data-id-variable=&quot;&#39;.$row-&gt;ID_VARIABLE.&#39;&quot;
                    data-id-slave=&quot;&#39;.$row-&gt;ID_SLAVE.&#39;&quot;
                    data-id-slot=&quot;&#39;.$row-&gt;ID_SLOT.&#39;&quot;
                    data-variable-name=&quot;&#39;.$row-&gt;VARIABLE_NAME.&#39;&quot;
                    data-type=&quot;&#39;.$row-&gt;TYPE.&#39;&quot;
                    data-address=&quot;&#39;.$row-&gt;ADDRESS.&#39;&quot;
                    data-access=&quot;&#39;.$row-&gt;ACCESS.&#39;&quot;
                    data-original-title=&quot;Modify&quot; class=&quot;edit btn btn-primary btn-sm modify-modal&quot;&gt;Modify&lt;/a&gt;&#39;;
                $btn = $btn.&#39; &lt;a href=&quot;javascript:void(0)&quot; data-toggle=&quot;tooltip&quot; data-id-variable=&quot;&#39;.$row-&gt;ID_VARIABLE.&#39;&quot; data-original-title=&quot;Delete&quot; class=&quot;btn btn-danger btn-sm deleteSlaveVariable&quot;&gt;Delete&lt;/a&gt;&#39;;
                return $btn;
            })
            -&gt;addColumn(&#39;checkbox&#39;, &#39;&lt;input type=&quot;checkbox&quot; name=&quot;slave_checkbox[]&quot; class=&quot;slave_checkbox&quot; value=&quot;{{$ID_VARIABLE}}&quot; /&gt;&#39;)
            -&gt;make(true);
    }
    
public function update(Request $request)
    {
        $ID_VARIABLE = $request-&gt;ID_VARIABLE;
        $ID_SLAVE = $request-&gt;ID_SLAVE;
        $ID_SLOT = $request-&gt;ID_SLOT;
        $VARIABLE_NAME = $request-&gt;VARIABLE_NAME;
        $TYPE = $request-&gt;TYPE;
        $ACCESS = $request-&gt;ACCESS;
        $ADDRESS = $request-&gt;ADDRESS;
        
        $slave_variables=SlaveModel::where(&#39;ID_VARIABLE&#39;,&#39;=&#39;,$ID_VARIABLE)
        -&gt;update([
            &#39;ID_SLAVE&#39;=&gt;$ID_SLAVE,
            &#39;ID_SLOT&#39; =&gt; $ID_SLOT,
            &#39;VARIABLE_NAME&#39; =&gt; $request-&gt;VARIABLE_NAME,
            &#39;TYPE&#39; =&gt; $request-&gt;TYPE,
            &#39;ACCESS&#39; =&gt; $request-&gt;ACCESS,
            &#39;ADDRESS&#39; =&gt; $ADDRESS
            ]);
            
        // alihkan halaman ke halaman /variable-list/slave-variable
        return redirect(&#39;/variable-list/slave-variable&#39;)
        -&gt;with(&#39;update-success&#39;, &#39;Data has ben updated!&#39;);
    }

    /**
     * Remove the specified resource from storage.
    *
    * @param  int  $id
    * @return Response
    */

    public function delete($ID_VARIABLE)
    {
        //memilih id
        $SLAVE_VARIABLE = SlaveModel::where(&#39;ID_VARIABLE&#39;,$ID_VARIABLE);
        if($SLAVE_VARIABLE-&gt;delete())
        {
            echo &#39;Data Deleted&#39;;
        }
    }

    function deleteAll(Request $request)
    {
        $ID_VARIABLES = $request-&gt;input(&#39;id&#39;);
        $SLAVE_VARIABLE = SlaveModel::whereIn(&#39;ID_VARIABLE&#39;, $ID_VARIABLES);
        if($SLAVE_VARIABLE-&gt;delete())
        {
            echo &#39;Data Deleted&#39;;
        }
    }

Then, this is the display when code run normally

Please help me guys, thank u.

答案1

得分: 1

'在你的Ajax代码中添加CSRF令牌和设置请求类型为POST'

'type': 'POST',
'data': function (d) {
    d._token = "{{ csrf_token() }}";
},

$(document).ready(function() {
    $('#slave-variable-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            'url': '{{ url("/variable-list/slave-variable/data-slave-variable") }}',
            'type': 'POST',
            'data': function (d) {
                d._token = "{{ csrf_token() }}";
            },
        },
        columns: [
            { data: 'VARIABLE_NAME', name: 'VARIABLE_NAME' },
            { data: 'TYPE', name: 'TYPE' },
            { data: 'ADDRESS', name: 'ADDRESS' },
            { data: 'ACCESS', name: 'ACCESS' },
            { data: 'VALUE', name: 'VALUE' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
            { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
        ]
    });
});

英文:

add csrf token and type post in your ajax code

&#39;type&#39;: &#39;POST&#39;,
 &#39;data&#39;: function ( d ) {
          			d._token = &quot;{{ csrf_token() }}&quot;;

&lt;script&gt;
$(document).ready(function() {

    $(&#39;#slave-variable-table&#39;).DataTable({
        processing: true,
        serverSide: true,
        ajax: {
               &#39;url&#39; : &#39;{{ url(&quot;/variable-list/slave-variable/data-slave-variable&quot;) }}&#39;,
            &#39;type&#39;: &#39;POST&#39;,
			&#39;data&#39;: function ( d ) {
      			d._token = &quot;{{ csrf_token() }}&quot;;
      
            },
        columns: [
            { data: &#39;VARIABLE_NAME&#39;, name: &#39;VARIABLE_NAME&#39; },
            { data: &#39;TYPE&#39;, name: &#39;TYPE&#39; },
            { data: &#39;ADDRESS&#39;, name: &#39;ADDRESS&#39; },
            { data: &#39;ACCESS&#39;, name: &#39;ACCESS&#39; },
            { data: &#39;VALUE&#39;, name: &#39;VALUE&#39; },
            { data: &#39;action&#39;, name: &#39;action&#39;, orderable: false, searchable: false},
            { data: &#39;checkbox&#39;, name: &#39;checkbox&#39;, orderable: false, searchable: false},
        ]
    });

});
&lt;/script&gt;

答案2

得分: 0

我添加了 ->rawColumns(['checkbox', 'action']) 行，它之前缺失了。

英文:

modify your controller

public function data()
    {
        $SLAVE_VARIABLES = SlaveModel::select(&#39;*&#39;);
        return Datatables::of($SLAVE_VARIABLES)
            -&gt;addColumn(&#39;action&#39;, function($row){
                $btn = &#39;&lt;a href=&quot;javascript:void(0)&quot; data-toggle=&quot;tooltip&quot; 
                    data-id-variable=&quot;&#39;.$row-&gt;ID_VARIABLE.&#39;&quot;
                    data-id-slave=&quot;&#39;.$row-&gt;ID_SLAVE.&#39;&quot;
                    data-id-slot=&quot;&#39;.$row-&gt;ID_SLOT.&#39;&quot;
                    data-variable-name=&quot;&#39;.$row-&gt;VARIABLE_NAME.&#39;&quot;
                    data-type=&quot;&#39;.$row-&gt;TYPE.&#39;&quot;
                    data-address=&quot;&#39;.$row-&gt;ADDRESS.&#39;&quot;
                    data-access=&quot;&#39;.$row-&gt;ACCESS.&#39;&quot;
                    data-original-title=&quot;Modify&quot; class=&quot;edit btn btn-primary btn-sm modify-modal&quot;&gt;Modify&lt;/a&gt;&#39;;
                $btn = $btn.&#39; &lt;a href=&quot;javascript:void(0)&quot; data-toggle=&quot;tooltip&quot; data-id-variable=&quot;&#39;.$row-&gt;ID_VARIABLE.&#39;&quot; data-original-title=&quot;Delete&quot; class=&quot;btn btn-danger btn-sm deleteSlaveVariable&quot;&gt;Delete&lt;/a&gt;&#39;;
                return $btn;
            })
            -&gt;addColumn(&#39;checkbox&#39;, &#39;&lt;input type=&quot;checkbox&quot; name=&quot;slave_checkbox[]&quot; class=&quot;slave_checkbox&quot; value=&quot;{{$ID_VARIABLE}}&quot; /&gt;&#39;)
            -&gt;rawColumns([&#39;checkbox&#39;, &#39;action&#39;])
            -&gt;make(true);
    }

i added ->rawColumns(['checkbox', 'action']) line

it was missing

答案3

得分: 0

这个错误与ajax有关。通常情况下，当服务器未返回所期望的响应，即在此情况下是JSON，而是返回了HTML页面时，就会发生这种情况。请参考您上面的截图，响应返回的是找不到页面，带有httpnotfoundexception。

因此，首先检查此路由/URL是否真的有效，如果有效，是否返回所需的JSON响应给datatables。

英文:

This error is related to ajax. This normally happens when the desired response is not returned from the server i.e. JSON in this case but the html page is returned instead. See your screenshot above where the response is returned page not found wiht httpnotfoundexception

So first check if this route/url is really working or not and if working then it's returning the desired response JSON to the datatables.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Ajax错误在使用Laravel 5.2的Datatable时发生。

问题

答案1

答案2

答案3

将jQuery Ajax代码片段转换为HTMX或获取选择器值管理。

Remove the first 1 and space before a phone number?

PHP获取Moodle中的分配ID

如何将已弃用的HttpUtility::redirect()替换为在传统TYPO3插件中使用的PSR-7响应？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论