How to reload a view in laravel after insert with JQuery Ajax

Question

I'm inserting records into a table using jQuery ajax. It works fine and returns a flash message that notifies that the record was inserted successfully. Now my problem is after the record have been inserted I don't know how to reload my table so that changes can be reflected.

Note I'm inserting via a bootstrap modal on the same page the table lies.

This is the controller that returns my records:

public function index()
{
    //
    $subjects = Subject::all();


    return view('subjects.show', compact('subjects'));
}

After records are return this is how I'm displaying it:

<table class="table table-responsive table-hover table-condensed table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Level</th>
                            <th colspan="2">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($subjects as $subject)
                            <tr>
                                <td>{{$subject->name}}</td>
                                <td>{{$subject->level}}</td>
                                <td>
                                    <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a>
                                </td>
                                <td>
                                    <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>

This is my script to insert record:

$(document).on('submit', '#subject-form', function(event) {
            event.preventDefault();
            /* Act on the event */

            var name = $('#name').val();
            var level = $('#level').val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: $("#subject-form").attr('action'),
                data: {name: name, level: level},
                success: function(response) {
                    console.log(response);

                    if (response.success) {
                        $.notify({
                            icon: 'glyphicon glyphicon-check',
                            message: response.success
                          },{
                              type: 'info',
                              timer: 4000,
                              offset: 20,
                              spacing: 10,
                              z_index: 1031,
                              delay: 5000,
                              placement: {
                                from: "bottom",
                                align: "right"
                              },

                              animate: {
                                enter: 'animated fadeInDown',
                                exit: 'animated fadeOutUp'
                              },
                        });
                    } else {
                        // display error
                    }

                    $('#subject-modal').modal('toggle');
                }
            });

This is the controller method that inserts the record and generate a flash response:

public function store(Request $request)
{
    //

   //return json_encode(request('name'));
    $response = array();

   if (Subject::create(request(['name', 'level']))) {

       $response['success'] = '<b>'.request('name').'</b>'.' created successfully';
   } else {
       $response['fail'] ='Error creating subject: <b>'.request('name').'</b>'.'. Try again, if problem persist contact administrator';
   }

    return \Response::json($response);


}

Are there ways I can make this work? Appreciate feed backs and suggestions. Thanks!!!

Why not just calling window.location.reload() in JavaScript? Otherwise you need to refresh the HTML content in the browser. Ajax is capable of delivering that content as well. — user320487
– user320487, Commented Jun 15, 2017 at 9:59
@btl window.location.reload() reloads the page but doesn't work will closing my dialog and displaying my flash message. How do I refresh the html content? — Nathan Siafa
– Nathan Siafa, Commented Jun 15, 2017 at 10:28
Make an AJAX request and return the new data with return response()->json($reponse);. Then in the success callback append the data to your HTML document. — user320487
– user320487, Commented Jun 15, 2017 at 10:30
@btl in my controller store method, I'm sure that's where it should be done, but now base on what I have I can I return both the response and the flash message? — Nathan Siafa
– Nathan Siafa, Commented Jun 15, 2017 at 10:32
@btl I'm currently returning only the flash mess with a field from the response. — Nathan Siafa
– Nathan Siafa, Commented Jun 15, 2017 at 10:33

Pankaj Makwana · Accepted Answer · 2017-06-15 11:11:14Z

Get response from controller and append new row into the table.

        $.ajax({
            type: "POST",
            url: $("#subject-form").attr('action'),
            data: {name: name, level: level},
            success: function (response) {
                console.log(response);

                if (response.success) {
                    var html = '<tr>';
                    html = '        <td>' + response.subject.name + '</td>';
                    html = '<td>' + response.subject.level + '</td>';
                    html = '<td>';
                    html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a>';
                    html = '</td>';
                    html = '<td>';
                    html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a>';
                    html = '</td>';
                    html = '</tr>';
                    $("table.table-responsive").append(html);
                    });
                } else {
                    // display error
                }

                $('#subject-modal').modal('toggle');
            }
        });

Controller Code

public function store(Request $request) {
    $response = array();
    $data["name"] = request('name');
    $data["level"] = request('level');
    $subject = Subject::create($data);
    if ($subject) {
        $response['success'] = '<b>' . request('name') . '</b>' . ' created successfully';
        $response['subject'] = $subject;
    } else {
        $response['fail'] = 'Error creating subject: <b>' . request('name') . '</b>' . '. Try again, if problem persist contact administrator';
    }

    return \Response::json($response);
}

Nauman Zafar · Accepted Answer · 2017-06-15 10:44:02Z

0

Two possible solutions for this.

window.location.reload() to reload the page.
Send the newly added record as a response and in success call back append this to your current table showing all records. (no reload will be required)

EDIT

Your controller method might look like this

public function store(Request $request)
{
    //

   //return json_encode(request('name'));
    $response = array();

   if ($subject = Subject::create(request(['name', 'level']))) {

       $response['success'] = '<b>'.request('name').'</b>'.' created successfully';
       $response['subject'] = $subject;
   } else {
       $response['fail'] ='Error creating subject: <b>'.request('name').'</b>'.'. Try again, if problem persist contact administrator';
   }

    return \Response::json($response);


}

Now your response array has an object (newly created subject record) and you can access it via subject key within your success callback.

Give your table an id and access it using jquery to append a <tr> </tr> element containing your subject record..

edited Jun 15, 2017 at 10:44

answered Jun 15, 2017 at 10:02

Nauman Zafar

1,1032 gold badges16 silver badges42 bronze badges

5 Comments

Nathan Siafa Over a year ago

How do I do option 2?

Nauman Zafar Over a year ago

@NathanSiafa, check If the edit is enough for you to understand the idea.

Nathan Siafa Over a year ago

I did this $('#subjects').append('<td>'+response.subject+'</td>') and I got [object Object]

Nathan Siafa Over a year ago

for me to archieve that I had to the id to the tbody tag.

Nauman Zafar Over a year ago

@Nathan Siafa Glad you finished the job :)

whatTheCase · Accepted Answer · 2017-06-15 10:58:36Z

0

You can use load function. Give your table an id and use this whenever you want:

var url = '/page_adress';
$('#table_id').load(url + '#table_id>*');

answered Jun 15, 2017 at 10:58

whatTheCase

1522 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to reload a view in laravel after insert with JQuery Ajax

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related