Hi,
I'm trying out jQuery mobile on top of a REST-api, which I am calling via Ajax.
Unfortunately, I can't get the styling-refresh to work. If I'm correct, I need to re-apply styles
on script-inserted content using either .trigger("create") or .trigger("refresh"), but both don't seem to work.
Any thoughts?
In the example, the last 2 <li>-tags are inserted using Ajax and not "refreshed" with mobile-style
My code:
$.ajax({
type: 'GET',
url: "/movies/format/JSON",
dataType: 'json',
timeout: 5000,
success: function(msg)
{
$.each(msg, function(i, profile) {
$("#listview").append('<li><a href=\"#\">'+profile.format+'</a></li>');
});
$( "#listview" ).trigger( "create" );
},
error: function(xhr, status, errorThrown)
{
alert(status + errorThrown);
}
});
</script>
<div data-role="page">
<div data-role="header">
<h1><g:message code="default.show.label" args="[entityName]" /></h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" id="listview">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
My resulting HTML:
<ul data-role="listview" data-inset="true" data-filter="true" id="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c"><div class="ui-btn-inner ui-li ui-corner-top"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">Acura</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">Audi</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">BMW</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">Cadillac</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">Ferrari</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li><a href="#" class="ui-link">DivX</a></li><li><a href="#" class="ui-link">DVD</a></li></ul>