CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Sergiodiaz53
Sergiodiaz53

Reputation: 1288

Loading HTML in <div> before .ready

At first I'm using JQuery Mobile. I have already investigated about loading HTML inside a div but I having some problems.

The main idea is that I have 3 differents menus (which are lists) and each one stored in a HTML file generated by the server. /Menu1.html, /Menu2.html, /Menu3.html. It has to be this way because menus could change dynamically.

So, the menus looks like this:

<ul>
  <il><a href="whatever1> Option1 </a></li>
    <ul>
      <il><a href="whatever1> Option1.1 </a></li>
    </ul>
  <il><a href="whatever2> Option2 </a></li>
</ul>

I'm doing it this way:

    <div id="menuview">

    </div>

    <script type="text/javascript">
        $("#menuview").load("data/menu1.html");
    </script>

And it is loading the list, right, but without css. So What I'm seeing is just the list and not a JQM linked list view like the demo here: http://demos.jquerymobile.com/1.4.0/listview/

If I copy the menu1.html inside the div manually it works perfectly. I'm not just asking for a solution, maybe is there any better way to do this and I don't know it.

Thanks in advance!

Upvotes: 1

Views: 344

Answers (1)

Omar
Omar

Reputation: 31732

When adding any items dynamically, you need to initialize them manually.

Inside each menu you have, add initialization function.

<ul>
 <!-- elements -->
 <script>
  $(function () {
    $("ul").listview();
  });
 </script>
</ul>

Note that nested listview is removed from jQM 1.4.

To create a nested listview, check this official demo.

Upvotes: 1

Related Questions