0

I have the following code working but would like when I click on each posts, the post content to be displayed using either an external .html or within the default html a div page so that the content does not show the whole website contents:

HTML Code:

<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 Code:

$(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();

        }});
    });

Thanks

4

4 回答 4

0

“要使用外部 .html 显示的帖子内容”

您可以对内容类型为 text/html 的外部 html 进行 ajax 调用，并将响应加载到 div 中。

于 2013-09-29T09:47:20.847 回答
0

我看到代码有一个问题。函数 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.
于 2013-09-28T13:10:48.793 回答
0

恐怕我不应该发布完整的可行代码，因为 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 变量中使用。

于 2013-09-29T15:08:00.300 回答
0

我创建了一个函数来处理每个帖子在不同页面上的显示：

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 + ')">';
于 2013-10-07T05:22:34.833 回答