javascript - JQuery Mobile UL List Still Not Working fro Dynamic List

Question

Has anyone come up with any solution to the JQuery Mobile UL List View?

I'm currently using JQuery Mobile 1.1.2 Alpha, and the bug I am referring to is an old one:

jQuery Mobile proper way to initialize a listview

My list view looks like this:

<ul data-role="listview" id="store-info">
        <li>My First Store</li>
        <li>48 Big Oak Lane </li>
        <li>Stamford</li>
        <li>CT</li>
        <li>06903</li>
</ul>

I have tried to use:

$( "#store-info" ).listview();

and also this:

$('#stores_main_view').trigger('create');

on the following

<div data-role="content" id="stores_main_view" class="content ui-content" role="main">
<ul data-role="listview" class="ui-listview">
        <li>
    <form class="product-form">
        <ul data-role="listview" id="store-info">
        <li>My First Store</li>
        <li>48 Big Oak Lane </li>
        <li>Stamford</li>
        <li>CT</li>
        <li>06903</li>
</ul>

    </form>
</li>
</ul>
</div>

Both yield the same error when trying to create a list dynamically:

Uncaught TypeError: Cannot read property 'jQuery1710409190776059404' of undefined 

Is there any good solution to this problem yet?

Answer 1

The jQuery mobile code (in the method _createSubPages, exactly the one you quoted in the comment) is expecting created controls to be in a .ui-page.

Simply adding the class on the page where the control resides before calling trigger('create') fixed the problem for me.

$('#page-id').addClass('ui-page')

It also works if you do a

$.mobile.loadPage('#page-id')

Hope this helps.

Answer 2

Try this:

$("#nav-panel").load("nav-panel.html", function () {
    $(this).trigger("create");
});