1

Estoy haciendo un CRUD con Laravel, Jquery y Yajra JqueryDataTable. Cuando quiero crear un registro funciona muy bien abre al modal, el boton manda a Ajax y Laravel inserta en mi base de datos y el registro se inserta en mi DataTable, si quiero repetir el paso cuando quiero guardar otro registro, el script solo sobre escribe la URL sin ejecutar la petición POST.

Mi Botón

<a class="btn btn-success" style="float: right;" href="javascript:void(0)" id="createNewLocation" ><i class="material-icons">add_location</i>&nbsp;Nuevo</a>

Limpio mi formulario y abro la ventana modal

$('#createNewLocation').click(function () {
    $('#saveBtn').val("create");
    $('#id').val('');
    $('#name_location').val('');
    $('#location').val('');
    $('#productForm').trigger("reset");
    $('#modelHeading').html("Crear nueva locaciòn.");
    $('#ajaxModel').modal('show');
});

Deshabilito el boton de guardar, ejecuto la petición POST con Ajax, muestro una alerta de exito y reinicio el modal

$('#saveBtn').click(function (e) {

    e.preventDefault();

    /* Deshabilita el boton */
    $(this).replaceWith('<button type="submit" class="btn btn-default" id="saveBtn" disabled="true" value="create"><i class="material-icons">autorenew</i>&nbsp;</button>');
    //$(this).attr("disabled", true);
    $.ajax({

      data: $('#productForm').serialize(),
      url: "{{ route('locaciones.store') }}",
      type: "POST",
      dataType: 'json',
      success: function (data) {

          $('#productForm').trigger("reset");
          $('#ajaxModel').modal('hide');

          $('#modal-alert-message-success').modal('show');
          $("#success-message").html('<h3><i class="material-icons">done</i>&nbsp;Locacion guardada.</h3>');

          table.draw();
      },

      error: function (data) {

          $('#ajaxModel').modal('hide');
          $('#modal-alert-message-error').modal('show');
          $("#error-message").html('<h3><i class="material-icons">error</i>&nbsp;Error</h3>');

          $('#productForm').trigger("reset");
          $('#ajaxModel').modal('hide');
          $('#saveBtn').replaceWith('<button type="submit" class="btn btn-success" id="saveBtn" value="create"><i class="material-icons">save</i>&nbsp;</button>');
          $('#saveBtn').attr("disabled", false);

      }

  });

});

$('#modal-alert-message-success').on('shown.bs.modal',function (e) {
    setTimeout(function(){
      $('#modal-alert-message-success').modal('hide');
    }, 1500);
});

$('#ajaxModel').on('hide.bs.modal', function (e) {
    $('#productForm').trigger("reset")
    $('#saveBtn').replaceWith('<button type="submit" class="btn btn-success" id="saveBtn" value="create"><i class="material-icons">save</i>&nbsp;</button>');
    $('#saveBtn').attr("disabled", false);
  });

Cuando quiero insertar el segundo registro seguido solo sobre escribe la URL con los parámetros del formulario pero sin ejecutar la petición POST, por ejemplo:

http://project.test/locaciones?id=&name_location=CIUDAD+DE+MEXICO&location=CDMX

Espero me puedan ayudar, gracias.

1 respuesta 1

3

Falta un poco de información para saber exactamente cual es el problema. Pero lo que veo a simple vista es que tenés un problema con el onClick() de #saveBtn.

Al hacer:

$('#saveBtn').click(function (e) {
    ...
});

Estás haciendo un bind de ese evento en el elemento #saveBtn existente. Dentro de tu función estás haciendo un reaplaceWith():

$(this).replaceWith('<button type="submit" class="btn btn-default" id="saveBtn" disabled="true" value="create"><i class="material-icons">autorenew</i>&nbsp;</button>');

Al reemplazar el botón por otro (por más que tenga el mismo ID), el bind anterior deja de funcionar.

Tenés 2 opciones:

Opción 1:
Hacé el bind sobre el body (o algún elemento padre).

$('body').on('click', '#saveBtn', function () {
    ...
});

Opción 2:
No reemplaces el botón. En vez de hacer un reaplaceWit() modificá los atributos/propiedades que necesites.

$(this).prop('disabled', true).html('<i class="material-icons">autorenew</i>');
1
  • Funciono de maravilla, muchas gracias. Commented el 5 ago. 2019 a las 17:54

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.