Simple way to init inserted elements

[sdhull]

There needs to be a simple way init everything, and that init needs to be idempotent (something similar to FB.XFBML.parse).

If I were to do something like this:

$(".ui-content").append("<ul data-role='listview' data-inset='true'><li>Foo</li><li>Bar</li></ul>");

Ideally, jQuery Mobile should automatically handle this and parse it. But I understand that may be difficult in all cases (replace/insert/append/etc). So I should at least be able to do something like:

$(".ui-content").jqmobile.parse();

Better yet, I should be able to do something like this:

var newList = $("<ul data-role='listview' data-inset='true'><li>Foo</li><li>Bar</li></ul>").jquerymobile.parse();
$(".ui-content").append(newList);

[toddparker]

We completely agree that we need an easy way to enhance appended markup. It's a tricky thing to get right so we've been kicking around ideas internally on this. On our radar for sure.

[scottjehl]

Thanks for the idea! I think what we'll end up doing is something along the lines of this (currently in the decoupled widgets branch): df92fbd

It'd work like this:
$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );

I'm going to move this to the feature requests wiki. Thanks!

[tstone]

!!!!!!!

awesome! been waiting for this...

[sdhull]

@scottjehl: that syntax looks good to me. I look forward to seeing that get into a release.

@toddparker: while you guys are discussing / implementing, in the meantime, could you please point me towards a resource that can show me the manual way of enhancing appended markup? This is blocking me from continuing forward development.

Thanks guys.

[toddparker]

You can call the specific plugins (slider, collapsible, etc.) manually on the markup you're injecting. If you're adding/removing content from an existing widget like a listview or select, call the refresh() method on it.

[sdhull]

@toddparker: having more than a general explanation would be useful to me, and probably useful to many others while we workaround this issue.

Specific examples?

$("[data-role=controlgroup]").controlgroup();  // ???

(Coincidentally, the above doesn't work for me)

[scottjehl]

So, you'll want to use the :jqmData(...) selector for one, just in case there's namespacing on the data attrs, but basically, you can check the top of all of the widgets in this commit for the particulars. We plan to get these documented ASAP as well.

df92fbd

[sdhull]

@scottjehl: So I checked out the decoupled-widgets branch and built jquery mobile. Works pretty well. Kinda breaks the bottom of the page and the footer toolbar (well the toolbar still works but it stops following page scroll).

All in all, much better than before. Thank you!!

[TommyKolkman]

It seems to work only partly for me; I checked out this branche and I'm running this code:

$('#wordpress').live('pagecreate',function(event){
$.getJSON('http://www.steez.nl/?json=get_recent_posts&callback=?', function(data){
$.each(data.posts, function(key, value) {
$('.blogList').append('

'+ this.title +'

'+ this.excerpt +'

').trigger('enhance');
});
});
return false;
});

But only ua-link seems to be enhanced afterwards, the rest of the styles aren't. It's probably something I'm doing wrong myself, but I can't see what.

Also, @toddparker, which refresh() method are you referring to? This might apply better to my situation.

[dafinley]

Is it possible to put the ul element in the dom already, then stuff the inner html, then call the refresh on the ul element?
Instead of trying to inject the ul element...inject the innerHTML if you can

[dafinley]

This might be a shortcut as well.....
http://jquerymobiledictionary.dyndns.org/faq.html

[sdhull]

@scottjehl: is there a timeline for merging decoupled-widgets into master? I noticed that Beta 1 has been released but the decoupled widgets branch is still unmerged. This ticket was marked as "Critical" and then closed, implying that this is fixed, but on mainline this is still a problem, is it not?