将文件中的值添加到jQuery mobile中的列表视图 [英] Adding values from a file to list view in jQuery mobile
问题描述
我必须从文本文件中检索值，并使用jquery mobile附加到listview中.
我可以从文本文件中检索值，但没有得到预期的输出.
I have to retrieve values from text file and append in listview using jquery mobile.
I am able to retrieve values from text file but I'm not getting expected output.
我已经尝试过多次更改jQuery中的语法，但是没有用.
I have tried many times changing the syntax in jQuery, but it didnt work.
我的文本文件包含以下数据:
My Text file has following data:
apple.jpe,apple,healthy,
banana.jpe,banana,good,
cherry.jpe,cherry,tasty,
cranberry.jpe,cranberry,sour,
grape.jpe,grape,wine,
orange.jpe,orange,citric
<body>
<div data-role="page" id="pageOne">
<div data-role="content" id="header">
This is my list view where I want to load content dynamically from file
<ul data-role="listview" data-inset="true" id="list">
</ul>
</div>
</div>
<script>
$(document).on("pageinit", "#pageOne", function(){
$.get("info.txt",function(data){
var items=data.split(',');
for(var i=0;i<items.length;){
$("#header ul").append('<li>'+'<a href="#">');
creating image element which is a thumb nail in list view
var img = $('<img />').attr({
'src': 'img/'+items[i],
'width': 50
}).appendTo('#list');
creating heading element to list view
$('#list').append('<h2>'+items[i+1]+'</h2>');
creating para element to list view
$('#list').append('<p>'+items[i+2]+'</p>'+'</a>'+'</li>');
i=i+3;
}
I have tried refresh for list view
$('#list').listview('refresh');
});
});
</script>
</body>
这是预期的输出，我希望我的列表具有外观
This is an expected output which I want my list viewlook
我得到的输出格式不符合预期
I am getting output which is not in correct format as expected one
推荐答案
我建议您以一种稍微简单的方式来组装标记，这样就可以毫无麻烦地工作了:
I suggest you to assemble the markup in a slightly simpler way, then this should work without hassle:
// sample data
var items = [
"apple.jpe","apple","healthy",
"banana.jpe","banana","good",
"cherry.jpe","cherry","tasty",
"cranberry.jpe","cranberry","sour",
"grape.jpe","grape","wine",
"orange.jpe","orange","citric"
];
function getData() {
/*
here you should use your ajax call:
$.get("info.txt",function(data){
var items=data.split(',');
*/
var html = "";
for (var i = 0; i < items.length;) {
html += '<li>';
html += '<a href="#">';
//creating image element which is a thumb nail in list view
html += '<img width="50" src="img/' + items[i] + '">';
//creating heading element to list view
html += '<h2>' + items[i + 1] + '</h2>';
//creating para element to list view
html += '<p>' + items[i + 2] + '</p>';
html += '</a>';
html += '</li>';
i = i + 3;
}
// refresh list view
$("#list").append(html).listview('refresh');
}
$(document).on("pageinit", "#pageOne", function(){
getData();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="pageOne">
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="list">
</ul>
</div>
</div>
</body>
</html>
您也可以使用pagecreate代替pageinit-在这里您将找到一个高度赞赏的答案，该答案解释了不同之处: https ://stackoverflow.com/a/10542821/4845566
Instead of pageinitYou can also use pagecreate - here you will find an highly appreciated answer which explains the difference: https://stackoverflow.com/a/10542821/4845566
注意事项:
图像文件的扩展名正确吗?取决于您，也许是jpg或jpeg.
is the extension of your image files correct? Maybe shall be either jpgor jpeg, up to you.
这篇关于将文件中的值添加到jQuery mobile中的列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
