JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://fagardesigns.com/neou_cms/css/jquery-custom-theme/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="http://fagardesigns.com/neou_cms/css/styles.css">
<!-- php script
if ($_POST['doDelete'] == 'Delete') {
if (!empty($_POST['u'])) {
foreach ($_POST['u'] as $uid) {
$id = filter($uid);
if (deleteRecord('projects', $id, false)) {
$fail[] = $id;
} else {
$pass[] = $id;
}
}
}
$msg = new Messages();
if (!empty($pass)) {
$passed = implode(', ', $pass);
$message = "Deleted: {$passed}";
$msg->add('s', $message);
}
if(!empty($fail)){
$failure = implode(', ', $fail);
$message = "Could not delete/an error occured: {$failure}";
$msg->add('e', $message);
}
redirect('projects.php');
}
-->
<div id="dialog-confirm-multiple" title="Confirmation Required">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<h2>Form doesn't submit on delete multiple, aka red button</h2><a href=
"insert_project.php" class="btn">Click here to insert a project</a>
<h2>Edit Projects</h2>
<div id="refresh-me"></div>
<form class="form-inline" action="" method="post" id="confirm" name="confirm">
<table border="0" cellpadding="0" cellspacing="1" class="tablesorter" id="projects">
<thead>
<tr>
<th></th>
<th>ID</th>
<th id="listing_image" title="Click project name to show listing image.">
Project Name</th>
...
JavaScript
$(function () {
$("#dialog-confirm-multiple").dialog({
autoOpen: false,
resizable: false,
width: 300,
modal: true,
show: {
effect: "bounce",
duration: 100
},
hide: "drop",
buttons: {
"Yes": function () {
$(this).dialog("close");
$("#doDelete").click();
},
"No": function () {
$(this).dialog("close");
}
}
});
$("#doDelete").click(function (e,ui) {
debugger;
if(e.originalEvent) {
e.preventDefault();
$("#dialog-confirm-multiple").dialog('open');
return false;
}
});
});