CODEWITHSUNDEEP
jquery-mobile
Todd Vance
Todd Vance

Reputation: 4711

Adding 'Data-Filter' True in code to UL, but doesnt show up on page

So I want to add the data filter to the UL if there are certain number of LI's. I get the attr to add correctly, but nothing shows up on page.

 else
               {
                    $('#presentations').attr("data-filter", "true");
                        $('#presentations').html('');
                              for (var i = 0; i < results.rows.length; i++) {
                                       $('#presentations').append(
                                       '<li><a href="javascript: loadPresentation(\'' + results.rows.item(i).presentName + '\';");">' + results.rows.item(i).presentName + '</a>'
                                    + '<a href="javascript: deleteConfirm(\'' + results.rows.item(i).presentName + '\');">delete</a></li>');
                                    }
                                   }
                                $('#presentations').listview('refresh');
                                $.mobile.changePage($('#dashboard'), {reloadPage: "true"} );
                                $('#dashboard .message').text('Your presentations');
                            }

I'm guessing its a caching issue but I can't figure out how to work around it. Help?

Upvotes: 1

Views: 3518

Answers (2)

Todd Vance
Todd Vance

Reputation: 4711

Here is the code in action - thanks Gerjan! 

else {
             // don't create duplicate/double filter
             $(".ui-listview-filter").remove();
             if (results.rows.length > 3) { //Add filter search if more than 3 presentations.
                    $('#presentations').listview('option', 'filter', true);
             }
             $('#presentations').html('');
             for (var i = 0; i < results.rows.length; i++) {
                    $('#presentations').append(
                                '<li><a href="javascript: loadPresentation(\'' + results.rows.item(i).presentName + '\');">' + results.rows.item(i).presentName + '</a>'
                             + '<a href="javascript: deleteConfirm(\'' + results.rows.item(i).presentName + '\');">delete</a></li>'
                );
            }
            $('#presentations').listview('refresh');
            $('#presentations').trigger("listviewcreate");
            $.mobile.changePage($('#dashboard'), { reloadPage: "true" });
            $('#dashboard .message').text('Your presentations');
            }

Upvotes: 0

GerjanOnline
GerjanOnline

Reputation: 1881

I've tried to re-initialize, recreate or refresh the listview but none of it works.

The only way I can get it working is by doing:

    $('#listview').listview('option', 'filter', true);
    $('#listview').trigger("listviewcreate");

So you trigger manual the listviewcreate event and before that you set the filter to true. (setting with attr(), data() or jqmData() also doesn't work)

Example: http://jsfiddle.net/N7Z9e/143/

Upvotes: 5

Related Questions