CODEWITHSUNDEEP
jquery-mobile
Coen Damen
Coen Damen

Reputation: 2109

Jquery Mobile panel dynamic listview does not render correctly

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.

Listview issie

Upvotes: 3

Views: 4530

Answers (2)

Coen Damen
Coen Damen

Reputation: 2109

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>

Upvotes: 3

Omar
Omar

Reputation: 31732

After appending items dynamically into panel, call .trigger('pagecreate');

$('[data-role=page]').trigger('pagecreate');

or

$.mobile.activePage.trigger('pagecreate');

Demo - jQM 1.3.2 and below

For jQuery Mobile v 1.4, it is different

$('.target').trigger('create')

Demo - jQM v 1.4 Aplha

Upvotes: 3

Related Questions