0

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

      <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:

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="#" class="ui-btn ui-btn-a ui-btn-icon-right ui-icon-delete">'+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

introducir la descripción de la imagen aquí

Alguna sugerencia? Desde ya muchas gracias.

1 respuesta 1

0

Agrego: acabo de solucionarlo temporalmente poniendo

$('#carrito_pedido_actual ul').empty();

cada vez que se recarga la página. De esta forma siempre tengo el DOM limpio. Se que no es la mejor solución y aunque funciona, agradecería si alguien puede corregirme o sugerirme una mejora en mi código. Gracias.

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.