JqueryMobile breaks style while refreshing

JqueryMobile breaks style while refreshing

HI,

I am doing a mobile APP that feeds itself with a JSON API from a Drupal site, so I have this page
  1. <div id="PaginaEventos" data-role="page" >
                <div class="miHeader"  id="cabezalPaginaEventos"></div>

                <div role="main" class="ui-content" data-role="content">
                    <ul id="listaNoticiaEventos" data-role="listview" data-inset="true" >
                    </ul>
                </div><!-- /content -->

                <div class="miFooter"  id="piePaginaEventos"></div>
            </div><!-- /page -->

When the app starts, the list is populated correctly using the following method

  1. function obtenerNoticiasPorCategoria(categoria, cantidad)
    {

        $.ajax({
            url: "http://mysitio.bogus.com/jsonapi/node/" + categoria + "?page[limit]=" + cantidad + "&sort=-nid",
            type: "GET",
            dataType: "JSON",
            data: {},
            async: true,
            success: function (res) {
              
              $("#listaNoticia" + categoria).empty();
                console.log(res);
                resultado = res;
                for (var i = 0; i < resultado.data.length; i++)
                {
                    pieza = obtenerCabezalNoticia(categoria, resultado, i);

                    $("#listaNoticia" + categoria).append(pieza);
                   
                }
                $("#listaNoticia" + categoria).refresh();
               
            }
    1.     });

When the APP starts everything works 100% well, everything is fine and the event list is populated correctly, it is smooth, every article is there and work as intended.

Now, I have a timer that every 5 minutes execute this very same method in order to refresh the list, so in case of a new article is added the user will have it right now. The method works but when the list refresh the format is broken

I have inspected the HTML code genetared in the html inspector of firefox and I notice one thing, when the first list is generated, the first  LI item has this class

  1. class="ui-li-has-alt ui-li-has-thumb ui-first-child"

But when the method empy the list and redraw it, that class is missing from the LI item

I have looked in google for answers, I have spend a couple hours of trial and error but I have not much to show it for.

I would apreciate any advice you can share with me to solve this