Append/Add Laravel blade template to current view using JavaScript

Question

So, I have this:

item.blade.php(locaton: 'pages/components/item.blade.php')

<div>
 // some php logic
test
</div>

list.blade.php

// some laravel blade logic

<script>
    function onAddItem() {

// the code above doesn't work
        $.get("visitor.pages.service.html", function(data){
           $('#appends').append(data);
        });
      }
    }

</script>


<div>
  <button onclick="onAddItem()">add item</button>

  <div id="list">
    @include('pages.components.item', ['someVars'=> false]); //this displays OK
  </div>

</div>

Now what I wanna do is when I click the add item button, it should also add another pages.components.item template inside list (id) div.

I already tried the answers on these posts:

• Appending Laravel Blade from JQuery
• https://stackoverflow.com/a/40219813/2784493

But both answers don't work.

Answer 1

As the answer pointed you can't do that, as blade is server side processed. There is a workaround however but it's expensive and prone to vulnerabilities: create custom routes which output the desired blade files when needed.

In routes.php:

Route::get('/blades/{path_to_blade}', function($path_to_blade){
    return view($path_to_blade);
})->where('path_to_blade', '^[a-z0-9\_\-\.]+$');

Then you can use an ajax call or whatever to call the requested template. I'm using jQuery as demo:

$.ajax({
    url: "/blades/template.path",
    cache: false,
    success: function(html){
        $("#element_in_which_to_insert").append(html);
    }
});

You can also request the template in browser: /blades/template.path. But again: this method is prone to vulnerabilities. You should use a frontend framework such as Vue or Angular instead.

Answer 2

You should use

function onAddInvoiceItem()

not

function addItem()

Because you call it with onAddInvoiceItem() here :

<button onclick="onAddInvoiceItem()">add item</button>