Creating and modifying lists with jQuery Mobile?

Question

This concerns jQuery Mobile 1.0 Beta 1

I love jQuery Mobile but for the love of god I can't figure out how to dynamically add list items. I first tried without binding the pagebeforecreate event -- the items were appended to DOM but were not visible, even tho I tried calling many combinations of the following:

$("#categories").listview();

$("#categories").listview('refresh');

$("#categories").listview('refresh', true);

I was getting "Result of expression 'b[0]' [undefined] is not an object." error.

I then figured that I could bind to pagebeforecreate event to append the li-items before jQuery Mobile does its magic. However, this doesn't help.. same result as before.

$().ready(function() {
  $("#browse-categories").live('pagebeforecreate', function() {
    $.get('http://foo.com/api/categories.xml', function(data) {
      $xml = $(data);
      $xml.find('entry').each(function() {
        $("#categories").append("<li>" + $(this).find('title').text() + "</li>")
      });
    });
  });
});

The HTML:

<div data-role="page" id="browse-categories">
    <div data-role="header">
        <h1>Categories</h1>
    </div>

    <div data-role="content">   
    <ul data-role="listview" id="categories">
    </ul>
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

So what the heck?

Ben · Accepted Answer · 2011-07-01 22:30:27Z

3

I have this working in the last alpha release, but haven't tested it in beta 1. I have a page event script thus (remember, it has to come before the jQuery Mobile src is referenced):

$('#YOUR-PAGE-ID').live('pageshow',function(event, ui){
  someFunction();
});

... and the referenced someFunction contains code similar to this:

var list = $("#categories");
list.empty(); 

$.each(results.rows, function(rowIndex){
  // I actually do way more than this; simplified for example
  var data = results.rows.item(rowIndex);
  list.append("<li>"+data+"</li>");
});

list.listview('refresh');

Does that help at all? The refresh is crucial, as is the placement of the script to trigger it.

answered Jul 1, 2011 at 22:30

Ben

7,59533 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

randomguy Over a year ago

Gives "cannot call methods on listview prior to initialization; attempted to call method 'refresh'".. the first script is before including JQM, as you said and the latter after inclusion.

Ben Over a year ago

All of the script I posted is called before jQM is referenced in the page, if that's any help, it's not in two halves.

Steven Lizarazo Over a year ago

The most important part of the answer is "list.listview('refresh');"

shitburg · Accepted Answer · 2012-01-01 20:03:45Z

I had the same issue, this worked for me:

In doc ready, create the dynamic LI without calling the .listview() on it, then hook into the pagebeforeshow event and call the listview() once :

$("#ModeList").bind("pagebeforeshow", function() {
    $("#ModeList ul").listview();
    $(this).unbind('pagebeforeshow');
});

Correction, this works better. Bottom line is you need a slight delay before the refresh:

$(document).bind("pagebeforechange", function( e, data ) {
    urlObj = $.mobile.path.parseUrl(data.toPage);
    if (typeof data.toPage === "string")
    {
            if (page_name == "#pgMode"  ) {
                 $("#ModeList").html("");
                 setTimeout(function() {
                    $("#ModeList ul").listview();
                 }, 1);
            }
    }
});

Collectives™ on Stack Overflow

Creating and modifying lists with jQuery Mobile?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related