AJAX - Ajax mas formulario

 
Vista:

Ajax mas formulario

Publicado por Diego (3 intervenciones) el 21/05/2015 16:23:35
Buenas tardes!
Tengo una pagina web en PHP que carga muchas imagenes de productos que están guardadas en una base de datos.
A su vez cada imagen es parte de un formulario donde se ingresa una cantidad de productos y se envía a un carrito donde va sumando.
El envio se hace mediante AJAX para no recargar la pagina y tambien una vez que se envia el formulario el boton enviar cambia a un boton que dice producto cargado, para que no vuelvan a cargarlo nuevamente.
El incoveniente surge que en lugares donde la conexion es muy lenta la página tarda en cargar mucho por la cantidad de imagenes que tiene sobretodo, entonces cuando un cliente aprieta el boton de cargar producto AJAX no funciona o lo que me trae problemas es que funciona pero el boton no pasa a PRODUCTO CARGADO sino que el cliente lo aprieta mas de una vez y lo carga mas de una vez el producto.
¿Hay alguna manera de solucionar esto para que tome el primer clic sobre el boton?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Ajax mas formulario

Publicado por Maxi (2 intervenciones) el 21/05/2015 17:17:58
Este código tal vez te puede ayudar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$('#boton').on('click', function () {
    //verifico si el botón está disabled
    if (!$(this).attr('disabled')) {
        //si no lo esta realizo mi request ajax
        enviarPeticion($(this));
        //y paso el esto del botón a disabled
        $(this).attr('disabled', true);
    }
});
//función que hace la petición ajax
function enviarPeticion (target) {
    $.ajax({
        type: 'post',
        url: 'controllers/buy',
        data: {idProducto:1},
        success: function (response) {
            //una vez que se completó el request paso el atributo
            //disabled del botón otra vez a false, para poder seguir
            //haciendo nuevos requests
            target.attr('disabled', false);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //también hay que cambiar el estado en caso de error
            //dado que si ocurre un error en el servidor el botón
            //quedaría inabilitado para futuras peticiones
            //También sería oportuno agregar un mensaje para que
            //el usuario sepa que ocurrió un error
            target.attr('disabled', false);
        }
    });
}

También te paso algunas recomendaciones para disminuir los tiempos de carga:

Hay varias partes que pueden mejorar el rendimiento disminuyendo así el tiempo del request. Si hay muchas imágenes y el usuario hace click en el botón de compra antes de que todas se terminen de descargar, el request ajax puede quedar demorado. Recuerda que un dominio sólo permite dos peticiones en simultáneo. Una solución sería paginar los productos a un número razonable.
También sería bueno ver que la relación entre compresión de la imagen y calidad sea la adecuada, muchas veces las imágenes pueden comprimirse un poco más sin perder por ello demasiada calidad.
Modifica tu archivo .htaccess para permitir el cacheo de las imágenes.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ajax mas formulario

Publicado por Diego (3 intervenciones) el 21/05/2015 17:30:11
Hola Maxi! Muchas gracias!! lo voy a probar y te cuento, gracias por las recomendaciones las voy a tener en cuenta tambien en el mejoramiento de la página
Muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Vainas
Val: 47
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Ajax mas formulario

Publicado por Vainas (71 intervenciones) el 22/05/2015 20:30:43
Buenas:

Añado cosas a lo que dice Maxi:

No lo he probado pero yo creo que si cargas los eventos de click de los botones dentro del jquery ready hasta que el documento no este cargado ese boton no tendria ninguna funcion asignada asi que no se ejecutaria nada (siempre y cuando no sean botones submit).

No se hasta que punto se veria bien tambien pero podrias determinar que los botones por defecto vengan desabilitados y cuando se cargue la web entera los habilitas (Esto tiene el inconveniente de que javascript este desactivado en el navegador del cliente claro).

La carga de imagenes si es un problema, aparte de lo que dice Maxi podrias buscar hacer la carga por ajax para al menos tener cargadas todas las funcionalidades antes.

Sobre las conexiones simultaneas he conseguido esto: http://www.browserscope.org/?category=network. Aqui dice que ahora mismo se permiten hacer una media de 6 conexiones por navegador a un mismo servidor.

Espero que sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Ajax mas formulario

Publicado por Maxi (2 intervenciones) el 24/05/2015 07:05:04
Vainas, muchas gracias por le artículo, me puso muy contento ver como cada día hay nuevas mejoras que facilitan la vida de usuarios y programadores.

El código no está dentro un onready porque está pensado para estar antes del cierre del body. Es recomendable poner los scripts al final del documento para optimizar la descarga del resto de los recursos (imágenes, css, etc).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar