jQuery Forum

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