1

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?

Community
  • 1
  • 1
Devin Dixon
  • 11,553
  • 24
  • 86
  • 167
  • Did you try `$('#store-info').listview( "refresh" );` Didn't work for me unless i had the refresh in there. What exists in the DOM and what is programmatically inserted? – Jeemusu Aug 27 '12 at 01:16
  • I get this: Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' – Devin Dixon Aug 27 '12 at 02:01
  • So that means your
      doesn't exist in the DOM until you programmatically insert it? I had a similar problem and my solution was to place the empty
        into my HTML, and then insert just the
      • elements programmatically. That way you can use refresh.
       – Jeemusu Aug 27 '12 at 02:05
    • I've tried that also with this: http://pastebin.com/7S5YfiXR . This is an html string which gets appeneded to the body using $('body').append(html); and then trigger is used $('#product_browse').trigger('create');.....still products undefined error. – Devin Dixon Aug 27 '12 at 02:43
    • Can you please isolate your code and make an example using jsbin. That includes the javascript that generates the list. – Jeemusu Aug 27 '12 at 03:01
    • I fixed by removing this line and replacing it with: //parentId = parentUrl || parentPage[ 0 ][ $.expando ], parentId = parentUrl, – Devin Dixon Aug 27 '12 at 11:56
    • Not sure of the side effect yet but everything seems to be working. – Devin Dixon Aug 27 '12 at 11:56

    2 Answers2

    5

    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.

    Yuval
    • 3,207
    • 32
    • 45
    • Glad to be of help. The bug I filed was closed since jQuery mobile doesn't support this scenario at this moment. I did figure out something in this logic though: any time you'd like to `.trigger('create')` you're probably about to show the page. `.trigger('create')` will make a difference if the page has *already been loaded before*. So in fact, you can either check for the `ui-page` class on the page before you call `.trigger('create')`, or simply call `trigger('create')` right after the `$.mobile.changePage()` that probably follows right after. – Yuval Sep 04 '12 at 23:07
    • Hmmmmmm, I have to yell foul for a framework claiming it does not support a certain scenario, especially for one as simple as this. – Devin Dixon Sep 04 '12 at 23:21
    • It worked for me. My scenario was: 1) the page and its widgets are created using a template and some AJAX data, 2) jQM is asked for a refresh of all the page widgets with .trigger('create'), 3) the page is shown. As at first run the page hasn't yet got the 'ui-page' class, my code failed with TypeError error. Adding the class before triggering the event worked. Thank you!!! – Ameba Spugnosa Dec 04 '12 at 11:39
    0

    Try this:

    $("#nav-panel").load("nav-panel.html", function () {
    $(this).trigger("create");
});
    AstroCB
    • 12,337
    • 20
    • 57
    • 73
    Girish
    • 1