Avoid page reload when submitting form using ajax with laravel

Question

I'm completely stuck trying to process a form submit using ajax instead of laravel to avoid page reload etc. But it isn't working and I don't know why. I've searched the wonderful web going through example after example but nothing seems to be working for me. This is the closest I can get. My knowledge is limited but my ambitions are high. Please take a moment and look through my code, beacuse I'm at the edge of mental breakdown right now.

Here is my jquery:

$(document).ready(function() {
    $('#ajax').submit(function(event){
        $.ajax({
            type: 'POST',
            url: 'comments',
            data: $('form#ajax').serialize(),
            dataType: 'json',
        })

        .done(function(data) {
            console.log(data); 
        });

        event.preventDefault();
    });
});

And here is my form in blade view:

{{ Form::open(array('url'=>'comments', 'id' => 'ajax')) }}
        {{ Form::hidden('parent_id', null) }}
        {{ Form::hidden('author', Auth::user()->username) }}
        {{ Form::textarea('content', null, array('placeholder' => 'Enter your comment here:', 'onfocus' => 'this.placeholder=""')) }}<br/>
        {{ Form::submit('Comment', array('class'=>'submit')) }}
    {{ Form::close() }}

And here is my controller:

public function createComment() {
        //fixa här så man inte kan kommentera tom kommentar
        $validate = array('content' => 'required');

        $validator = Validator::make(Input::all(), $validate);

        if($validator->fails()) {
            return Redirect::to('comments')->withErrors($validator)->withInput(Input::all());
        }
        else {
            $comment = new Comment();
            $comment->parent_id = Input::get('parent_id');
            $comment->author = Input::get('author');
            $comment->content = Input::get('content');
            $comment->save();  
        }
}

public function postComment() { 
    if(Request::ajax()) {
            $this->createComment();
            return Response::json(Input::all());
    }
}

public function getCommentsAndForm() {
        $comments = Comment::orderBy('id')->get();
        return View::make('comment')->with('comments', $comments);

}

And here is my routes:

Route::get('comments', array('uses' => 'CommentController@getCommentsAndForm'));

Route::post('comments', array('uses' => 'CommentController@postComment'));

When I submit the form it dissapears and nothing displays. If I remove if(Request::ajax()) the comments get posted but the form still dissapears and instead of an empty page I get the posted comment in JSON. And when I reload the page the comments shows as I want to. What is the problem? What am I doing wrong? I only want the posted comment to display above my form without reloading the page, is there a solution?

Since you are using done() in your js, i think you should also return a status code return Response::json(Input::all(),200); — Dimitrios Kontoulis
– Dimitrios Kontoulis, Commented Mar 23, 2014 at 14:54
@DimitrisKontoulis I tried what you said but still the same problem. — user3446358
– user3446358, Commented Mar 23, 2014 at 14:57
but you are doing nothing with the returned json. i can see that you are logging it in the console and nothing else. — Dimitrios Kontoulis
– Dimitrios Kontoulis, Commented Mar 23, 2014 at 15:01
@DimitrisKontoulis Ok, and what should I do with the returned json? It's beyond my knowledge. — user3446358
– user3446358, Commented Mar 23, 2014 at 15:05
you have to parse it and display it as you wish. right now you are getting a json object, you can't expect it to show in your html on its own :P — Dimitrios Kontoulis
– Dimitrios Kontoulis, Commented Mar 23, 2014 at 15:10

katsarov · Accepted Answer · 2014-04-02 12:23:58Z

2

$(document).ready(function() {
    $('#ajax').submit(function(event){
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'comments',
            data: $('form#ajax').serialize(),
            dataType: 'json',
        })

        .done(function(data) {
            console.log(data); 
        });
        //just to be sure its not submiting form
        return false;
    });
});

the important here is to prevent form from submiting. You can try to change submit to button.

answered Apr 2, 2014 at 12:23

katsarov

1,8222 gold badges13 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Avoid page reload when submitting form using ajax with laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related