0

tengo una lista de items con autocompletar, la lista la llamo desde mysql a través de php y esos datos los envío por json al jquery que me hace el trabajo del autocompletado, hasta ahí super bien. lo que quiero es que si alguien agrega un producto en la tabla de la base de datos, no se tenga que recargar la pagina de items si no que el json se actualice automaticamente.

Esto es lo que tengo hasta ahora

 function productos(){

    $.ajax({
        url: 'backendSuperIncreible.php',
        type: 'POST',
        dataType: 'JSON',
        data: {id: id.value},
    })
    .done(function(data) {

         return precios = data;
    })

}

Y este es el que me da el despliegue

$(document).on('focus','.autocompletar',function(){
    productos();
    type = $(this).data('type');
    if(type =='idProducto' )autoTypeNo=1;
    if(type =='sku' )autoTypeNo=1;
    if(type =='productoServicio' )autoTypeNo=1;
    $(this).autocomplete({
        source: function( request, response ) {  
             var array = $.map(prices, function (item) {
                 var code = item.split("|");
                 return {
                     label: code[autoTypeNo],
                     value: code[autoTypeNo],
                     data : item
                 }
             });
             //Llamo Al Filtro
             response($.ui.autocomplete.filter(array, request.term));
        },
        autoFocus: true,            
        minLength: 2,

        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            $('#idProducto_'+id[1]).val(names[0]);
            $('#productoServicio_'+id[1]).val(names[2]).attr('readonly', true);;
            $('#valorItem_'+id[1]).val(names[3]).attr('readonly', true);
            $('#impuesto_'+id[1]).html(names[5]+' %');

            cantidad = $('#cantidad_'+id[1]).val();
            impuesto = names[5];
            valor = names[3];
            valorIva= (valor*cantidad)*impuesto/100;
            $('#tax_'+id[1]).val(valorIva);
            subtotal =  (1*((parseFloat(valor)*parseFloat(cantidad)*parseFloat(impuesto))/100)+(parseFloat(valor))*cantidad)
            $('#subTotal_'+id[1]).val(subtotal);
            $( "#porMayor_"+id[1]).on( "click", function() {
                if ($('[id=porMayor_'+id[1]+']')[0].checked===true) {
                    $('#valorItem_'+id[1]).val(names[4]).attr('readonly', true);
                    valor = names[4];
                    valorIva= (valor*cantidad)*impuesto/100;
                    $('#tax_'+id[1]).val(valorIva);
                     subtotal =  (1*((parseFloat(valor)*parseFloat(cantidad)*parseFloat(impuesto))/100)+(parseFloat(valor))*cantidad)
                    $('#subTotal_'+id[1]).val(subtotal);
                    calcular();
                }
                else{
                    $('#valorItem_'+id[1]).val(names[3]).attr('readonly', true);
                    valor = names[3];
                    valorIva= (valor*cantidad)*impuesto/100;
                    $('#tax_'+id[1]).val(valorIva);
                    subtotal =  (1*((parseFloat(valor)*parseFloat(cantidad)*parseFloat(impuesto))/100)+(parseFloat(valor))*cantidad)
                    $('#subTotal_'+id[1]).val(subtotal);
                    calcular();
                }  
            });
            calcular();
        }
    });
}); 

1 respuesta 1

1

La web funciona generalmente por evento, osea el mouse pasa encima de un elemento; este reacciona ejecutando una pieza de javascript, un boton es presionado; lo mismo.

Si quieres que la pagina sola actualize su informacion tienes varias opciones.

Usa Eventos de Tiempo

Usando evento de tiempo puedes ejecutar por minuto tu solicitud de actualizar la información. O por un tiempo mas prudencial según la fuerza del servidor.

Usa websockets

Websockets de JavaScript se conecta a un servidor y el servidor le mantiene actualizado. Es casi lo mismo que usar eventos de tiempo pero esta ves el servidor explicitamente te actualiza sin esperar al evento de tiempo. Esto por supuesto usa mas fuerza y el servidor sirve en tiempo real, no en tiempo de respuesta de una típica llamado http.

1
  • Buena respuesta. El long-polling es más sencillo de implementar pero los websockets son lo que esta persona está buscando. Lo malo, a mi juicio, es que igual necesitas un tercer componente que es un servidor de websocket. Una petición del cliente inserta en la BBDD, la inserción exitosa gatilla un evento hacia el servidor de websockets, el servidor broadcastea el evento a todos los que están viendo el autocompletador. Yo lo he hecho usando Socket.io como servidor y en el front + Elephant.io en el backend PHP. Es bien enrevesado.
    – ffflabs
    el 28 oct. 2017 a las 18:18

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.