Tengo un código en Ajax para añadir nuevos editoriales pero no me funciona como quiero que funcione.
Este sería el código Ajax:
$("#addeditorials").on("submit", function(e){
e.preventDefault();
e.stopPropagation();
toastr.success("Please, wait a moment...", "Creating new Editorial");
var btn = $(this);
var form = $(this).closest('form');
form.validate({
rules: {
name: {
required: true
}
}
});
if (!form.valid()) {
return;
}
btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
form.ajaxSubmit({
type: 'POST',
url: './index.php?action=editorial-add',
cache: 'false',
success: function(response, status, xhr, $form) {
setTimeout(function() {
location.reload();
}, 2000);
}
});
});
Y este el form con el submit:
<div class="modal fade" id="addEditorialModal" tabindex="-1" role="dialog" aria-labelledby="Add Editorial" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form class="kt-form" role="form" method="post" action="./index.php?action=editorial-add" id="addeditorials">
<div class="modal-header">
<h5 class="modal-title w-100 text-center">New Editorial</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="kt-section kt-section--first">
<div class="form-group row">
<label for="inputEmail1" class="col-form-label col-lg-4 col-sm-12 text-right">Name:</label>
<div class="col-lg-6 col-md-8 col-sm-12">
<input type="text" name="nombre" required class="form-control" id="inputEmail1" placeholder="">
</div>
</div>
</div>
<div class="kt-form__actions">
<?php printButtons("addSubmit","","Add editorial") ?>
</div>
</div>
</form>
</div>
</div>
</div>
Los problemas serían:
- Permite enviar varios submit, no funciona el preventDefault();
- No se añaden las clases al botón de submit para ponerle el spinner y el disabled.
- Quiero que me generé el Toastr mientras este añadiendo el nuevo editorial pero solo he conseguido ponerle un timer de 2 segundos para la notificación y que luego se actualice.
También me gustaría saber como añadir un toastr si da error y cuando este completado antes de recargar la página.
Más código:
el editorial-add del php
<?php
// print_r($_SESSION);
if(count($_POST)>0){
$a = new SQLMan();
$a->tablename = "editorial";
$a->nombre = $a->is_string(ucwords(mb_strtolower($_POST["nombre"])));
$a->creator_id = $_SESSION["admin_id"];
list($rs,$lastid)=$a->add();
echo $lastid;
Core::redir("./editorials");
}
?>
La función printButtons():
function printButtons($type, $href, $text) {
if ($href != "") {$href = $href;} else {$href = "";}
if ($text != "") {$text = $text;} else {$text = "";}
if (isset($_GET["id"])) {$url="../";} else {$url="";}
switch($type) {
case "add":
echo "<a href='" . $url . $href . "' class='btn btn-success btn-elevate btn-icon-sm btn-square'><i class='fas fa-plus'></i>" . $text . "</a>";
break;
case "addModal":
echo "<button type='submit' class='btn btn-success btn-square' data-toggle='modal' data-target='#".$href."'><i class='fas fa-plus'></i> " . $text . "</button>";
break;
case "addSubmit":
echo "<button type='submit' class='btn btn-success btn-square'><i class='fas fa-plus'></i> " . $text . "</button>";
break;
case "edit":
echo "<a href='" . $url . $href . "' class='btn btn-warning btn-elevate btn-icon-sm btn-square'><i class='fas fa-edit'></i>" . $text . "</a>";
break;
case "editSubmit":
echo "<button type='submit' class='btn btn-success btn-square'><i class='fas fa-edit'></i> " . $text . "</button>";
break;
case "back":
echo "<a href='" . $url . $href . "' class='btn btn-warning btn-elevate btn-icon-sm pull-left btn-square'><i class='fas fa-chevron-left'></i>" . $text . "</a>";
break;
case "return":
echo "<button type='submit' class='btn btn-success btn-square'><i class='far fa-calendar-check'></i> " . $text . "</button>";
break;
default:
echo "<a href='javascript:(void)' class='btn btn-default btn-elevate btn-icon-sm btn-square'>Button not found</a>";
break;
}
}
El ajax del Login que si me funciona correctamente:
var handleSignInFormSubmit = function() {
$('#kt_login_signin_submit').click(function(e) {
e.preventDefault();
var btn = $(this);
var form = $(this).closest('form');
form.validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
}
});
if (!form.valid()) {
return;
}
btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
form.ajaxSubmit({
type: 'POST',
url: 'login.php',
cache: 'false',
success: function(response, status, xhr, $form) {
if(response) {
setTimeout(function() {
btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
location.reload();
}, 2000);
} else {
// similate 2s delay
setTimeout(function() {
btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
showErrorMsg(form, 'danger', 'Incorrect username or password. Please try again.');
}, 2000);
}
}
});
});
}