Jquery Mobile Panel styling issues

Question

Hello there i am using the code bellow to load a sliding panel to my page and load the <li> content inside of it from an external html file. The problem is that when i am loading the data from external html file the styling doesn't applying. If i move the code inside my primary html file it works fine. In external html file i also loaded the .css files

Here is my full working code and bellow i will post and what i am trying to do.

//Loading the jquery css
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">

//Loading jquery and jquery mobile
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>

//Before open i am loading the external file with content
<script type="text/javascript">
  $(document).on("pagecreate", "#panel-responsive-page1", function () {
    $( "#nav-panelz" ).on( "panelbeforeopen", function( event, ui ) {
      $("#loadexternal").load("external.php");
      alert('opened');
    });
  });
</script>

And inside my body

<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page"> <!-- STARTS data-role="page" -->

<div data-role="panel" data-display="push" data-theme="b" id="nav-panelz" class="mypanel" style="z-index:250000;">

<ul data-role="listview" id="loadexternal">

//at this was the code bellow and works great
<li data-icon="delete"><a href="#" data-rel="close" style="color:#09F;">Close menu</a></li>
<li><a href="#panel-responsive-page2">Menu one</a></li>
<li><a href="#panel-responsive-page2">Menu two</a></li>
</ul>

</div>


</div> <!-- ENDS data-role="page" -->

If i remove the two lines and put it in my external.php file the style is not apply.

<li><a href="#panel-responsive-page2">Menu one</a></li>
<li><a href="#panel-responsive-page2">Menu two</a></li>

Thank you all!

Screenshots bellow will help you what i mean:

And from external file:

Answer 1

You need to enhance elements that are dynamically injected. To enhance/initialize all items in spite of their type, you need to call .enhanceWithin() on parent div.

Although .enhanceWithin() should do the job, however, it looks like it failed here. Anyway, all you need to re-enhance listview widget by calling .listview("refresh"); after successfully loading external elements.

$( "#nav-panelz" ).on( "panelbeforeopen", function( event, ui ) {
  $("#loadexternal").load("external.php", function () {
     $("#loadexternal").listview("refresh");
  });
});