Anum Sheraz Anum Sheraz - 5 months ago 29
Javascript Question

construct HTML with AJAX interrupt via Flask

So I am using an existing code "Vertical time-line" from here, and now I am trying to make it robust. each news feed on timeline has a small code snipt of;

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


and below this I am writing a span with id="new_feeds", like;

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


just for the sake of testing, I am creating a simple AJAX call when the button from above news feed is pressed;

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


The data that is returned back from AJAX call is handled in my Flask application:

@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


All I get back in my browser is text formed HTML code like this;

enter image description here

Am I missing something over here ? Any help would be highly appreciated.

Answer

You need to insert the new content as html, not text.

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