Foro

Home Forums Programación problema con dom en jquery mobile al agregar elementos dinamicamente.

This topic contains 3 replies, has 2 voices, and was last updated by  shockdude 2 años, 11 meses .

Viendo 4 respuestas - de la 1 a 4 (de 4 en total)
  • problema con dom en jquery mobile al agregar elementos dinamicamente.

    Intervenciones
  • shockdude 
    Participant

    Hola a todos. Tengo el siguiente listview en jquery mobile, donde se listan pedidos de un carrito que armo dinámicamente:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    <div id="carrito pedido actual">
                <ul data-role="listview" data-inset="true" class="removemenuitem">
            <li data-role="list-divider" id="cart_top">PEDIDO ACTUAL</li>
            <li data-theme="a" id="cart_bottom">
              
              </li>
          
            
                </ul>
                </div>

    lo lleno en forma dinámica desde javascript con los items tomados de un json en localstorage:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.

    var pedidoCompleto = JSON.parse(localStorage.getItem('pedido'));


    var array_precio = [];
    pedidoCompleto.items.forEach(function(item){

    $("#carrito_pedido_actual ul").append('<li data-icon="delete" data-theme="a" data-name="'+item.itemId+'" id="cart_bottom" class="ui-li-has-count"><a href="#">'+item.itemNombre+' - Cantidad '+item.itemCantidad+'<span class="ui-li-count"><span id="mozox" class="currency">'+item.itemPrecio*item.itemCantidad+'</span></span></a></li>');
    array_precio.push (item.itemCantidad*item.itemPrecio);

    });
    var precio_total = array_precio.reduce(function(accumulator, currentValue) {
        return accumulator + currentValue;
    });
    $("#carrito_pedido_actual ul").append('<li data-icon="false" data-theme="a" id="cart_bottom"><a href="#">TOTAL: <span class="ui-li-count"><span id="mozox" class="currency">('+precio_total+')</span></span></a></li>');        


    });

    Hasta acá todo bien, funciona perfecto, se llena con los items que contiene el json. El problema es cuando regreso a la pagina anterior (ej: para agregar un nuevo pedido) y vuelvo nuevamente al carrito. Este tiene los items duplicados dentro del DOM, es decir, se duplicó el html pero internamente en localstorage está todo bien, por lo que asumo es algo de la caché de DOM… no tengo mucha idea.

    Ahora bien, si desde la pagina anterior presiono F5 y vuelvo al carrito, éste funciona bien. Se que tiene algo que ver con refrescar la página. Estuve indangando sobre la utilización de refresh y create en jquery mobile cuando uno genera elementos dinámicamente, pero sinceramente no entiendo. Probé de todo y sigue sin funcionar.

    Adjunto imágen para mas detalles:

    Alguna sugerencia?
    Desde ya muchas gracias.

    • This topic was modified 2 años, 11 meses by  shockdude. Reason: correccion en imagen

    • This topic was modified 2 años, 11 meses by  shockdude. Reason: correccion en imagen
    shockdude 
    Participant

    Agrego: acabo de solucionarlo “temporalmente” , o con un pequeño hack como quien dice, poniendo lo siguiente:

    $(‘#carrito_pedido_actual ul’).empty();

    Esto lo pongo cada vez que se regarga la página para limpiar y recrear el DOM nuevamente. Se que no es la forma correcta y aunque funciona, agradecería si alguien pudiese orientarme con mi código.


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola @shockdude,

    El tema está en que al entrar de nuevo en el carrito, la vista no se regenera, trabajará con la vista previamente creada y no la “resetea”.

    Si no recuerdo mal JQuery Mobile tiene un método refresh para estos casos, por ejemplo:

    1.  $( "#mylist" ).listview( "refresh" );

    En esta url tienes más info: http://api.jquerymobile.com/listview/

    Espero te sea de ayuda :)


    shockdude 
    Participant

    José: gracias por tu respuesta.
    Ya había probado con listview(“refresh”); y .trigger(“crefresh”); (y “create” también, en ambos casos).
    No se por qué motivo no funciona ni da errores.

    Ahora está solucionado aunque de una forma no convencional.


Viendo 4 respuestas - de la 1 a 4 (de 4 en total)

You must be logged in to reply to this topic.

RT @PWAExpertsIO: 🎙️ Cómo capturar 🎼 audios con tu #PWA. @JoseJ_PR te enseña cómo hacerlo a través de este #tutorial👇🏼 https://t.co/Rkpw609:57 PM Jun 8th