I know this question has been asked several time but I haven't found an answer that works for me.
I have dynamic content being loaded via ajax and I am using bootstrap along with masonry to allow each post to be displayed in a brick style. As user scrolls the page new post are loaded.
I have an dropdown on each post with listed actions the user can perform such as edit the post. When the user clicks the edit post link a modal is poped up allowing them to edit there post.
When the user clicks the update button the first time all is well. If the user clicks another post to edit it and clicks the update button both the previous post and the current post are updated. This happens in an infinite state meaning each time it will update all the previous one already updated.
My Code:
Modal
$(document.body).on("click", ".editPost", function(){
// Post id to update
var post_id = $(this).closest('.panel').attr('id');
// Set Modal Title
$('#myModalLabel').html('Edit Post');
// Post text
var panel_body = $('#'+post_id).children('.panel-body');
$('.modal-body').html('<form><textarea id="newPostText" class="form-control" rows="3">'+panel_body.text()+'</textarea></form>');
$('#updatePost').click( function(){
var update_text = $('textarea#newPostText').val();
console.log(update_text);
// Delete the post
var dataString = {
csrf_test_name : csfr_token_value,
'post_id': post_id
};
$.ajax({
type: "POST",
url: 'someurl/someplace',
data: dataString,
async:true,
cache: false,
success: function(html){
$('#'+post_id).children('.panel-body').html(update_text);
var $container = $('.masonry').masonry();
$container.masonry();
},
complete: function(){
console.log('Update');
}
});
});
});
Modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button id="cancelUpdate" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="updatePost" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>
Dynamic Post Boxes
<!--Post-->
<div id="344" class="panel panel-default">
<div class="dashboard-heading">
<div class="media">
<img class="pull-left media-object" alt="..." src="/static/users/13c45d8d-c99d-49d6-a2a1-85b7f031ea86/thumbnail/1426115733cada320d3089219c7cc8c825b23c8714.jpeg">
<h3 class="panel-title"> User - 5 hours ago</h3>
</div>
<div class="dropdown pull-right" style="left: 10px;position: relative;top: -50px;width: 20px;">
<a href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel" role="menu">
<li role="presentation">
<a class="editPost" data-target="#myModal" data-toggle="modal" tabindex="-1" role="menuitem">
<span class="glyphicon glyphicon-pencil"></span>Edit
</a>
</li>
<li role="presentation"></li>
<li role="presentation"></li>
<li class="divider" role="presentation"></li>
<li role="presentation">
</ul>
</div>
</div>
<div class="panel-body">
This is the post text This is the post text This is the post text This is the post text
</div>
<div class="panel-footer">
</div>
A few things I have tried:
$('.editPost').click(function(){
//do stuff // Does nothing!! Don't Work.
});
$(document.body).on("click", ".editPost", function(event){
event.preventDefault();
});
.unbind();
.off();
evt.stopPropagation();
Along with other methods from other post around the web. Nothing seems to work. What am I missing?