Laravel @include a blade view via ajax

Question

I have a page which will @include some content, I want to @include that blade view file using ajax request. How should I do it.

Basically, the view file will get the items from server,

**price.blade.php**
@foreach ($items as $item)
<div class="item-post">
  <div class="priceofitem">{{ $item->price }} </div>

I want to include @include('price.blade.php') in my tab section

<ul class="tabs">
<li><a href="#tab1">Prices </li>
<div id="tab1">@include('price.blade.php')</div>

I don't want to include that view file automatically upon load, as I don't want to load that tab's content unless the user clicks on it, if the user wants the prices than the user clicks on that tab, and an AJAX request will be sent to include that file.

Hope I made myself clear, please let me know if you did not understand me.

Fingers crossed

Dhiraj · Accepted Answer · 2017-09-27 20:05:35Z

9

You want something like

$(document).ready(function() {
    $("#tab1").click(function() {
        $.ajax({
            type: 'POST', 
            url : "/yourrouteview", 
            success : function (data) {
                $("#tab1").html(data);
            }
        });
    });
});

Your controller and route must configure /yourrouteview to get the correct view (that is @include('price.blade.php')

answered Sep 27, 2017 at 20:05

Dhiraj

2,7672 gold badges13 silver badges36 bronze badges

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

Comments

Mayank Pandeyz · Accepted Answer · 2017-09-27 13:58:06Z

6

Make your ajax request and return the view from controller function like:

return view('your_view');

in ajax success function, append it to where you want like:

success: function(response){
    $('#Id').html(response);
}

The flow is something like:

$('#tab').click(function(){
    // ajax call here
    ...
    success: function(response){
        $('#Id').html(response);
    }
});

controller:

function funcName()
{
    // Do what ever you want
    return view('your_view');
}

edited Sep 27, 2017 at 13:58

answered Sep 27, 2017 at 13:22

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

5 Comments

Cowgirl Over a year ago

Thank you. I am new to Laravel and AJAX as well. What would be the best way to make the ajax request in the context above.

Mayank Pandeyz Over a year ago

@ChrisMkp Sorry, I am getting you?

Cowgirl Over a year ago

How can I make an ajax request above when clicking on #tab1, while this ajax request will get the price.blade.php view. While returning the view which controller function should I be using, a new one?

Cowgirl Over a year ago

Not helpful at all :(

Athul Nath Over a year ago

is this ok to be used? I'm a bit confused. Somebody help!

Jukka Newkampton · Accepted Answer · 2017-09-27 13:24:16Z

0

Via ajax request you can get compiled view from server and yield that value into some parent root, e.g in promise .then call.

On the server side you can use simple handler of HTTP request in your routes:

Route::get('/', function () {
    return view('price'); // here you can pass params for compiling blade template
});

answered Sep 27, 2017 at 13:24

Jukka Newkampton

4151 gold badge6 silver badges10 bronze badges

1 Comment

Cowgirl Over a year ago

But it does not implement AJAX call, I want to implement AJAX

Harsh Joshi · Accepted Answer · 2019-07-05 11:34:00Z

0

Make ajax call with id with using blade engine with get request in laravel like this!! Try this.

$(document).ready(function(){
  var id = $(this).data("id");
  $.ajax({
     type: "GET",
     url:"{{ url('your url') }}/"+id,
     cache: false,
     contentType: false,
     processData: false,
     success: function (data) {
       $("#id").html(data);
     },
     error: function (xhr, textStatus, errorThrown) {
       console.log("XHR",xhr);
       console.log("status",textStatus);
       console.log("Error in",errorThrown);
     }
  });

answered Jul 5, 2019 at 11:34

Harsh Joshi

11 bronze badge

Collectives™ on Stack Overflow

Laravel @include a blade view via ajax

4 Answers 4

Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related