如何避免Ajax调用中未捕获(承诺)的DOMException?

时间:2019-06-12 06:58:28

标签: javascript jquery html doctype

我遇到错误

  

未捕获(承诺)的DOMException

在html页面中。当我将 Ajax 调用用于存储或其他目的时,会发生此错误。当我尝试从检查视图控制台检查该页面上的错误时,它显示<!DOCTYPE html>

有关更多信息,我正在 laravel 上开发项目,其前端为 Laravel Blade HTML模板,后端为laravel。在某些使用普通表单提交的页面中,而某些页面中我使用的是 ajax 调用。我的浏览器是 Google Chrome 的最新版本。

这样我不知道为什么会发生此问题?

我正在分享该截图,请回答。...

enter image description here

当我点击文件主题:1 时,我来到这里

enter image description here

因此,我尝试在所有位置找到我的解决方案,但找不到。请告诉我发生这种情况的原因?有什么更好的解决方案?

代码部分-----

其标头部分是另一个文件。它只是其他jQuery或支持文件的基础文件,之前被加载到另一个文件中……加载后,所有这些文件都被加载。例如dataTable等。

<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
    <tr>
        <th>SL.</th>
        <th>SUBJECT CODE</th>
        <th>SUBJECT NAME</th>
        <th>COURSE</th>
        <th></th>
        <!-- check  Login -->
        <th></th>
        <!-- check  Login -->

    </tr>
</thead>
<tbody>
@if( count( $subjects ))
@foreach($subjects  as $key => $items )
    <tr>
        <td>{{ $key+1 }}</td>
        <td>{{ $items->SUBJECT_CODE }}</td>
        <td>{{ $items->SUBJECT_NAME }}</td>
        <td>{{\App\Helper\Utility::getCourseByCode($items->CATEGORY)}}</td>
        <td>
            <button type="button" class="btn btn-xs btn-success" onclick="EditSubject({{$items->ID}})">
                <i class="fa fa-edit"></i> Edit</button></td>
        <!-- check  Login -->
        <td><button type="button" class="btn btn-xs btn-danger" onclick="DeleteSubject({{ $items->ID}});">
                <i class="fa fa-remove"></i> Delete</button></td>
        <!-- check  Login -->
    </tr>
    @endforeach
@endif
</tbody>
</table>


<script src="{{ asset('js/plugin/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/plugin/datatables/dataTables.colVis.min.js') }}"></script>
<script src="{{ asset('js/plugin/datatables/dataTables.tableTools.min.js') }}"></script>
<script src="{{ asset('js/plugin/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/plugin/datatable-responsive/datatables.responsive.min.js') }}"></script>
<script type="text/javascript">


        /* BASIC ;*/
        var responsiveHelper_dt_basic = undefined;

        var breakpointDefinition = {
            tablet : 1024,
            phone : 480
        };

        $('#dt_basic').dataTable({
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "iDisplayLength": 50,
            "preDrawCallback" : function() {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
                }
            },
            "rowCallback" : function(nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback" : function(oSettings) {
                responsiveHelper_dt_basic.respond();
            }
        });

        function EditSubject(id)
        {
            $("#formModalTitle").html('<h4 class="modal-title">Subject Setting</h4>');
            $('#formModalBody').load("{{ url('setting/subjects/edit') }}","id="+id,function(e){
                $('#formModal').modal('show');
            });
        }

        function DeleteSubject(id)
        {
            $.SmartMessageBox({
                title : "<i class='text-danger fa fa-warning'></i> Caution!!",
                content : "Would you like to delete selected Subject?",
                buttons : '[No][Yes]'
            }, function(ButtonPressed) {
                if (ButtonPressed === "Yes") {
                    $.ajax({
                        type: 'GET',
                        url: "{{ url('setting/subjects/delete') }}",
                        data: {id: id},
                        dataType: "json",
                        success: function (data) {
                            if (data.message) {
                                $.smallBox({
                                    title: "Message",
                                    content: "<i class='fa fa-info-circle'></i> <i>" + data.message + "</i>",
                                    color: "#659265",
                                    iconSmall: "fa fa-check fa-2x fadeInRight animated",
                                    timeout: 4000
                                });
                                $('#showDivSubject').load("{{ url('setting/subjects/list') }}");
                            }
                        } ,
                        error:function (data){
                            $.smallBox({
                                title: "Message",
                                content: "<i class='fa fa-clock-o'></i> <i>" + data.responseJSON.errors.subject_code[0] + "</i>",
                                color: "#C46A69",
                                iconSmall: "fa fa-times fa-2x fadeInRight animated",
                                timeout: 4000
                            });
                        }

                    });
                }
            });
        }

</script>

1 个答案:

答案 0 :(得分:0)

如果您使用的是Promise,则必须使用以下语法:

var P = new Promise(/*something*/);

P.then(
       doSomeThing();
        }).catch(
        function(reason) {
            console.log(reason);
        });