How to add a warning modal to delete

Question

I have the following MySQL for a delete button.

DELETE FROM mytable
WHERE id = $id

I want to add a jquery modal to confirm to proceed. "Are you sure to delete? Yess | No"

If you click YES then it will execute to delete, if it is NO then exit the modal and go back to the page.

--Updated--

The id in each ancho is added dynamically.

echo anchor('admin/categories/delete/'.$list['id'],'delete',array('class' => 'modalInput'));

This output the following html.

HTML ... 1 Forsiden

<td align='center'>active</td>
<td align='center'><a href="http://127.0.0.1/test/index.php/admin/categories/edit/1"&gt;edit&lt;/a&gt; | <a href="http://127.0.0.1/test/index.php/admin/categories/delete/1"&gt;delete&lt;/a&gt;&lt;/td&gt;
</tr>
<tr valign='top'>
<td>2</td>
<td>Front top</td>
<td align='center'>active</td>
<td align='center'><a href="http://127.0.0.1/test/index.php/admin/categories/edit/2"&gt;edit&lt;/a&gt; | <a href="http://127.0.0.1/test/index.php/admin/categories/delete/2"&gt;delete&lt;/a&gt;&lt;/td&gt;

</tr>
...
...

Could anyone teach me what the best way is.

Answer 1

< script type="text/javascript">
<!--
function confirmation() {
    var answer = confirm("Are you sure you want to delete?")
    if (answer){
                $.post('/delete/post', {id: '345'});
    }
}
//-->
< /script>

Something like this probably. You will have to pass the data where the '345' is...

Answer 2

One option would be to give the delete links a class, and then you can do something like this:

// simple solution
$('.delete_link').click(function() {
    // if the user clicks "no", this will return false, stopping the link from being triggered
    return confirm("Are you sure you want to delete?");
});

if you want the deletion to happen with ajax:

// ajax soluction
$('.delete_link').click(function() {
    if (confirm("Are you sure you want to delete?")) {
        $.post(this.href);
    }
    return false;
});

Also be sure to check out jqueryui's confirmation modals: http://jqueryui.com/demos/dialog/#modal-confirmation