Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/11/2018, 17:16
Avatar de Hyemin
Hyemin
 
Fecha de Ingreso: agosto-2014
Mensajes: 147
Antigüedad: 10 años, 4 meses
Puntos: 0
JqueryMobile rompe el css al refrescar por ajax

Hola,

Estoy haciendo una APP mobile que consume una API JSON de drupal, el tema es que tengo la siguiente pagina

Código HTML:
Ver original
  1. <div id="PaginaEventos" data-role="page" >
  2.             <div class="miHeader"  id="cabezalPaginaEventos"></div>
  3.  
  4.             <div role="main" class="ui-content" data-role="content">
  5.                 <ul id="listaNoticiaEventos" data-role="listview" data-inset="true" >
  6.                 </ul>
  7.             </div><!-- /content -->
  8.  
  9.             <div class="miFooter"  id="piePaginaEventos"></div>
  10.         </div><!-- /page -->

Cuando inicia la APP se carga la lista de eventos con este metodo:
Código Javascript:
Ver original
  1. function obtenerNoticiasPorCategoria(categoria, cantidad)
  2. {
  3.  
  4.     $.ajax({
  5.         url: "http://mysitio.bogus.com/jsonapi/node/" + categoria + "?page[limit]=" + cantidad + "&sort=-nid",
  6.         type: "GET",
  7.         dataType: "JSON",
  8.         data: {},
  9.         async: true,
  10.         success: function (res) {
  11.            
  12.           $("#listaNoticia" + categoria).empty();
  13.             console.log(res);
  14.             resultado = res;
  15.             for (var i = 0; i < resultado.data.length; i++)
  16.             {
  17.                 pieza = obtenerCabezalNoticia(categoria, resultado, i);
  18.  
  19.                 $("#listaNoticia" + categoria).append(pieza);
  20.                
  21.             }
  22.             $("#listaNoticia" + categoria).refresh();
  23.            
  24.  
  25.         }
  26.     });

Cuando iniacia la aplicaion esto funciona 100% bien, todo es correcto y en la lista de eventos aparecen las noticias formateadas y la lista en perfecto estado

AHora, tengo un timer que cada 5 minutos ejecuta este mismo metodo, la idea es que la lista se vacie y se cargue nuevamente de manera que si hay noticias nuevas se agreguen a la lista, el metodo funciona pero al momento de refrescar se rompe el formato

Por lo que vi, cuado carga por primera vez el primer LI tiene esta clase class="ui-li-has-alt ui-li-has-thumb ui-first-child"

Cuando vacia las cosas y las carga de nuevo por ajax esa clase desaparece del LI