I have structured a page using jQuery Mobile. If I populate a list with static code:
<script>
document.write('<ul data-role="listview">');
document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');
document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');
document.write('</ul>');
</script>
After populating the list with static code, this is the result.
Now, I am attempting to do it dynamically by reading from a database using AJAX and JSON. This is the new code:
<script>
document.write('<ul data-role="listview">');
$.ajax({
url: 'db_to_app_prod.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
document.write('</ul>');
</script>
After switching to dynamic population using AJAX and JSON, the layout is now broken. What could be causing this issue? How can I fix it to achieve the same dynamic result as the initial static approach?
EDIT: I made another attempt with the following code:
$(document).ready(function(){
$(document).bind('deviceready', function(){
//Phonegap ready
onDeviceReady();
});
//var output = document.getElementById("output");
var _ul = document.createElement('ul');
_ul.setAttribute("data-role", "listview");
$.ajax({
url: 'db_to_app_prod.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var _li = document.createElement('li');
_li.setAttribute("data-icon", "false");
_li.innerHTML = '<li data-icon="false">'+
'<a href="" id="'+item.id+'">'+
'<img src="http://gestisciapp.it/gruppodipalo/images/'+item.img+'">'+
'<h2>'+item.marca+'</h2>'+
'<p class="wrap">'+item.descrizione+'</p>'+
'<span class="ui-li-count">'+item.prezzo+' €</span>'+
'</a></li>';
_ul.appendChild(_li);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
document.getElementById("output").appendChild(_ul);
});