Question

我有一个基本的SpringBoot应用程序。使用Spring Initializer，嵌入式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

＆＃13;

<!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>

＆＃13;

Answer 1

只需添加头

   <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

Answer 2

使用确认框更新了代码，希望这对您有所帮助。

以下是适合您的工作演示：

＆＃13;

<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>

＆＃13;

JQuery对话框和Datatable一起工作

2 个答案: