2

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

});

6
  • 1
    agregastes ev.preventDefault() el 12 dic. 2018 a las 12:20
  • Sí claro, para ver si el formulario tiene el atributo data-contenedor, no tengo más remedio que ejecutar un ev.preventDefault() No funciona en el segundo caso: El formulario no tiene data-contenedor y tengo que ponerle un actión y hacer un submit Este es el código Jquery que se me ejecuta en bucle, no tengo manera de que el form haga un submit normal: No puedo ponerlo, no cabe. el 14 dic. 2018 a las 11:56
  • He añadido arriba el código que se ejecuta al intentar hacer un submit al formulario, fíjate en el else ahí le pinto un action al formulario e intento hacer el submit pero evidentemente vuelve a ejecutar el código. el 14 dic. 2018 a las 12:05
  • Este es el error que lanza la consola: jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded El código se ejecuta en bucle. el 14 dic. 2018 a las 12:11
  • Hola de nuevo, gracias. Lo tienes aquí: pruebasphp.com/borrame.php Y creo que lo he arreglado, redirige a la otra página pero tengo que ver si los resultados parten de los datos del formulario. Abre la consola. Pongo el código que he hecho arriba. el 14 dic. 2018 a las 12:51

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.