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

Answer 1

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')

Answer 2

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');
}

Answer 3

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);
     }
  });

Answer 4

Via ajax request you can get compiled view from server and yield that value into some parent root, eg 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
});