i'm working on a jquery mobile application with 1.4.5 version I would like to load a nested listview retrieving the HTML code to a service. However nested <ul><li> not rendering correctly. They seem to have no styles But If i use the same code inside html page it works

Here is my code:

HTML

<div data-role="main" class="ui-content"> <ul data-role="listview" data-inset="true" id="MainMenu"> </ul></div>

Javascript

<script type="text/javascript" charset="utf-8"> $(document).ready(function () { $.ajax({ type: "POST", async: true, url: "http://localhost/myproject/Category/Category.asmx/GetCategoryMenu", data: "{language:'en-En'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (mainMenu) { var list = $("#MainMenu"); list.empty(); list.append(mainMenu.d); list.trigger('create'); }, error: function () { window.ShowError("Error :("); }, complete: function () { $("#MainMenu").listview("refresh"); } }); });

And this is HTML code returned from web service

<ul data-role="listview" data-inset="true" id="MainMenu"> <li id="mainLi1"> Menu1 <ul id="mainUl1"> <li id="subLi1-6">option1 </li> <li id="subLi1-7">Option2 </li> </ul> </li> <li id="mainLi2"> Menu2 <ul id="mainUl2"> <li id="subLi2-3">Option1 </li> <li id="subLi2-4">Option2 </li> <li id="subLi2-5">Option3 </li> </ul> </li> </ul>

I tried everything:

• .trigger('create')
• different id on every ul/li
• changing jquery mobile and jquery framework version

This is my code in action http://jsfiddle.net/7c892qb1/9/

Any suggestion is appreciated thanks