0

I am working on a comment section(comments on posts), in which I can store the comments of the users on click without refreshing the page, but unable to display those comments instantly on that post without refreshing the page.

my view:

<ul id="templates" class="dropdown-menu" role="menu">


         <div class="row">
         <section class="col-md-offset-1 col-md-3 col-xs-3 "><a class="btn btn-sm" id="Nice" data-postid="{{$post->id}}">Nice!</a>
         </section></ul>




@if($storage->comment==0)
     <div class="row" id="zero">
    {{$storage->textcomment}}
    </div>
    @endif

my script:

    <script>
  $(document).ready(function(){
   $('.dropdown-menu a').click(function(){
   var action=$(this).attr('id');
    var id=$(this).attr('data-postid');

    $.ajax({
    method:'POST',
    url:{{route('comment123')}},
data:{id:id,action:action}

})

    .done(function(msg) {

    $('#zero').text(msg['new_bod']);


  });
   });

  });
</script>

my controller:

    public function comment123(Request $request){

 $qw = storage::find($request['id']);
        $qw->textcomment = $request['action'];
        $qw->save();
        return response()->json(['new_bod' => $qw->textcomment],200);



    }

my route:

Route::post('/comment123' , [

    'uses' => 'PostController@comment123',
    'as' => 'comment123'


]);
YaSh Chaudhary
  • 2,605
  • 8
  • 37
  • 74

1 Answers1

1

The problem is that when you post the first comment through ajax, the div with id of 'zero' is not rendered to the DOM, so when you try to add the comment to this div, it fails because the div doesn't exists, so basically you have 2 options:

  1. Always rendering the div with the id of 'zero' to the DOM, so if there are any comments in the DB you can show the div with the first load of the page and then add more comments to it when the user posts a new comment, or if there are no comments in the DB so you render it with 'display: none;' and when the user posts a new comment you can add the comment to the div and then make it 'display: block'.

  2. The second option -and the better one- is , rendering a div to append to it the comments when the page first loads only if there are any comments on the DB, then make an interval function that checks for new comments, and appends to the comments div or create this div if it not exists, so when the user posts a new comment, you can add to this same div the content of the comment and even get more new comments from DB with the response from the server.

I will also recommend you to use proper ajax functions and actually check if the comment was saved to the DB, you can make it by using 'success' & 'error' functions instead of the 'done' function, so this way you can tell the user if there was an error saving the comment.

Good luck!

  • Thank You Mr.Yohanan for ur ans. , I understood what u r trying to say..but as I am new to ajax so i don't how to use such functions......would u pls like to help ,for eg. using append function,etc. – YaSh Chaudhary Nov 06 '16 at 03:22
  • 1
    hi, Tnx...I am surely going to try what u said....will contact you again if stuck. – YaSh Chaudhary Nov 06 '16 at 05:19