jQuery Mobile nested list refresh solution

Question

I am trying to find a workaround for refreshing nested lists with version 1.1 of jquery Mobile which currently leaves you with a blank page.

I know one existing solution is to enable pushState but that sends you back to the root of the list and screws with the history state on your next nested list view.

The solution I came up with below is not pretty but works on iOS and newer android.

$(document).bind("mobileinit", function(){

 var urlEx = '#&ui-page=5-0';  //ending of nested list url

 if (window.location.href.indexOf(urlEx) != -1){

  history.replaceState("", "0", "index.php");
   setTimeout("window.location.href='https://FULLURL#/FULLURL&ui-page=5-0'",100);
 }

 window.history.pushState("", "0", "index.php"); 

});

I realize that pushState and replaceState aren't supported by every browser and that I could try to use:

window.location.href = window.location.href.substring(0,window.location.href.indexOf('#'));

instead but it becomes much choppier of a user experience.

I'm hoping someone could shed some light on what could be done better or how it can be done better/more reliably.

Answer 1

$("#<mySelector>").listview("refresh");

or

$("#<mySelector>").refresh("listview");

Unless I'm completely mis-understanding your question, you should be able to use either of the lines above to refresh the list that you're adding to where <mySelector> is whatever JQuery-compatible selector that will return your listview.

Answer 2

This code worked for me:

$("#newList").append("<li class='ui-li-desc'><div><b>"+data[i].Title+":</b></div><small><div class='ui- li-desc'>"+data[i].Content+"</div></small></li>");

$("#newList").listview("refresh");

Here #newlist is the ID for ul and data is an object.