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:

But both answers don't work.

user8555937 · Accepted Answer · 2020-03-03 16:05:12Z

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.

answered Mar 3, 2020 at 16:05

user8555937

2,4252 gold badges22 silver badges52 bronze badges

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

Comments

Illya · Accepted Answer · 2020-03-03 16:05:04Z

0

You should use

function onAddInvoiceItem()

not

function addItem()

Because you call it with onAddInvoiceItem() here :

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

answered Mar 3, 2020 at 16:05

Illya

1,2751 gold badge7 silver badges16 bronze badges

1 Comment

I am L Over a year ago

oops my bad, but its the same, I just forgot to rename the other one when putting it here.

Collectives™ on Stack Overflow

Append/Add Laravel blade template to current view using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related