Jquery Mobile panel dynamic listview does not render correctly

jquery-mobile

Solution

OK so the trick was to add the refresh at the bottom of the userdetailspanel part.

So, after the UL, add:

<script type="text/javascript">
       $('#commandlist').listview().listview('refresh');
</script>

Problem

I have a searchresults.php page which shows several users that have been found. Also on the searchresults.php page is a panel ``` <div data-role="panel" id="mypanel" data-display="overlay" data-theme="a"> <div id="loadedprofile"> </div> </div><!-- /panel --> ``` When I click on one of the "user divs" the following Jquery function fires to open the panel: a panel on select of a search result. The JQuery code: ``` $('[id=profile]').on("click", function(e) { e.preventDefault(); var userid = $(this).attr('userid'); //window.location.href = "userdetails.php?userid=" + userid; $("#mypanel").panel("open"); $("#loadedprofile").load("userdetailspanel.php?userid=" + userid); $("#mypanel").trigger("updatelayout"); $('#commandlist').listview('refresh'); $('[data-role=page]').trigger('pagecreate'); $.mobile.activePage.trigger('pagecreate'); $('#commandlist').listview().listview('refresh'); }); ``` Ok, so the panel opens up correctly and the dynamic page (userdetailspanel.php) is loaded correctly (see image). But ALSO on the userdetailspanel.php is a listview. ``` <ul data-role="listview" data-inset="true" id="commandlist"> <li> <a href="#" id="mylink" name="mylink" > <img src='bolt.png' class="ui-li-icon" />Link </a> </li> </ul> ``` This listview is not rendered correctly. I just see blue hyperlinks.

Original source