问题：
JQuery对话框和Datatable一起工作
范书
我有一个基本的SpringBoot应用程序。使用Spring初始化器、嵌入式Tomcat、Thymeleaf模板引擎和作为可执行JAR文件的包。我想在一个页面中使用一个JQuery对话框作为确认对话框（提示用户确认他们确定要删除一条记录），在这个页面中我已经有了一个可数据；但是当我把两者结合在一起时，似乎什么都不起作用。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
http://www.simplecodestuffs.com/how-to-use-jquery-dialog-as-confirm-dialog/
-->
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- User Defined Js file -->
</head>
<body>
<form method="post" action="delete.html">
<input type="submit" class="button" id="Delete" name="Delete" value="Delete" />
</form>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$('#example').DataTable();
$('#Delete').click(function(event) {
event.preventDefault();
var currentForm = $(this).closest('form');
/** Create div element for delete confirmation dialog*/
var dynamicDialog = $('<div id="conformBox">'+
'<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">'+
'</span>Are you sure to delete the item?</div>');
dynamicDialog.dialog({
title : "Are you sure?",
closeOnEscape: true,
modal : true,
buttons :
[{
text : "Yes",
click : function() {
$(this).dialog("close");
currentForm.submit();
}
},
{
text : "No",
click : function() {
$(this).dialog("close");
}
}]
});
return false;
});
});
</script>
</html>
当我点击按钮时：
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Sun May 14 07:13:59 CEST 2017
There was an unexpected error (type=Not Found, status=404).
No message available
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
http://www.simplecodestuffs.com/how-to-use-jquery-dialog-as-confirm-dialog/
-->
<head>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- User Defined Js file -->
</head>
<body>
<form method="post" action="delete.html">
<input type="submit" class="button" id="Delete" name="Delete" value="Delete" />
</form>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$('#example').DataTable();
$('#Delete').click(function(event) {
event.preventDefault();
var currentForm = $(this).closest('form');
/** Create div element for delete confirmation dialog*/
var dynamicDialog = $('<div id="conformBox">'+
'<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">'+
'</span>Are you sure to delete the item?</div>');
dynamicDialog.dialog({
title : "Are you sure?",
closeOnEscape: true,
modal : true,
buttons :
[{
text : "Yes",
click : function() {
$(this).dialog("close");
currentForm.submit();
}
},
{
text : "No",
click : function() {
$(this).dialog("close");
}
}]
});
return false;
});
});
</script>
</html>共有2个答案
应向晨
再加上头部
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
汲永嘉
用确认框更新了代码，希望对您有所帮助。
以下是为您准备的工作演示：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
http://www.simplecodestuffs.com/how-to-use-jquery-dialog-as-confirm-dialog/
-->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css" />
</head>
<body>
<form method="post" action="delete.html">
<input type="submit" class="button" id="Delete" name="Delete" value="Delete" />
</form>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$('#example').DataTable();
$('#Delete').click(function(event) {
event.preventDefault();
var currentForm = $(this).closest('form');
if(confirm('Are you sure?')) {
currentForm.submit();
} else {
// do something here...
}
return false;
});
});
</script>
</html>
类似资料：
-
问题内容： 我正在寻找适用于asp.net的JavaScript模态对话框解决方案，jquery UI对话框似乎不错，但是它将对话框容器移至body标签的底部。我将对话框代码更改为将对话框保持为asp.net形式，但仍然超出了updatepanel的范围。 有没有解决方案或更兼容的对话框，它不会破坏asp.net表单的生命周期？ 谢谢 问题答案： 为什么不将UpdatePanel放在对话框容器中？
-
我正在建立一个div，它是网站主页的一部分。此div显示项目列表。所有项目都保存在MySQL数据库中。我想做的是在每一行旁边创建一个按钮，上面写着“删除”。单击delete之后，应该会出现一个jQueryUI对话框提示用户进行确认。当确认删除项目时，必须将项目id发送到删除页面（我们称之为delete.php）。 到目前为止我做了什么 从MySQL获取项目列表，并将每个项目显示为一行 在每行末尾添
-
问题内容： 单击图像时，我必须创建一个对话框。问题是我在那里有一些很大的z索引（例如500），而ui对话框位于该元素的背面。 这是您需要登录的页面，用户：“ raducup”并通过：“ 1”。另一个问题是，当我单击关闭对话框时，该对象消失了。 这是单击图像时调用的函数： 问题答案： 您没有告诉它，但是您正在使用jQuery UI 1.10。 在jQuery UI 1.10中，该选项已删除： 删除了
-
在一个交互覆盖层中打开内容。 如需了解更多有关 dialog 部件的细节，请查看 API 文档 对话框部件（Dialog Widget）。 默认功能 基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。 <!doctype html> <html
-
以下是代码： 但是当我删除时，它工作得很好，但是我也想在确认对话中显示MS访问的名称，然后根据yes no选项，我希望我的进一步代码被处决。 完整的源代码是：
-
pre { white-space: pre-wrap; } 对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。默认情况下，对话框（Dialog）不能改变大小，但是用户可以设置 resizable 属性为 true，使其可以改变大小。 创建对话框（Dialog） 对话框（Dialog）非常简单，可以从 DIV 标记创建，如下所示： <div i