Adding Item to Database in Laravel with AJAX and then showing Item

Question

After hours of Googling, I can't seem to find an answer to this seemingly simple problem. I can't add data to a database and show that data without refreshing the page. My goal is to be able to create an object from a form to upload to a database, and then show all the items in database (without the page refreshing). I have tried to get AJAX working many times, but I can't seem to do that. The application works by adding stars to students, so basically I would want to be able to update a students star count without reloading the page. But right now I can't even console.log the submitted form data. My Controller code is like so:

    public function addStar(){

    $id = Input::get('id');
    $user_id = Input::get('user_id');

    if(Auth::user()->id == $user_id){

        Student::addStar($id);

    }

    return Redirect::back();

}

And my form:

             {{Form::open(array('action'=>'HomeController@addStar','id'=>'addStar','method'=>'post'))}}
        {{ Form::hidden('id', $student->id, array('id'=>'id_value')) }}
        {{ Form::hidden('user_id', $student->user_id, array('id'=>'user_id_value'))}}
        {{ Form::submit('+')}}
        {{ Form::close() }}

And my extremely poor attempts at AJAX:

$('#addStar').on('submit',function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        cache: false,
        dataType: 'JSON',
        url: '/addstar',
        data: $('#addStar').serialize(),
        success: function(data) {

            console.log(data);
        },

    });
    return false;
});

The code works fine if I settle for allowing page reloads, but I don't want that. So essentially, my question is, how do I add data to a database and show it without the page reloading? Thanks so much!

I wanted to reload the same view after the form data was submitted-essentially i wanted to reload the view where the form exists. — codeforfood
– codeforfood, Commented Aug 10, 2014 at 4:11
Well, you should return a value using Response::json(). If you don't have the template on the client-side, render the view on the server, return the view and replace the old view with the new one using jQuery replaceWith method. — Ram
– Ram, Commented Aug 10, 2014 at 4:14

Sahan H. · Accepted Answer · 2014-08-10 04:11:50Z

3

Your controller is doing a redirect after the logic, ajax won't be able to do anything with the response. A one take would be, after adding a start returning the new star rating.

public function addStar(){

    $id      = Input::get('id');
    $user_id = Input::get('user_id');

    if(Auth::user()->id == $user_id){

        Student::addStar($id);

    }

    $star_count = //get new star count;

    return Response::json(['star_count' => $star_count]);
}

Since controller now returns a json response, the success callback on $.ajax can grab it and do something (update the star count).

answered Aug 10, 2014 at 4:11

Sahan H.

4727 silver badges14 bronze badges

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

2 Comments

codeforfood Over a year ago

So there is no way to reload a view? I wish to update the star count, then have the page update without refreshing. Or is there a way to "inject" this JSON into my current view?

Ram Over a year ago

@codeforfood If you only want to update the count value, reloading the whole view is overkill, in that case using Ajax doesn't make a lot of sense. As you are using jQuery you can easily traverse the DOM and update the view using the returned JSON. If the updated value fundamentally affects the old data, you can re-render the view either on the server or client-side and replace it.

starball · Accepted Answer · 2022-12-24 22:37:23Z

@codeforfood,

If you want to grab the response and show it immediately in the page without a reload then you may go with returning a JSON reponse and then handle that response at the client side Javascript for Success or Failure conditions.

Can try something like this if you want: In the controller addStar() method response:

$data = ['star_count' => 'COUNT OF STARS'];
return json_encode($data);

In the View for that specific Star Div:

    <script>
        $('#stardiv).on('submit', function (e) {
            $.ajax({
                type: 'POST',
                url: "{{URL::to('xxxxx')}}",
                data: $(this).serialize(),
                dataType: "JSON",
                success: function (data) {
Handle the success condition here, you can access the response data through data['star_count']
                },
                error: function (data) {
Handle the error condition here, may be show an alert of failure
                }
            });
            return false;
        });
    </script>

After all this is just one approach, you may try different one which ever suits your need.

Collectives™ on Stack Overflow

Adding Item to Database in Laravel with AJAX and then showing Item

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related