將每個點擊的帖子加載到頁面中
[英]Load each clicked post into a page
問題描述
我可以使用以下代碼，但是當我單擊每個帖子時，想要使用外部.html或默認html內的div頁面顯示帖子內容，以使該內容不會顯示整個網站內容：
HTML代碼：
<head>
<meta charset="utf-8">
<title>Hope</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="css/style.css"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="devotionpage" data-role="page">
<div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" data-theme="c" >
<h1>Daily Devotional Messages</h1>
</div><!-- header -->
<div data-theme="c" data-role="content" id="devotionlist"> </div><!-- content -->
<div data-role="footer" data-position="fixed" data-id="sys_footer" data-theme="c">
<div data-role="navbar" >
<ul>
<li><a href="#devotionpage" class="sys_ft">Home</a></li>
<li><a href="#devotionpage" class="sys_ft">Disclaimer</a></li>
</ul>
</div><!-- navbar -->
</div><!-- footer -->
</div><!-- page -->
<div id="articlepost" data-role="page" data-transition="fade">
<div data-role="header" class="devotion_hd" data-position="fixed" data-theme="c" >
<div data-theme="c" data-role="content" id="articlecontent"> </div><!-- content -->
<div data-role="footer" data-position="fixed" data-id="sys_footer" >
<div data-role="navbar" >
<ul>
<li><a href="#devotionpage" class="sys_ft">Home</a></li>
<li><a href="#devotionpage" class="sys_ft">Disclaimer</a></li>
</ul>
</div><!-- navbar -->
</div><!-- footer -->
</div><!-- page -->
</body>
</html>
JS代碼：
$(document).on("pagebeforeshow", "#devotionpage", function() {
$(this).find(".ui-listview-filter input").val("").trigger("change");
});
$( document).ready(function (){
var url = 'http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories&callback=listPosts' ;
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
error: function(){
alert( 'Unable to load feed, Incorrect path or invalid feed' );
},
success: function(data ){
var postlist = data.responseData.feed.entries;
var html = '<ul data-role="listview" data-filter="true">' ;
for (var i = 0 ; i < 6 ; i++) {
var entry = postlist[i];
html += '<li>';
html += '<a href="' + entry.link + '">';
html += '<div class="etitle">' + entry.title + '</div>' ;
html += '<div class="eauthor">' + entry.author + '</div>' ;
html += '<div class="epubdate">' + entry.publishedDate + '</div>';
html += '<div class="esnippet">' + entry.contentSnippet + '</div>';
html += '</a>';
html += '</li>';
}
html += '</ul>';
$( "#devotionlist" ).append(html);
$( "#devotionlist ul[data-role=listview]" ).listview();
}});
});
謝謝
4 個解決方案
解決方案1
0 2013-09-28 13:10:48
我發現代碼有一個問題。 函數showarticle有此行
(html+='</ul>';) outside the ajax call's callback handler, but the variable html is declared inside it. So, actually the line
html+='</ul>' is translated to undefined += '</ul>', which is not correct, unless you have var html; declared globally outside.
解決方案2
0 2013-09-29 09:47:20
“要使用外部.html顯示的帖子內容”
您可以使用內容類型為text / html的外部html進行ajax調用，並將響應加載到div中。
解決方案3
0 2013-09-29 15:08:00
恐怕我不應該發布完整可行的代碼，因為SO旨在幫助人們實現其解決方案，並為他們指明正確的方向。 因此，我將僅發布一個代碼段。
$.ajax({
url: your_server_side_script.extension, //example: handleInput.php
dataType: 'text/html',
data: {postid: $('#postid').val()},
success: function(responseHTML) {
$('#postContentDiv').html(responseHTML);
}
});
your_server_side_script.extension（handleInput.php）應該生成html標記並進行打印，以便在ajax成功時可以在responseHTML變量中使用。
解決方案4
0 2013-10-07 05:22:34
我創建了一個函數來處理每個帖子在不同頁面上的顯示：
function showPost(id) {
$('#devotionlist').html("Please wait...");
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
html += '<h3>' + data.post.title + '</h3>';
html += data.post.content;
$('#devotionlist').html(html);
}); //get JSON Data for Stories
} //showPost
此位調用onClick函數：
html += '<a href="#articlecontent" onclick="showPost(' + val.id + ')">';
在頁面加載時單擊頁面上的元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.