dynamically populating a jquery mobile listview without breaking data-filter

Question

There have been a lot of posts making references to the

$('#ListViewID').listview("refresh")

call that needs to happen after your dynamically modify the DOM of a element that is defined as a listview. I'm having no problems getting the listview to look right. The problem is, I marked up my listview element to use the data-filter features of jquery mobile. This works with a static listview, but doesn't filter the dynamically populated contents of my listview. I'm NOT concatenating a string for creating my listview - I'm cloning a prototype cell. Is this the problem?

here's my code

// capture prototype
        var prototype = $("#" + currentPage).find(".prototype");

After identifying the prototype, I similarly lock onto the "Shell" which is the listview element:

        var shell = $("#" + currentPage).find(".Rolodex");
        // declare variable for focus cell
        var thisrow;

....

                // map fields
                var pTitle;
                var pSubtitle1;
                var pSubtitle2;
                var pJumper;
                var cellLock;

Here, I duplicate the prototype cell as many times as I need for the data coming in

                // build empty rows
                for (i=0; i<len; i++) {
                    thisrow = prototype.clone();
                    thisrow.show();
                    thisrow.addClass('cell');

Here, I remove the prototype class for each cell, so I can identify all of my "Cells" by the ".cell" class

                    thisrow.removeClass('prototype');
                    thisrow.attr("id","cell_"+i);
                    shell.append(thisrow);
                }
                shell.listview("refresh");

                for(i=0; i<len; i++) {
                    // map available fields
                    thisrow = shell.find(".cell").eq(i);
                    pTitle = shell.find(".title").eq(i+1);
                    pSubtitle1 = shell.find(".subtitle1").eq(i+1);
                    pSubtitle2 = shell.find(".subtitle2").eq(i+1);
                    pJumper = shell.find(".execBrowse").eq(i+1);
                    // log row info
                    console.log("Row = " + i + " content = " + 
results.rows.item(i).code_content);
                    // is hyperlink?
                        if (/^http[s]?\:\/\//.test(results.rows.item(i).code_content)) {
                            thisrow.find(".sub-menu").show();
                            pJumper.attr("href",results.rows.item(i).code_content);

                                // yes is a hyperlink

...                                     
pTitle.html(results.rows.item(i).code_content);
...

All this works fine and good, and produces a listview that looks as I expect it to - the problem is, the data-filter attribute does not work for searching this dynamically created listview. Any thoughts? Much appreciated!

Gajotres · Accepted Answer · 2012-12-27 16:14:22Z

1

This should work easily.

I have created an example for you: http://jsfiddle.net/Gajotres/pCqjs/.

In it there's a small listview and $.ajax is dynamically appending more items to it. New itens can be searched through the filter.

You need to check if your dynamically generated content is identical to the specifications and it should look like this (this is an example):

<li>
    <a href="#cars">
        <h3>Movie title: Jurasic Park</h3>
        <p>Blah Blah Blah</p>
    </a>
</li>

answered Dec 27, 2012 at 16:14

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

1 Comment

user1790064 Over a year ago

Thanks for the example code. I came around to a similar solution myself, appending concatenated items instead of cloning a "prototype" cell. The concatenated items allow the listview to refresh and make them searchable.

... var listitem = "<li>Some stuff</li>"; var lview=  $('#listviewid'); lview.append(listitem); lview.listview("refresh");

Collectives™ on Stack Overflow

dynamically populating a jquery mobile listview without breaking data-filter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related