引导模式未在 laravel 中与 jquery 一起显示

Posted

技术标签:

【中文标题】引导模式未在 laravel 中与 jquery 一起显示【英文标题】：bootstrap modal not showing with jquery in laravel 【发布时间】：2021-06-25 08:26:53 【问题描述】：

我正在尝试在最后一列操作的单击操作上打开模式，但我无法查看单击时的模式，并且我的 jquery 在我的 laravel 应用程序中无法正常工作，任何想法为什么？，任何帮助将不胜感激。谢谢

<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
    <meta charset="utf-8">

    <title> config('app.name', 'Laravel') </title>

 -- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />--
--    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">--
    <linK href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

    <!-- Styles -->
    <link href=" asset('css/app.css') " rel="stylesheet">
</head>

<body style="margin-top: 30px;">
<div class="container">
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <h1 class="mb-5">
                    Report
                </h1>
                <div class="card">
                    <div class="card-content" aria-expanded="true">
                        <div class="card-body">

                            <table class="table table-bordered datatable" id="datatable" style="z-index: 3;">
                                <thead>
                                <tr role="row" class="bg-primary white">
                                    <th class="border-primary border-darken-1">S. No.</th>
                                    <th class="border-primary border-darken-1">Supplier Name</th>
                                    <th class="border-primary border-darken-1">Invoice Number</th>
                                    <th class="border-primary border-darken-1">Delivery Date</th>
                                    <th class="border-primary border-darken-1">Amount</th>
                                    <th class="border-primary border-darken-1">Items Delivered</th>
                                    <th class="border-primary border-darken-1">Submitted By</th>
                                    <th class="border-primary border-darken-1">Image</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="modal fade" id="picture_modal" data-backdrop="static" role="dialog" aria-labelledby="picture_modal" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="picture_modal_title">Picture</h4>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

</div>
</body>
</html>

这是脚本，jquery函数不起作用，当我在数据表中调用表名或attr时，它会出错

--
<script src="//code.jquery.com/jquery.js"></script>--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- Bootstrap javascript -->

<script>
    $(document).ready(function()

        $(function() 
            $('#datatable').DataTable(
                processing: true,
                serverSide: true,
                ajax: '!! route('invoice.list') !!',
                rowId: 'id',
                columns: [
                     data: 'id', name: 'id',class:'id' ,
                     data: 'supplier_name', name: 'supplier_name',class:'supplier_name' ,
                     data: 'invoice_no', name: 'invoice_no', class:'invoice_no',
                     data: 'delivery_date', name: 'delivery_date', class:'delivery_date' ,
                     data: 'amount', name: 'amount', class:'amount' ,
                     data: 'items_delivered', name: 'items_delivered', class:'items_delivered' ,
                     data: 'submitted_by', name: 'submitted_by', class:'submitted_by' ,
                      data: 'action', name: 'action', class:'action text-center',
                ]
            );
        );

        $('#datatable').on('click','.action',function () 
               console.log(1);
         
            $('#picture_modal').modal('show');
         
        );


    );
</script>

【问题讨论】：

【参考方案1】：

由于给定的代码错误，请替换这些代码，

    $('#datatable').on('click','.action',function () 
           console.log(1);
     
        $('#picture_modal').modal('show');
     
    );

有了这个：

    $(document).on('click','.action',function () 
           console.log(1);
     
        $('#picture_modal').modal('show');
     
    );

【讨论】：

这是由于库的一些问题，当我更改库时，它给了我 jquery-3.3.1.slim.min.js:2 Uncaught TypeError: h.ajax is not a function错误 能否取消注释 bootstrap.min.css 并尝试

以上是关于引导模式未在 laravel 中与 jquery 一起显示的主要内容，如果未能解决你的问题，请参考以下文章