CODEWITHSUNDEEP
jqueryjquery-uijquery-mobile
user1790064
user1790064

Reputation: 23

dynamically populating a jquery mobile listview without breaking data-filter

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!

Upvotes: 1

Views: 1020

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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>

Upvotes: 1

Related Questions