0

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);
                }
            }
        });
    });
}

Spinner:

.kt-spinner {
  position: relative; }
  .kt-spinner:before {
    content: '';
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 50%; }
  .kt-spinner.kt-spinner--sm:before {
    width: 16px;
    height: 16px;
    margin-top: -8px; }
  .kt-spinner.kt-spinner--sm.kt-spinner--center:before {
    left: 50%;
    margin-left: -8px; }
  .kt-spinner.kt-spinner--sm.kt-spinner--left:before {
    left: 0;
    right: auto; }
  .kt-spinner.kt-spinner--sm.kt-spinner--right:before {
    left: auto;
    right: 0; }
  .kt-spinner:before {
    width: 20px;
    height: 20px;
    margin-top: -10px; }
  .kt-spinner.kt-spinner--center:before {
    left: 50%;
    margin-left: -10px; }
  .kt-spinner.kt-spinner--left:before {
    left: 0;
    right: auto; }
  .kt-spinner.kt-spinner--right:before {
    left: auto;
    right: 0; }
  .kt-spinner.kt-spinner--lg:before {
    width: 24px;
    height: 24px;
    margin-top: -12px; }
  .kt-spinner.kt-spinner--lg.kt-spinner--center:before {
    left: 50%;
    margin-left: -12px; }
  .kt-spinner.kt-spinner--lg.kt-spinner--left:before {
    left: 0;
    right: auto; }
  .kt-spinner.kt-spinner--lg.kt-spinner--right:before {
    left: auto;
    right: 0; }
  .kt-spinner:before {
    -webkit-animation: kt-spinner .5s linear infinite;
    animation: kt-spinner .5s linear infinite; }
  .kt-spinner.kt-spinner--brand:before {
    border: 2px solid #5d78ff;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--light:before {
    border: 2px solid #ffffff;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--dark:before {
    border: 2px solid #282a3c;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--primary:before {
    border: 2px solid #5867dd;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--success:before {
    border: 2px solid #1dc9b7;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--info:before {
    border: 2px solid #5578eb;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--warning:before {
    border: 2px solid #ffb822;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--danger:before {
    border: 2px solid #fd397a;
    border-right: 2px solid transparent; }
  .kt-spinner.kt-spinner--input.kt-spinner--right:before {
    left: auto;
    right: 1rem; }
  .kt-spinner.kt-spinner--input.kt-spinner--left:before {
    right: auto;
    left: 1rem; }
  .kt-spinner.kt-spinner--v2:before {
    -webkit-animation: kt-spinner .5s linear infinite;
    animation: kt-spinner .5s linear infinite; }
  .kt-spinner.kt-spinner--v2.kt-spinner--brand:before {
    border: 2px solid #f6f8ff;
    border-top-color: #4e6bff; }
  .kt-spinner.kt-spinner--v2.kt-spinner--light:before {
    border: 2px solid white;
    border-top-color: #f7f7f7; }
  .kt-spinner.kt-spinner--v2.kt-spinner--dark:before {
    border: 2px solid #656a98;
    border-top-color: #222433; }
  .kt-spinner.kt-spinner--v2.kt-spinner--primary:before {
    border: 2px solid #d7dbf7;
    border-top-color: #4b5bda; }
  .kt-spinner.kt-spinner--v2.kt-spinner--success:before {
    border: 2px solid #90efe5;
    border-top-color: #1bbcab; }
  .kt-spinner.kt-spinner--v2.kt-spinner--info:before {
    border: 2px solid #dee5fb;
    border-top-color: #476de9; }
  .kt-spinner.kt-spinner--v2.kt-spinner--warning:before {
    border: 2px solid #ffe9bb;
    border-top-color: #ffb313; }
  .kt-spinner.kt-spinner--v2.kt-spinner--danger:before {
    border: 2px solid #ffd0e0;
    border-top-color: #fd2a70; }

@-webkit-keyframes kt-spinner {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes kt-spinner {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
4
  • 1
    No podemos reproducir tu problema con el código proporcionado. ¿Podrías compartir un HTML generado? Si no lo haces, al menos, comparte el código de printButtons() para poder generar alguno en nuestras pruebas. Además, no queda claro lo que quieres decir con "Permite enviar varios submit, no funciona el preventDefault();". En este caso preventDefault() impide el envío real del formulario, pero no que vuelvas a enviar tantas veces como quieras el formulario. Además, recuerda que var btn = $(this); te apunta al formulario (que es el que recibe el evento "submit") y no el botón pulsado. Commented el 29 jul. 2020 a las 12:29
  • ¿Podrías compartir qué biblioteca de funciones javascript estás usando y qué marcos de trabajo CSS? He intentado reproducir tu problema y lo tengo casi hecho, pero no consigo reproducir el spinner porque no sé qué estás usando para tener disponible la clase kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light. Commented el 29 jul. 2020 a las 13:09
  • @OscarGarcia He añadido la funcion printButtons() y el modelo para añadir el editorial. Tengo otro código ajax para el login que si me funciona, pero va vinculado al id del boton submit y no me sirve para esto que quiero, que es con el id del form. Lo añado también arriba. Este si me desactiva el boton para evitar dobles envios.
    – Charlie
    Commented el 29 jul. 2020 a las 13:40
  • @OscarGarcia En sí no me da error el código, es decir, me inserta la editorial sin problema. El problema es el funcionamiento mientras que inserta la editorial. Quería evitar que se mande doble poniendole la clase del spinner al boton y desactivandolo. Y también que me generé el toastr mientras se inserta en la DB y otro toastr para cuando este completado o si da error.
    – Charlie
    Commented el 29 jul. 2020 a las 13:45

1 respuesta 1

0

Tienes varios puntos de mejora

No apuntes directo a los selectores, pide al DOM que los busque y bindee acciones.

$(document).on('submit', '#addeditorials', function(e){});

El selector que según tu es un botón, no lo es, es el formulario. Por eso $(this) no hace referencia al botón (Por ende no funciona el que agregues clases) esta haciendo referencia al mismo formulario, se recomienda igual dejar de usar declaraciones de variables de tipo global como var, utiliza let y const.

Así debería quedar tus declaraciones

const btn = $(this).closest('button[type="submit"]');
const form = $(this);

Se me hace raro ver este método que extiende del formulario ajaxSubmit, si estas usando Jquery, utiliza todo su potencial, agregué un poco de control de asincronía con async/await.

Creo que estás usando formValidations, te lo dejo como tu lo tienes.

Tu código completo debería quedar así

$(document).on("submit", "#addeditorials", function( e ) {
    e.preventDefault(); e.stopPropagation();
    toastr.success("Please, wait a moment...", "Creating new Editorial");
    const btn = $(this).closest('button[type="submit"]');
    const form = $(this);
    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);
            
        }
    });
});

No tengo los ambientes correctos para depurar los errores que surjan, pero considero puedes con esos pequeños detalles.

1
  • Lo he probado pero no le aplica los cambios al boton. He probado a añadirle la id #btnSubmitAjax al boton para llamarlo con la id pero tampoco... Otra duda, para llamar a una función mientras se realiza el insert como sería?
    – Charlie
    Commented el 29 jul. 2020 a las 14:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.