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> 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> </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> 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> 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> </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> </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.