El formulario toma unos datos para obtener productos filtrados en una tienda online.
Si el formulario lleva data-contenedor='#resultados_tienda' la respuesta (productos) se tienen que pintar en el div con id #resultados_tienda.
Por el contrario si no lleva data-contenedor el formulario tiene que ser procesado en /tienda?proceso=be y los resultados se pintarán en esa otra url, esta url tiene este código que recoge los datos del $_POST y pinta en un contenedor ya definido:
// Búsqueda Externa des de otra página
else if (proceso == 'be')
{
// Recogemos los datos POST
var datos_post = <?=json_encode($_POST,JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS)?>;
r_ajax( '/procesosajax_ec.php?proceso=ec_resultados_index&subproceso=buscador',
datos_post,
"#contenido_ajax",
'post',
function(){goto_resultados()})
}
Por lo tanto tengo que hacer un proceso condicional:
Si el formulario tiene data-contenedor pinto el resultado ajax en ese contenedor
Si el formulario no tiene data-contenedor redirijo para que la url /tienda se encargue de procesar el formulario.
He probado usar .submit() o .trigger() para el segundo caso, pero se me produce un bucle.
El código Jquery iría contenido aquí:
$(document.body).on( "submit", ".form_ec_buscador", function(ev) {
ev.preventDefault();
if (typeof modal_form_buscador_ec != 'undefined') {modal_form_buscador_ec.close();}
// Si hay contenedor, ejecutamos ajax y pontamos el resultado en él.
if ($(this).attr('data-contenedor'))
{
// Si hay contenedor pintamos aquí, sino redirigimos a
// /tienda?proceso=be para que lo procese.
var contenedor = $(this).data("contenedor");
// Enviamos el formulario usando AJAX
$.ajax({
cache: false,
type: 'POST',
url: '/procesosajax_ec.php?proceso=ec_resultados_index&subproceso=buscador',
data: $(this).serialize(),
beforeSend: function(){
$("body").append ('<div class="espera"></div>');
},
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$(".espera").remove();
$("#" + contenedor).html(data);
$("html, body").animate({ scrollTop: $("#" + contenedor).offset().top }, 1000);
},
error: function(){
$(".espera").remove();
swal("¡Error!", "Se ha producido un error.", "error");
}
});
}
else
{
$(this).attr('action', '/tienda?proceso=be');
$(this).submit();
}
});
Y aquí dentro se trataría la condición anterior.
HE ENCONTRADO ESTA SOLUCIÓN QUE PARECE FUNCIONAR
Si tengo que hacer el submit, lo hago creando otro formulario con pocas líneas de código, fijaos en el else de este código, así no entro en bucle con el submit del formulario principal:
// Ejecuta el formulario de búsqueda/filtrado // bien pinta el resultado o bien redirige a /tienda?proceso=be // Todo depende de que se le haya indicado contenedor. $(document.body).on( "submit", ".form_ec_buscador", function(ev) {
ev.preventDefault();
// Si hay contenedor, ejecutamos ajax y pontamos el resultado en él.
if ($(this).attr('data-contenedor'))
{
if (typeof modal_form_buscador_ec != 'undefined') {modal_form_buscador_ec.close();}
// Si hay contenedor pintamos aquí, sino redirigimos a
// /tienda?proceso=be para que lo procese.
var contenedor = $(this).data("contenedor");
// Enviamos el formulario usando AJAX
$.ajax({
cache: false,
type: 'POST',
url: '/procesosajax_ec.php?proceso=ec_resultados_index&subproceso=buscador',
data: $(this).serialize(),
beforeSend: function(){
$("body").append ('<div class="espera"></div>');
},
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$(".espera").remove();
$("#" + contenedor).html(data);
$("html, body").animate({ scrollTop: $("#" + contenedor).offset().top }, 1000);
},
error: function(){
$(".espera").remove();
swal("¡Error!", "Se ha producido un error.", "error");
}
});
}
else
{
// Creamos un objeto formulario.
var form = $('<form></form>');
console.log('Hacemos envío del formulario a /tienda.');
// Le añadimos el action y el método post
form.attr("method", "post");
form.attr("action", '/tienda?proceso=be');
// Del formulario lanzado, cogemos todos los campos y
// los añadimos al nuevo formulario.
$.each( $(this).serializeArray(), function( indice, data )
{
var field = $('<input></input>');
console.log('Campo: ' + indice);
console.log('Nombre: ' + data.name);
console.log('Valor: ' + data.value);
field.attr("type", "hidden");
field.attr("name", data.name);
field.attr("value", data.value);
form.append(field);
});
// Y ejecutamos un submit sobre el nuevo formulario.
$(form).appendTo('body').submit();
}
});