JQuery Mobile - Appending new dynamic content - CSS not applied [duplicate]

Question

This is something that was asked before but I still can't get it to work. I'm adding a dynamic content to a page (a list-view) and the CSS is getting lost after adding it. I read about the trigger("create") and even after adding it, the CSS is not applied.

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>').trigger("create");

for (var i=0; i<MyClubsReply.length; i++) 
{
    addClub('#MyClubsList',MyClubsReply[i].Name,MyClubsReply[i].LogoImg,MyClubsReply[i].LastUpdate);
    $('#MyClubsListDiv').trigger("create");
}


function addClub(section,clubName,logoFile,LastUpdate)
{
    $(section).append('<li class=\"ClubListItem\">' +
            '<a href=\"#ClubPage\" data-transition=\"slide\">' +
                '<img src=\"' + PiccoloServer + 'ClubLogos/' + logoFile + '\" class=\"listview-logo-thumb\" />' +
                '<div class=\"ClubListContent\">' +
                    '<h1 class=\"ClubListH1\">' + clubName + '</h1>' +
                    '<p >20 Offers Available</p>    ' +
                '</div>' +
                '<p class=\"ui-li-count\">25d</p>' +                    
            '</a>' +
        '</li>').trigger("create");
}

"MyClubsReply" is a JSON object.

What am I doing wrong? (Or not doing?)

.listview('refresh') not trigger('create')

Omar
– Omar

2013-07-07 11:06:53 +00:00
Commented Jul 7, 2013 at 11:06 — Omar
– Omar, Commented Jul 7, 2013 at 11:06
please put your css or a fiddle

Homam
– Homam

2013-07-07 11:07:21 +00:00
Commented Jul 7, 2013 at 11:07 — Homam
– Homam, Commented Jul 7, 2013 at 11:07

NathanKatwijk · Accepted Answer · 2014-07-01 11:29:06Z

I have created this jsfiddle for you to understand it.

You have to use trigger("create") on the UL Listview building but on everytime you add a new list item you need to use listview("refresh").

http://jsfiddle.net/eRsMV/

<div id="MyClubsListDiv"></div>
<button id="addClubBtn">Add New Club</button>

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>')
    .trigger("create");

$("#addClubBtn").on("click", function () {
    $("#MyClubsList").append(
        '<li class=\"ClubListItem\">' +
        '<a href=\"#ClubPage\" data-transition=\"slide\">' +
        '<img src=\"http://si0.twimg.com/profile_images/2366293550/Club_logo_normal.png\" class=\"listview-logo-thumb\" />' +
        '<div class=\"ClubListContent\">' +
        '<h1 class=\"ClubListH1\">Major Club</h1>' +
        '<p>20 Offers Available</p>' +
        '</div>' +
        '<p class=\"ui-li-count\">25d</p>' +
        '</a>' +
        '</li>'
    ).listview("refresh");
});

Collectives™ on Stack Overflow

JQuery Mobile - Appending new dynamic content - CSS not applied [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related