JQuery ajax get API append element to fix div
With Python, I created a Facebook feed that uploads to this:
<div class="col-md-12">
<section id="cd-timeline" class="cd-container">
{% for item in merged %}
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-success">
<i class="fa fa-tag"></i>
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>{{item.1}}</h2>
<p>{{item.5|safe}}</p>
{% if item.2 != '<p> </p>'%}
<p> <img src="{{item.2|safe}}"/> {% endif %} <p> {{item.3|safe}} {{item.4|safe}} </p> </p>
<span class="cd-date">Jan 14</span>
<div class="timeline-item-post">
<div class="timeline-options">
<a href="#"><i class="icon-like"></i> {{item.6}}</a>
<button id="{{item.9}}"><i class="icon-bubble"></i> {{item.7}} </button>
<a href="#"><i class="icon-share"></i> {{item.8}}</a>
</div>
<textarea class="form-control" placeholder="Replay"></textarea>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
{% endfor %}
Now if I click on the button {{item.9}}
, I want to make a jQuery request to load the JSON response for that element ( item.9
which references the post id), without reloading the page, and attach the div below to cd-timeline-content
and display the JSON content in it.
<div class="timeline-comment">
<div class="timeline-comment-header">
<img src="assets/images/avatar5.png" alt="">
<p>Nick Doe <small>1 hour ago</small></p>
</div>
<p class="timeline-comment-text">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</div>
It was the only idea I had, but it looks silly and it doesn't work. Copying javascript code for each post seems like a bad idea.
{% for item in merged %}
<script>
$("#{{item.9}}").on('click', function() {
alert('something');
$.getJSON("data.json", function(data) {
//Handle my response
});
});
</script>
{% endfor %}
Please rate the help.
source to share
Set a class that is the same for every button:
<button class="myEvent" id="{{item.9}}"><i class="icon-bubble"></i> {{item.7}} </button>
$('.myEvent').on("click",function(e){
e.preventDefault();
$.getJSON("data.json", function(data) {
//Handle my response
});
});
with this solution you get the whole json file that is not filtered by "item". the filter process will run inside the function.
hope this help
source to share