JQuery dialog and Datatable working together

Question

I have a basic SpringBoot app. using Spring Initializer, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file. I want to use a JQuery dialog as Confirm dialog (prompting the user to confirm that they are sure about deleting a record) in a page where I already have a Datatable; but it seems that when I combine both nothing works.

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

This is what I see from the code abode in the browser

and when I click in the button:

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>

I am a bit confused about why you are trying to submit a submit button. Only what is between the form tags get submitted. I don't see any code that selects a record for delete — Bindrid, May 13 '17 at 20:58
What are you attaching your modal window to? You create the html but it needs to be attached to a parent node, commonly the body tag. — Bindrid, May 13 '17 at 21:30
There is no problem with the above code, the dataTable is initialized and the dialog shows up if you click on the button. — davidkonrad, May 14 '17 at 03:52
As per update : **http://stackoverflow.com/questions/31134333/this-application-has-no-explicit-mapping-for-error** — davidkonrad, May 14 '17 at 07:21

score 0 · Answer 1 · answered May 18 '17 at 12:57

0

Just Add in head

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

answered May 18 '17 at 12:57

Aram Mnatsakanyan

214
3
11

Milan Chheda · Accepted Answer · 2017-05-20T14:06:31.457

Updated the code with confirm box, hope this helps you.

Below is the working demo for you:

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

The datatables are OK, but no when you push Delete, as the demo here simplecodestuffs.com/how-to-use-jquery-dialog-as-confirm-dia‌log :-( — Nuñito Calzada, May 20 '17 at 06:12

JQuery dialog and Datatable working together

2 Answers2