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.