CODEWITHSUNDEEP
jquery-mobile
mboles57
mboles57

Reputation: 133

jQuery Mobile dynamically remove data-theme then refresh <ul>

I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.

I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome’s Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.

I’ve searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):

    $(this).removeAttr("data-theme");
    //$(this).closest("ul").listview("refresh");
    //$(this).closest("ul").listview();
    //$('#mylist').listview();
    //$("#content-notifications").page();
    //$("#content-notifications").page("destroy").page();
    //if ( $("#content-notifications").data("page") ) {
    //      $(this).closest("ul").listview("refresh");
        //};

Anyone have the correct solution, because I can’t find it!

Thanks-

Matt

Upvotes: 1

Views: 1358

Answers (1)

user700284
user700284

Reputation: 13620

You have to manually remove the class for the old theme in li and add the class for new theme.

$(document).on("click","li",function(){
  $(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});

Demo here - http://jsfiddle.net/ENYxw/

Upvotes: 1

Related Questions