[英]Dynamically add elements with ajax and json breaks the page layout
我有一個用jquery mobile構建的頁面。 如果我用靜態代碼填充列表:
<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>
我得到這個結果: 圖像
現在,我嘗試進行生動的分析,使用ajax和json從數據庫中讀取。 這是代碼:
<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>
結果就是: image如您所見,布局現在完全被破壞了。 怎么了? 為什么? 我如何解決這個問題以獲取第一個結果?
編輯:這是我做的另一種嘗試:
$(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);
});
像這樣:
.....
success: function(data, status){
var _ul = $('<ul />').attr('data-role','listview');
$.each(data, function(i,item){
$('<li data-icon="false" />')
.append($('<a href="" id="'+item.id+'" />')
.append('<img src="http://gestisciapp.it/gruppodipalo/images/'+item.img+'" />')
.append('<h2>'+item.marca+'</h2>')
.append('<p class="wrap">'+item.descrizione+'</p>')
.append('<span class="ui-li-count">'+item.prezzo+' €</span>')
)//$('<a />')
//)//$('<li />') no need sorry
.appendTo(_ul);
});
$('#output').empty().append(_ul);
},
....
也是dataType:'json'
而不是jsonp
。 請參閱http://api.jquery.com/jquery.ajax/規范
完整的工作代碼。 與您的示例json一起使用。
$.ajax('tony.js?id=' + Math.random(), //fake json which match your structure
{
dataType: "json",
jsonp: "jsoncallback",
method: 'get',
contentType: 'application/json',
success: function (data, status) {
var _ul = $('<ul />').attr('data-role', 'listview');
$.each(data, function (i, item) {
$('<li data-icon="false" />')
.append($('<a href="" id="' + item.id + '" />')
.append('<img src="http://gestisciapp.it/gruppodipalo/images/' + item.img + '" />')
.append('<h2>' + item.marca + '</h2>')
.append('<p class="wrap">' + item.descrizione + '</p>')
.append('<span class="ui-li-count">' + item.prezzo + ' €</span>')
)//$('<a />')
.appendTo(_ul);
});
$('#output').empty().append(_ul);
},
error: function (xhr, d, s) {
$('#output').empty().html(s);
}
});
在Google移動模擬器工具中進行了測試。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript">
function getData() {
$.ajax('tony.js?id=' + Math.random(), //fake json which match your structure
{
dataType: "json",
jsonp: "jsoncallback",
method: 'get',
contentType: 'application/json',
success: function (data, status) {
var _ul = $('<ul />').attr('data-role', 'listview');
$.each(data, function (i, item) {
$('<li data-icon="false" />')
.append($('<a href="" id="' + item.id + '" />')
.append('<img src="http://gestisciapp.it/gruppodipalo/images/' + item.img + '" />')
.append('<h2>' + item.marca + '</h2>')
.append('<p class="wrap">' + item.descrizione + '</p>')
.append('<span class="ui-li-count">' + item.prezzo + ' €</span>')
)//$('<a />')
.appendTo(_ul);
});
$('#output').empty().append(_ul).enhanceWithin();//.listview();
},
error: function (xhr, d, s) {
$('#output').empty().html(s);
}
});
}
</script>
</head>
<body>
<button onclick="getData()">Get Data</button>
<div id="output"></div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.