引导模式未在 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 一起显示的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery post 使用 Laravel 将动态数据传递给引导模式
DataTables 的引导程序未在 Laravel 中显示