построить HTML с прерыванием AJAX через флягу

Question

Так что я использую существующий код «Вертикальная линия времени» от here, и теперь я стараюсь сделать его надежным. у каждого канала новостей на временной шкале есть небольшой код;

<div class="cd-timeline-block"> 
     <div class="cd-timeline-img cd-movie"> 
      <img src="static/img/cd-icon-movie.svg" alt="Movie"> 
     </div> <!-- cd-timeline-img --> 

     <div class="cd-timeline-content"> 
      <h2>Title of section 2</h2> 
      <p>Hello this is a Feed 1</p> 
      <button class="cd-read-more" id="btn">Read more</button> 
      <span class="cd-date">Jan 18</span> 
     </div> <!-- cd-timeline-content --> 
    </div> <!-- cd-timeline-block --> 

и ниже этого я пишу span с id = "new_feeds", например;

<span id="new_feeds"></span> 

только ради тестирования, я создаю простой AJAX вызов при нажатии кнопки сверху ленты;

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     $.post('btn_clicked', function(data, status){ 
     $("#new_feeds").text(data); 
     }); 
     return false; 
     }); 
    }) 

Данные, которые возвращаются обратно с AJAX вызова обрабатывается в моей Колба применения:

@app.route("/btn_clicked", methods=['POST']) 
def btn(): 
    print'got btn' 
    new_feeds = ''' <div class="cd-timeline-block"> 
     <div class="cd-timeline-img cd-movie"> 
      <img src="static/img/cd-icon-movie.svg" alt="Movie"> 
     </div> <!-- cd-timeline-img --> 

     <div class="cd-timeline-content"> 
      <h2>Title of section 2</h2> 
      <p>Hello this is a new Feed </p> 
      <a href="#0" class="cd-read-more">Read more</a> 
      <span class="cd-date">Jan 18</span> 
     </div> <!-- cd-timeline-content --> 
     </div> <!-- cd-timeline-block --> ''' 
    return new_feeds 

Все, что я вернусь в моем браузере текст формируется HTML-код, как это;

я упускаю что-то здесь? Любая помощь будет высоко оценен.

Answer 1

Вам необходимо вставить новый контент как html, а не текст.

$.post('btn_clicked', function(data, status){ 
    $("#new_feeds").html(data); 
    })