bootstrap-modal 相关问题

我有这样的HTML代码：＆...] ] >> 您不正确地将嵌入式onclick和jQuery click事件监听器混合在一起。删除函数和onclick，仅使用函数内部的jQuery代码来管理事件您也不需要each循环即可访问行中的元素。简体版： $(document).on("click", ".edit", function() { var $row = $(this).closest('tr'), thText = $row.find('th').text(), cTenSanPham = $row.find('.cTenSanPham').text(), cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, ''); $('#iMaSanPham').val(thText); $('#iTenSanPham').val(cTenSanPham); $('#iGiaSanPham').val(cGiaSanPham); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div style="margin-top: 50px;"> <table class="table table-hover" style="width: 100%;"> <tbody> <tr> <th>0</th> <td class="cTenSanPham">Samsung Galaxy Note 8</td> <td class="cGiaSanPham">23.000.000 VND</td> <td> <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button> <button type="button" class="btn btn-danger delete-row-tb">Xóa</button> </td> </tr> <tr> <th>66</th> <td class="cTenSanPham">Another Item</td> <td class="cGiaSanPham">99.000.000 VND</td> <td> <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button> <button type="button" class="btn btn-danger delete-row-tb">Xóa</button> </td> </tr> </tbody> </table> </div> </div> <h3>Modal</h3> <div class="modal-body"> <form> <div class="form-group"> <label> <h5 class="">Mã sản phẩm</h5> </label> <input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly> </div> <div class="form-group"> <label> <h5 class="">Tên sản phẩm</h5> </label> <input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham"> </div> <div class="form-group"> <label> <h5 class="">Giá sản phẩm</h5> </label> <input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham"> </div> </form> </div> var $currentEditRow; $(document).on("click", ".edit", function() { $currentEditRow = $(this).parents("tr"); editProductModal($(this).parents("tr")); }); function editProductModal(row) { document.getElementById("iMaSanPham").value = $(row).find("th").text(); document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text(); document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, '')); } function update() { $currentEditRow.find("th").text(document.getElementById("iMaSanPham").value); $currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value); $currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value); $('#exampleModal').modal('hide'); } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container"> <div style="margin-top: 50px;"> <table class="table table-hover" style="width: 100%;"> <tbody> <tr> <th>0</th> <td class="cTenSanPham">Samsung Galaxy Note 8</td> <td class="cGiaSanPham">23.000.000 VND</td> <td> <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button> <button type="button" class="btn btn-danger delete-row-tb">Xóa</button> </td> </tr> </tbody> </table> </div> </div>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label> <h5 class="">Mã sản phẩm</h5> </label> <input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly> </div> <div class="form-group"> <label> <h5 class="">Tên sản phẩm</h5> </label> <input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham"> </div> <div class="form-group"> <label> <h5 class="">Giá sản phẩm</h5> </label> <input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="update()">Save</button> </div> </div> </div> </div> 编辑当前行时，存储当前行的dom，以便您可以确定模式中要更新到的行

javascript jquery html bootstrap-modal

回答 2 投票 0

Bootstrap 4模式选择不起作用，带有动态ID

我有一个要从PHP foreach循环中的链接调用的模式。当模式ID是静态的（id =“ test”）时，模式会正常加载，并且select2下拉菜单将按预期运行。当模态的...

javascript php html bootstrap-4 bootstrap-modal

回答 1 投票 0

如何修复模态不是函数？

我很确定我已经以正确的方式对.js文件进行了排序，

jquery laravel bootstrap-4 bootstrap-modal

回答 3 投票 0

如何将 PHP 表单放入模式中

我有这个 HTML 代码用于模式中的表单（使用 Bootstrap） ... 我有这个 HTML 代码用于模式中的表单（使用 Bootstrap） <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true"> <div class="modal-dialog">  <div class="modal-content"> <form name="login_form" action="test.php" method="post" role="form"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Login</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> <div class="modal-footer"> <input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary"> </div> </form> </div> </div> </div> 问题是当我点击“确定”按钮时，没有任何反应。这是“test.php”文件（我只是用来看看它是否有效） <html> logged </html> 我是 bootstrap 的新手，所以我不太确定为什么它不能像通常的 HTML+CSS 页面一样工作。感谢您的帮助！编辑我找到了这个 AJAX 代码，试图将它改编成我的代码，但仍然没有用。 $(document).ready(function () { $("input#submit").click(function(){ $.ajax({ type: "POST", url: "test.php", // data: $('form.login_form').serialize(), success: function(msg){ $("#form-content").modal('hide'); }, error: function(){ alert("failure"); } }); }); }); 现在，我只想在按下按钮后转到另一个 PHP 页面（我还没有编写登录验证代码）。我看到发生了什么，只需添加这个 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> <script> $(document).ready(function(){ $('#submit').click(function(){ $('#loginModal').modal('show'); }); </script> 问题中最明显的部分是，当您执行 AJAX 调用时，您实际上并没有阻止表单提交。您不想提交页面，而是等待 ajax 请求结束，然后在成功回调中处理响应。由于您使用的是 jQuery，因此最简单的方法是从事件回调中返回false： $(document).ready(function () { $("input#submit").click(function(){ $.ajax({ type: "POST", url: "test.php", // data: $('form.login_form').serialize(), success: function(msg){ $("#form-content").modal('hide'); }, error: function(){ alert("failure"); } }); return false;//stop form submission }); }); jQuery 的return false 相当于 vanilla-JS 的： eventObj.preventDefault();//do not handle event in a normal fashion eventObj.stopPropagation();//do not propagate event to other handlers 话虽如此，您的选择器和事件绑定可能会更好，我会为表单设置一个ID（<form id='modalformid'>），并绑定submit事件（可以由用户按下enter触发），然后像这样绑定处理程序： $('#modalformid').on('submit', function() { var frm = $(this);//reference to the form that is submitted $.ajax({ type: "POST", url: "test.php", data: frm.serialize(),//serialize correct form success: function(msg) { //the response from the server is in msg here! $("#form-content").modal('hide'); }, error: function(){ alert("failure"); } });//your ajax call here return false; }); 我还会检查控制台以确保您包含所有 JS 依赖项（即 jQuery） . 最后，$(document).ready() 选择器不可靠：根据定义，ID 是唯一的。课程不是。理论上，使用 console.log($) 可以匹配不止一种形式。经验法则：类对于 CSS 规则很有用，对于 JS 事件处理（委托除外）则没有那么多，如果你想处理单个表单/元素：使用 ID。我同意埃利亚斯的观点。在 AJAX 调用的情况下，您不想提交表单，因为页面将重新加载并且您永远不会得到响应。在你的 JS 中，你绑定了一个点击事件，这很好，但是你的 console.log($ === jQuery) 是 $('form.login_form') 这会导致问题。首先，删除它。 $('form.login_form') 其次，在 JQuery 中，您引用了一个无效的表单选择器。 input 没有type="submit"课。由于 AJAX 会为您处理请求，因此我建议改用 id 并最小化属性。 <input id="submit" name="submit" value="Ok" class="btn btn-primary"> 根据您提供的 HTML，我必须假设您想要隐藏 $('form.login_form').serialize() 而不是 login_form. <form id="login_form" role="form">

php html twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

回答 3 投票 0

如何在视图按钮上添加模式弹出窗口？

[[

html twitter-bootstrap bootstrap-modal

回答 1 投票 -1

如何将数据从Django传递到引导程序模式？

我想将Django数据传递给引导模态。现在我正在使用django-bootstrap-modal-forms pypi包。我已经看过这些文档并且尝试过，但是它不起作用。我只需要执行...

ajax django-models django-templates modal-dialog bootstrap-modal

回答 1 投票 0

将参数发送到模式窗口（Angular 8）

我在.ts openFormModal（id：number）{console.log（id）; const modalRef = this.modalService.open（PartidoComponent）; modalRef.componentInstance.id = id; // modalRef ....

angular bootstrap-modal

回答 1 投票 -1

不显示引导程序模式对话框（显示黑色背景）

我在html文件中有两个模式对话框（导致问题）。在html文件的顺序中，哪个模式对话框位于第一个位置，单击按钮时正确显示（反之亦然）。都是模态...

jquery html bootstrap-4 bootstrap-modal

回答 1 投票 0

根据数据动态设置SVG的宽度和高度

首先，我使用的是jQuery-3.2.1和bootstrap-3.3.7，无法更改。我的基本目标是启动一个引导程序模式并在此模式下显示动态甘特图。我说动态为...

javascript d3.js svg dynamic bootstrap-modal

回答 1 投票 1

我如何使用svg和d3指定动态甘特图，以便由时间刻度确定宽度

首先，我使用的是jQuery-3.2.1和bootstrap-3.3.7，无法更改。我的基本目标是启动一个引导程序模式并在此模式下显示动态甘特图。我说动态为...