Append/Add Laravel Blade Template To Current View Using JavaScript

- 1 answer

So, I have this:

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

 // some php logic


// some laravel blade logic

    function onAddItem() {

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


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

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


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:

But both answers don't work.



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:

    url: "/blades/template.path",
    cache: false,
    success: function(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.