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.