加載每個點擊的帖子到一個頁面

我有以下的代碼工作，但希望當我點擊每個帖子，發佈的內容要顯示使用外部.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(); 

     }}); 
    });

感謝

來源

2013-09-28 Chelseawillrecover

要顯示在不同的頁面結果嗎？ – Omar

是@Omar，我的目的是在一個單獨的頁面中顯示每個帖子的內容。 – Chelseawillrecover

我看到代碼存在一個問題。該功能showarticle有這條線

來源

2013-09-28 13:10:48 Rajesh

好的，我會檢查處理程序代碼 – Chelseawillrecover

嗨Rajesh我已經改寫過我的問題，所以每個人都可以理解它 – Chelseawillrecover

可以使一個AJAX調用外部HTML的內容類型爲文本「使用任何外部的.html顯示的帖子內容」/html，並將響應加載到div中。

來源

2013-09-29 09:47:20 Rajesh

對於其他人來學習和理解，你能告訴我一個可行的代碼來實現這一點。謝謝 – Chelseawillrecover

恐怕我不應該發佈完整可行的代碼，因爲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標籤和打印，所以它會在阿賈克斯成功responseHTML變量可用。

來源

2013-09-29 15:08:00 Rajesh

它已經在meta上詳細討論過了。這是正式的，並鼓勵提供完整的答案。 – aIKid

感謝AlKid提供此有用的更新。這個網站是關於互相幫助和即將到來的程序員 – Chelseawillrecover

我創建了一個函數來處理不同的頁面上的每個帖子顯示：

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-07 05:22:34 Chelseawillrecover

加載每個點擊的帖子到一個頁面

回答

相關問題