live commenting system with laravel and ajax

Question

I want to implement a live commenting system for each post of my project

this is my view

@extends('layouts.main')

@section('content')

    <p>{{ $post->title }}</p> // there is nothing wrong about showing post data

     <p>{{ $post->body }}</p>


    <div class = "row">
            <div class="col-md-6">
      <form id="company_form" method="POST" action = "{{ route('addComment') }}" class= "my-5">
                @csrf
               
                 <input type="hidden" name = "postId" id = "postId" value="{{ $post->id }}">  
              <div class="form-group my-2">
                    <input type="text" class="form-control" name = "name" id = "name" aria-describedby="emailHelp" required placeholder="your name">  
            </div>

             <div class="form-group my-2" >
                    <textarea class="form-control" name = "comment" rows="3" id = "comment" required></textarea>
            </div>
              <button class="btn btn-primary" id = "company_form_btn" type="submit">submit</button>
           
       </form>
            </div>
    </div>

this is my controller

public function addComment(Request $request){
        $comment = new Comment();
        $comment->postId = $request->postId;
        $comment->name = $request->name;
        $comment->comment = $request->comment;
        $comment->save();
        return response()->json(['success' => 'thanks for your comment']);
     }

and this is my ajax code

 $(document).ready(function(){
        $("#company_form_btn").click(function(e){
        e.preventDefault();
        var url = $(this).attr("action");
        let formData = new FormData(this);
        $.ajax({
                type:'POST',
                url: url,
                data: formData,
                contentType: false,
                dataType:'json',
                cache: false,
                processData: false,
               success:function(response){
                   alert(response.success)
                },
                error: function(response){
                   
                }
       });
    
});
    });

comment submitted and saved in database totally fine but i get this, and whole view goes away

i want to achieve something like this

thanks for your help

You need section on page (i.e. #comments) where you would inject comment itself on success AJAX call, say before alert message. — Tpojka
– Tpojka, Commented Aug 2 at 12:11
thanks for your comment, I set up a div set its visibility to hidden, I wanted to change its visibility by success callback but not working the way I want — Ramin Safari
– Ramin Safari, Commented Aug 2 at 15:48
If you say that the other comments haven't helped, maybe it could be the fact that your button is of type submit? Try changing it to just button, because if it's type submit it could lead to submitting the form and the js not executing, therefore that's why you see the full page redirect — kubson
– kubson, Commented Aug 5 at 8:42

Exel · Accepted Answer · 2025-08-03 03:27:46Z

0

The issue is your AJAX code.

action is being read from the wrong element, you currently have it like this:

var url = $(this).attr("action");

This would be correct if you were targeting the form, not the button but you aren't:

$("#company_form_btn").click(function(e){

In this instance, $(this) refers to the button (#company_form_btn), not the form.

I would use the form's submit event instead as it is cleaner and prevents issues if you change button ids or anything else.

$('#company_form').on('submit', function(e){
    e.preventDefault();

    var url = $(this).attr("action");
    let formData = new FormData(this);

    $.ajax({
        type:'POST',
        url: url,
        data: formData,
        contentType: false,
        dataType:'json',
        cache: false,
        processData: false,
        success:function(response){
            alert(response.success);
        }
    });
});

answered Aug 3 at 3:27

Exel

455 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramin Safari Aug 3 at 16:40

thanks for your comment, i modified the code the way you said, nothing's changed

Biswajit Bala · Accepted Answer · 2025-08-09 16:45:19Z

0

try this:

AJAX:

$(document).ready(function(){
    $("#company_form_btn").click(function(e){
        e.preventDefault();

        var url = $("#company_form").attr("action");
        let formData = new FormData($("#company_form")[0]);

        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            contentType: false,
            dataType: 'json',
            cache: false,
            processData: false,
            success: function(response){
                window.location.href = "{{ route('addComment') }}";
            },
            error: function(response){
                console.log(response);
            }
        });
    });
});

answered Aug 9 at 16:45

Biswajit Bala

462 bronze badges

2 Comments

Community Aug 9 at 17:13

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Ramin Safari Aug 11 at 11:49

@Biswajit thanks for your answer doesn't trigger the codes inside success I just made changes to controller instead of returning json i return back, this way it works fine but its not really an ajax call, it refreshes the page

Ramin Safari · Accepted Answer · 2025-08-25 12:41:10Z

0

I left this problem alone, and I was working on the other parts of my project

last night i ran into a problem and google up the error message and i came up with this thread of stack overflow

link

I looked at the accepted answer(first answer) he wrote

The problem was: I was using the slim build of jQuery,

I was trying to figure out the solution for another problem, I decided to give it a shot, I replace the jquery CDN link with the one which is not slim version, and bam it worked!

answered Aug 25 at 12:41

Ramin Safari

213 silver badges10 bronze badges

Collectives™ on Stack Overflow

live commenting system with laravel and ajax

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related