Buenas tardes,
Tengo un par problemas que no he podido solucionar a la hora de enviar el formulario con AJAX.
1. El formulario se envía varias veces si le das un click, y ya si le das todos los que puedas se enviar más veces todavía.
EL formulario se envía con una función en el submit
<button type="submit" class="btn btn-info" onClick="addSolInfo()">Enviar Solicitud de Información</button>
Esta es la función ajax:
function addSolInfo() {
$(document).on('submit', '#solicitudinfo', function(e) {
e.preventDefault();
e.stopPropagation();
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : '../assets/webla/solicitudinfo.php',
data : data,
success : function(data) {
$('#nuevasolicitud').modal('hide');
$("#result").html(data).fadeIn();
getSolInfo();
},
complete: function(){
setTimeout(function() {
}, 15000);
}
});
return false;
});
}
He pensado que probablemente se deba a que lo estoy haciendo mal, ya que en el submit llamo a la función addSolInfo() y luego en la propia función le estoy diciendo también $(document).on('submit', '#solicitudinfo', function(e) para que lo envié cuando se pulse el submit, así que he probado a quitar esa parte pero deja de funcionar el formulario.
He probado también usando e.preventDefault(); e.stopPropagation(); pero tampoco funciona y estoy un poco perdido.
2. Al enviar el formulario, uso la función getSolInfo(); para recargar el CRUD con los datos pero además de duplicar la tabla (sale arriba todas las entradas, y abajo se vuelve a repetir), deja de funcionar el plugin DataTables y no filtra las entradas por cantidad (10, 25, 50, 100) si no que salen todas las entradas directamente.
Este es el AJAX de getSolInfo();
function getSolInfo() {
$('#tBody').html('');
$.ajax({
type : 'POST',
url : '../assets/webla/getsolicitudes.php',
success : function(data) {
$('#tBody').append(data);
$('#solicitudinfo').DataTable();
},
complete: function(){
setTimeout(function() {
}, 15000);
}
});
return false;
}
He probado insertando $('#tBody').html(''); para limpiar el tBody y después volverlo a imprimir, pero sigue dando los mismos problemas.
Este es el código HTML de la tabla:
<table class="table table-striped table-bordered table-hover" id="solicitudinfo" data-order='[[ 0, "desc" ]]'>
<script type="text/javascript">
$(document).ready(function(){
getSolInfo();
});
</script>
<thead>
<tr>
<th>ID</th>
<th>Fecha</th>
<th>Centro</th>
<th>Nombre</th>
<th>Curso</th>
<th>Edad</th>
<th>Contacto</th>
<th>Etiquetas</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tBody">
</tbody>
</table>
click
del botón, mediante su id. Ejemplo:$( "#btnActualizar" ).click(function(e) {
suponiendo que el botón tenga el idbtnActualizar
. (2). En cuanto al formulario, lo mejor es identificarlo también por su id y serializarlo, Lo puedes hacer dentro del eventoclick
del botón:e.preventDefault(); var data = $(this).closest('form').serializeArray();
a mi con eso me funciona de maravilla.button
, los del tiposubmit
siempre han sido para mi un dolor de cabeza. Ejemplo del HTML que uso:<button id="btnActualizar" type="button">Actualizar</button>
Por otra parte, para que la líneavar data = $(this).closest('form').serializeArray();
me recoja todos los datos del formulario, el botón debe estar dentro de él, por supuesto.