2017-05-15 7 views
0

ブラウザを使ってページをリフレッシュするとすべてうまくいきます。私はまだコメントできますが、新しい投稿を追加することもできます新しい投稿(つまり、Facebookの投稿のような投稿を意味する)私はどの投稿にもコメントすることはできません。ここに私のHomeviewです:私の@foreach内部AJAXは動作しません。一番下にこのAJAXを実行した後Laravel投稿とコメント、私は新しい投稿をajaxを使って作成した後はコメントできません

<div class="All-Post-Display" id="PostRefresh"> 
 
\t \t <div class="container"> 
 
\t \t @foreach($latest as $late) 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-5 col-md-offset-2"> 
 
\t \t \t \t \t <div class="outside-pannel"> 
 
\t \t \t \t \t \t <div class="person"> 
 
\t \t \t \t \t \t \t <img src="/styleimage/facebook.jpg"> 
 
\t \t \t \t \t \t \t <h2>{{$late->user->name}} {{$late->user->lastname}}</h2><br> 
 
\t \t \t \t \t \t \t <h4>{{$late->created_at->diffForHumans()}}</h4> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="body-of-post"> 
 
\t \t \t \t \t \t \t <p>{{$late->body}}</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="like-comment-share"> 
 
\t \t \t \t \t \t \t <form> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-thumbs-up"></i>Like</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-comments-o"></i>Comment</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-share"></i>Share</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </form> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="comment-section" > 
 
\t \t \t \t \t \t \t <div class="total-likes"> 
 
\t \t \t \t \t \t \t \t \t <a href=""><h3>3 likes your post</h3></a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="comment-form"> 
 
\t \t \t \t \t \t \t @foreach($late->comments as $comment) 
 
\t \t \t \t \t \t \t \t <div class="display-comments"> 
 
\t \t \t \t \t \t \t \t \t <div class="comment-img"> 
 
\t \t \t \t \t \t \t \t \t \t <img src="/styleimage/facebook.jpg"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="comment-container"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="comment-content"> 
 
\t \t \t \t \t \t \t \t \t \t \t <a name="postername" href="#">rd</a> <span></span> 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="reply-like"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li><a href="">Like</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li><a href="">Reply</a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <li><h6>just now</h6></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t @endforeach 
 
\t \t \t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t \t \t <div class="commenting-container"> 
 
\t \t \t \t \t \t \t \t \t <img src="/styleimage/facebook.jpg"> 
 
\t \t \t \t \t \t \t \t \t <textarea rows="1" id="comment-body{{$late->id}}" name="body" placeholder="Write a comment..."></textarea> 
 
\t \t \t \t \t \t \t \t \t <input type="text" name="commentable" id="posting-id{{$late->id}}" value="{{$late->id}}" style="display: none;"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="emojis"> 
 
\t \t \t \t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-smile-o"></i></a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-camera-retro"></i></a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <li><a href="#"><i class="fa fa-bookmark"></i></a></li> 
 
\t \t \t \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <script> 
 
\t \t \t \t $(document).ready(function() { 
 
\t \t \t \t  $('#comment-body{{$late->id}}').keypress(function (e) { 
 
\t \t \t \t  \t if (e.which == 13) { 
 
\t \t \t \t  \t  var comment = $('#comment-body{{$late->id}}').val(); 
 
\t \t \t \t  \t  var postCommentedId = $('#posting-id{{$late->id}}').val(); 
 
\t \t \t \t  \t  $.ajax({ 
 
\t \t \t \t  \t  \t \t url: '/comment', 
 
\t \t \t \t  \t  \t \t type: 'post', 
 
\t \t \t \t  \t  \t \t data: {'commentable_id':postCommentedId,'body':comment,'_token':$('input[name=_token]').val()}, 
 
\t \t \t \t  \t  \t \t success: function (data) { 
 
\t \t \t \t  \t  \t \t \t console.log('success'); 
 
\t \t \t \t  \t  \t \t \t $('#comment-body{{$late->id}}').val(null); 
 

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

 

 
</script>

、ID =「PostRefreshは、」私は新しいポストを作るときつもりがリフレッシュされています。また、全ての投稿でそれらを一意にするために、ID = "{ポストの{IDを}}" を使用してイムは、ありがとう助けてください...

+0

注:私のコメントはまだ行われていませんが、それをデータベースに保存して、それが機能しているかどうかを知ることができます –

+0

あなたが尋ねていることは不明です。ここで 'facebook'との接続は正確に何ですか? – CBroe

+0

私は現在、laravelを使ってfacebook投稿をコピーしていました。私はログインして投稿を投稿して投稿にコメントを付けることができます。私の投稿は投稿をするたびにコメントを機能させません。私は今何をすることができるのですか?再度コメントするにはページ全体を再読み込みする必要があります。 –

答えて

0

代わりにこの

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

$(document).on('click','#ButtonPost',(function (event) ... 
を使用してみてください

ここで問題は、新しいDOMを作成すると、jquery idに作成された新しい要素のIDが機能しないことです。 しかし、このコードでは、#buttonPostの各要素にリンクされたjqueryコードを取得します。

関連する問題