43

I know this questions appear several places (Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content) but not with an answer that is working for me.

I'm loading some content using ajax, and inserting it into a div like this:

       $.ajax({
            url: "../Services/CalendarService.cshtml?service=true",
            cache: false,
            success: function (data) {

                data = $.parseJSON(data);
                var s = $("#user_tmpl").html();
                var s1 = tmpl(s, data);

                $("#target").html(s1);
                $("#targetRefresh").page();
            }
        });

I've tried setting the targetRefresh on both the target I'm adding the html to, and on the page, but with no luck. The conent is inserted, but styles not applied.

I've also tried

.trigger("enhance")

Any idea what to do?

The html that inserted are a bunch of these:

<div data-theme="e" data-collapsed="true" data-role="collapsible">         <h3>MyOwner2AA</h3>         <p>MyDescription</p>         <p>/Date(1320339836735)/</p>         <p>MyOwner</p>         <i></i>     </div>

Thanks for any help

Larsi

Community
  • 1
  • 1
Larsi
  • 4,654
  • 7
  • 46
  • 75

4 Answers4

91

Try calling .trigger("create") on the element with the new content.

According to the jQuery Mobile docs, "The create event is suited for enhancing raw markup that contains one or more widgets."

EDIT: As of jQuery Mobile 1.4, .trigger('create') is deprecated, and you should use .enhanceWithin() instead. (Thanks to John Mc for the heads-up.)

Phil
  • 2,308
  • 1
  • 18
  • 23
  • Yes! That did the trick! Thanks also for pointing out the documentation. – Larsi Nov 03 '11 at 17:54
  • 14
    This isn't working for me. I tried using 1.0 stable and the nightly build. Any suggestions? I've tried using .page(), .page("refresh"), .trigger("create"). Never any errors, but no styling applied. – snipe Dec 11 '11 at 03:45
  • @snipe: I think you need to make sure you trigger when the new contents have been inserted on the DOM. – cherouvim Mar 06 '12 at 11:43
  • 4
    @snipe - Try triggering the trigger."create" event on the parent element. – JTE Apr 17 '12 at 18:27
  • @snipe I had the same problem and was finally able to solve it with this snippet `$('#id').page("destroy").page();`. Not sure what the performance impact of this solution is, but at least it works. – Morten Mertner Mar 24 '13 at 21:41
  • I ran into the exact same problem... finally put the trigger("create") at the end of the ajax on complete event (where i built the output and updated the dom. – pithhelmet Oct 14 '14 at 18:41
  • As of version 1.4, trigger.create is now depreciated. The new method is called .enhanceWithin(). See the release notes here: http://jquerymobile.com/upgrade-guide/1.4/ – John Mc Jan 13 '15 at 12:00
33

This worked for me for the list view

$('ul').listview('refresh');

Also you can refresh the collapsible

$('#element').collapsibleset('refresh')
Sagar Gala
  • 944
  • 10
  • 10
5

When I tried the solutions above I got an error message in Firebug

uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

I found a fix for this though, instead of calling .trigger("create") after the append of the new elements I called

$("ul").listview();

at the end of the ajax callback function.

This got everything working nicely for me. Hope it helps.

Christopher Käck
  • 443
  • 6
  • 18
5

For those who missed it above, to re-apply JQM styles after adding content dynamically, do this:

$('.myelement').html( myHtmlStr ).enhanceWithin();