ralp dexter Bongato ralp dexter Bongato -4 years ago 83
Ajax Question

Laravel posting and comments , i cannot comment after i created a new post using ajax

when i refresh the page using the browser everything is working fine i could still comment and i could also add new post but the problem is when i create a new post(which means a post like a facebook post) i cannot comment anymore on any post. here is my Homeview :



<div class="All-Post-Display" id="PostRefresh">
<div class="container">
@foreach($latest as $late)
<div class="row">
<div class="col-md-5 col-md-offset-2">
<div class="outside-pannel">
<div class="person">
<img src="/styleimage/facebook.jpg">
<h2>{{$late->user->name}} {{$late->user->lastname}}</h2><br>
<h4>{{$late->created_at->diffForHumans()}}</h4>
</div>
<div class="body-of-post">
<p>{{$late->body}}</p>
</div>
<div class="like-comment-share">
<form>
<ul>
<li><a href="#"><i class="fa fa-thumbs-up"></i>Like</a></li>
<li><a href="#"><i class="fa fa-comments-o"></i>Comment</a></li>
<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
</ul>
</form>
</div>
<div class="comment-section" >
<div class="total-likes">
<a href=""><h3>3 likes your post</h3></a>
</div>
<div class="comment-form">
@foreach($late->comments as $comment)
<div class="display-comments">
<div class="comment-img">
<img src="/styleimage/facebook.jpg">
</div>
<div class="comment-container">
<div class="comment-content">
<a name="postername" href="#">rd</a> <span></span>
<div class="reply-like">
<ul>
<li><a href="">Like</a></li>
<li><a href="">Reply</a></li>
<li><h6>just now</h6></li>
</ul>
</div>
</div>
</div>
</div>
@endforeach
<div>
<div class="commenting-container">
<img src="/styleimage/facebook.jpg">
<textarea rows="1" id="comment-body{{$late->id}}" name="body" placeholder="Write a comment..."></textarea>
<input type="text" name="commentable" id="posting-id{{$late->id}}" value="{{$late->id}}" style="display: none;">
<div class="emojis">
<ul>
<li><a href="#"><i class="fa fa-smile-o"></i></a></li>
<li><a href="#"><i class="fa fa-camera-retro"></i></a></li>
<li><a href="#"><i class="fa fa-bookmark"></i></a></li>
</ul>
</div>
</div>


</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('#comment-body{{$late->id}}').keypress(function (e) {
if (e.which == 13) {
var comment = $('#comment-body{{$late->id}}').val();
var postCommentedId = $('#posting-id{{$late->id}}').val();
$.ajax({
url: '/comment',
type: 'post',
data: {'commentable_id':postCommentedId,'body':comment,'_token':$('input[name=_token]').val()},
success: function (data) {
console.log('success');
$('#comment-body{{$late->id}}').val(null);

},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('errorThrown');
}
});
}

});
});
</script>
@endforeach
</div>
</div>
</div>
{{csrf_field()}}
<script>
$( document ).ready(function() {
$('#ButtonPost').click(function (event) {
var thebody = $('#bodyPost').val();
$.ajax({
url: 'index',
type: 'post',
data: {'body':thebody,'_token':$('input[name=_token]').val()},
success: function (data) {
$('#PostRefresh').load(location.href + ' #PostRefresh');
$('#bodyPost').val(null);
}
});
});
});


</script>





after running this AJAX at the bottom the AJAX inside my @foreach doesn't work , id="PostRefresh" is gonna be refreshed when i make new post. im also using id="{{id of post}}" to make them unique in every post, Please Help Thank you...

Answer Source

Instead of this

$('#ButtonPost').click(function (event) ... 

Try to use

$(document).on('click','#ButtonPost',(function (event) ...

Here the problem is, once you create new DOM then you don't have id of new element created to your jquery id not working. But with this code you will get jquery code linked to every element of if #buttonPost.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download