Laravel: rendering partial views with AJAX requests

Question

I am trying to make a single page CRUD application and I am using AJAX with jQuery. In this case, I submit the form and store a new country in my database asynchronously and then render a partial view with the new data.

This is my script and the method that retrieves the countries from the database and returns the partial view.

$('#create-country-form').submit(function(event) {
    $.post('/country/store', $('#create-country-form').serialize(), function() {
        $.get('/country/all', function(data) {
            $('#countries-table').empty();
            $('#countries-table').append(data['html']);
        });
    });
    event.preventDefault();
});

class CountryController extends BaseController {

    public function all() {
        $countries = Country::All();

        $html = View::make('countries.list', compact('countries'))->render();

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

    // ...

}

However, I don't like the idea of actually rendering the view in the page using jQuery, it feels like this should be Laravel's work.

How can I render with Laravel a partial view along with the use of AJAX, and not having to delegate that work to jQuery (append() and empty())?

I agree it would be cool to have some sort of plugin for this. You could create a JS utility pretty easily I think. — Sabrina Leggett
– Sabrina Leggett, Commented Sep 21, 2016 at 15:51

Mubashar · Accepted Answer · 2016-03-14 21:30:27Z

9

Pass your view to view helper, render it into a variable and return that variable as response to AjAx.

$view=view('your-view-blade');
$view=$view->render();
$responseData->responseSuccess($view);

In callback of your AjAx you can use that rendered HTML, you are free to append that HTML to any element.

answered Mar 14, 2016 at 21:30

Mubashar

7167 silver badges7 bronze badges

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

Comments

Imtiaz Pabel · Accepted Answer · 2015-02-23 10:18:52Z

4

Use string method before view file

return (String) view('Company.allUserAjax');

answered Feb 23, 2015 at 10:18

Imtiaz Pabel

5,4451 gold badge21 silver badges24 bronze badges

Comments

Laurence · Accepted Answer · 2014-07-27 18:21:11Z

3

You are getting confused.

Laravel is already doing the rendering of the partial. You are calling View::make() and returning the rendered view to $html.

Then you are passing the rendered view to jQuery, which is simply displaying the data given to it - its not doing any of the calculations itself.

answered Jul 27, 2014 at 18:21

Laurence

60.3k22 gold badges178 silver badges215 bronze badges

3 Comments

dabadaba Over a year ago

Yes, I am aware that Laravel is rendering the view, but it has to be jQuery the one telling that that returned data has to be assigned to a particular DOM element. Can't Laravel do that with Blade?

Laurence Over a year ago

No - AJAX is only possible through jQuery (or javascript). Laravel is PHP, so it can only be compiled once on the initial loading of the view. What you are doing is the correct way of doing it.

dabadaba Over a year ago

So the way I am doing it is the only way to do it? Also, regarding this matter, when showing session flash messages, since the page is not being reloaded, Blade @if and such won't be happening and I won't see those messages in the page. Should I return them from the controller and assign them to the page also using jQuery?

Mohammad Nizar Arbash · Accepted Answer · 2020-04-29 11:21:12Z

1

you can render the view by render() function, then return it by JSON response

$arr['key1'] = value; 
$arr['key2'] = value; 

$view = view('view.name', $arr)->render();
return Response::json(['status' => 200, 'view' => $view]);

edited Apr 29, 2020 at 11:21

answered Mar 28, 2020 at 9:10

Mohammad Nizar Arbash

731 silver badge9 bronze badges

1 Comment

Mark Rotteveel Over a year ago

Please don't post only code as answer, but also include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality, and are more likely to attract upvotes.

Jackal · Accepted Answer · 2020-09-04 12:30:02Z

0

I think you are confusing client with server.

You make the call from your client side, using jQuery, or Javascript fetch or whatever.
That request goes to an url, could be an API or a controller in your back end.
That controller will return the partial view.
You simply get the response on the ajax call success, then render it on the front end.

It's very simple and an efficient way to render content dynamically without refreshing the page. Just get what you need, saving bandwidth and loading time on the page.

answered Sep 4, 2020 at 12:30

Jackal

3,5315 gold badges45 silver badges96 bronze badges

Collectives™ on Stack Overflow

Laravel: rendering partial views with AJAX requests

5 Answers 5

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related