can't apply style to listview when content changed dynamically

Question

The following markup

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true">
        <li><a href="#">elem</a>
    </ul>
</div>

is styled as follows on page initial load

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li class="ui-first-child ui-last-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">elem</a></li>
    </ul>
</div>

However, If I apply new content (li elements) and perform the recommended .trigger("create")

    var html = "";
    objects.forEach(function(object)
    {
        html += "<li id=\"o_" + object.id + "\"><a href=\"#\">"
            + object.name 
            + "</a></li>";
    });

    var ul = $("ul#summary");
    ul.empty();
    $(html).appendTo(ul).trigger("create");

styling is not applied, instead I get the following:

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li id="o_0"><a href="#" class="ui-link">elem</a></li>
    </ul>
</div>

I have also tried with .trigger("refresh") .enhanceWithin() .refresh() and .refreshView() to no avail.

How do I get Jquery-Mobile to style new dynamic content in this scenario?

jquery-1.12.3.js
jquery.mobile-1.4.5.js

Possible duplicate of [jQuery Mobile does not apply styles after dynamically adding content](http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content) — , Jul 13 '16 at 03:33
According to the possible dupe, there's a new function called `enhanceWithin`. Call it on the element that the content is being added to — , Jul 13 '16 at 03:34
@Terminus I've also tried enahnceWithin without luck - if you look closely, jqm is actually styling the content eg `ui-link` class is being added, but it is not doing the job I would expect - making the li a listview item. — pstanton, Jul 13 '16 at 04:00
Are you targeting the `li` or the `ul`? Try specifically `trgger`ing on the `ul` — , Jul 13 '16 at 04:03
@Terminus I think the code snippet above would enhance the ul, but if i specifically target the ul via `ul.enhanceWithin()` same result. — pstanton, Jul 13 '16 at 04:09

score 0 · Answer 1 · answered Jul 13 '16 at 04:13

0

after trying many combinations, I have found that ul.listview("refresh") is the only one that works:

        var ul = $("ul#summary");
        ul.empty();
        $(html).appendTo(ul);
        ul.listview("refresh");

I do not like this solution because it requires me to know that the ul is a listview.

I hope that someone can improve on this answer with a more generic solution and if so I will allocate the tick.

answered Jul 13 '16 at 04:13

pstanton

35,033
24
126
168

a literal interpretation of the [docs](http://api.jquerymobile.com/listview/#method-refresh) might lead one to believe this is behaving as intended. – Jul 13 '16 at 04:39
Not that's any consolation but you could chain the calls a bit more (unless this isn't your full code and you're adding events to the `html`...) `ul.empty().append(html).listview("refresh");` – Jul 13 '16 at 04:39
@Terminus thanks, but a literal interpretation of "Enhancing new markup" in http://demos.jquerymobile.com/1.0/docs/pages/page-scripting.html suggests listview should update using the more generic `trigger("create")` - "This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.)." also, chaining is ok, but not always better - subjective. – pstanton Jul 13 '16 at 04:58
This is the correct solution. Each widget in jQM has its own refresh method. EnhanceWithin is called on parent div/container. Trigger create is deprecated and will be removed, so avoid it. – Omar Jul 13 '16 at 06:25
@Omar I would very much like it if there were a way of telling JQM to "refresh" every widget within a block, thus removing the need to know each widget contained by a block. I thought 'enhanceWithin' / trigger create would do this, but it doesn't. If there is a way to do this, I will certainly give the tick to who can explain it! – pstanton Jul 14 '16 at 04:30
enhanceWithin does the job; as I said, call it on container. `$("[data-role=main]").enhanceWithin();`. – Omar Jul 14 '16 at 06:17
Well, you're right. `enhanceWithin()` creates widgets but doesn't _refresh_ them. This should be reported. https://jsfiddle.net/Palestinian/onpmb5c9/ – Omar Jul 14 '16 at 08:33

can't apply style to listview when content changed dynamically

1 Answers1