Question 17074 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to render blade html with javascript execution. (Laravel and Blade)

I need get content html from report view, but someone elements is making by javascript how to populate div.

On laravel i using view(‘report’)->render(); but return only empty div:

<div id="report"></div>

The render not execute my javascript functions, exists one solution for this?

I need get content html with DOM elements complete render via javascript function

Tags:

2

Answers


  1. 0

    JavaScript is client sided, it cannot execute unless you open it in browser. So, there is no possible way to retrieve data with render() that is populated by JavaScript

    Login or Signup to reply.
  2. 0

    I use a workaround.

    Say you want to use a row to populate some ‘righteous’ table. You can build a fake table as a template .
    It will feed you with its row:

    templates.mytamplate.blade.php

    <table id="mock_table" class="table w-75   mx-auto   " hidden>
<thead>
</thead>
<tbody>                   
<tr id="tr_id" > {{-- this row --}}
    <td ></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <div onclick="" class=" w-50 shadow-lg text-center " id="editButton">
            <img src="/images/pencil.svg" class="rounded  "  style="pointer-events: none;height: 20px; width:  20px">
        </div>
    </td>
    <td>
        <div onclick="" class=" w-50 shadow-lg text-center"  id="deleteButton">
            <img src="/images/trash-can.svg" class="rounded "
                 style="pointer-events: none;height: 20px; width:  20px">
        </div>
    </td>
</tr>
</tbody>

    Now back to the main blade:

    @section('mycontent')
   <div id="backg" class="vh-100 w-100 bg-white"> </div>
   @include('templates.mytamplate')
....
   <script  type="text/javascript">
    
    $(function () {
        $('#backg').remove()
        ........
        // in your template the table marked as hidden  not the row :

        let clone_ = $('#mock_table').clone()
        let tr_ = clone_.find('#tr_id')
        let myHtmlString_= tr_[0].outerHTML
     });
   ....
   </script>
@endsection

    that $(‘#backg’) hides table when initialy the mock stuff may flicker instantly in some browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search