Question 42839 in Html Question posted in
Some basic documentation can be found here.

How to include blade tag in javascript? – Html

I’m using laravel 8 and I am trying to create a table for multiple inserts and in that table there is a dropdown that has already fetched data from the database. I have tried to enter code like this and the dropdown doesn’t work. Here is the javascript code:

<script>
    $(document).ready(function () {
        let baris = 1
        
        $(document).on('click', '#tambah', function () {
            baris = baris + 1
            var html = "<tr id='baris'" +baris+  ">"
                html +="<td>"+baris+"</td>"
                html +="<td contenteditable='true' class='id_barang'>"
                html += "<select class='form-control' class='id_barang' id='id_barang' name='id_barang' required>"
                html += "<option value='' hidden>-- Pilih Barang --</option>"
                html += "@foreach ($benang as $data)"
                html += "<option value='{{ $data->id_barang }}'>{{ $data->id_barang }}</option>"
                html += "@endforeach"
                html += "</select>"
                html += "</td>"
                html +="<td contenteditable='true' class='pekerjaan'></td>"
                html +="<td contenteditable='true' class='alamat'></td>"
                html +="<td> <button class='btn-sm btn-danger' data-row='baris' id='hapus'>-</button> </td>"
                html += "</tr>"
            $('#tabel1').append(html)
        });
    });
</script>

The code that I entered is the code that I entered in the view and it can work but when using javascript the dropdown cannot work

Tags:

2

Answers


  1. 0

    I’m not quite familiar with Blade, but I think you are mixing your JS code with your blade code, you are appending "@foreach ($benang as $data)" to a string, but most likely it is interpreted as blade code and results in Javascript with syntax errors.

    Your dropdown will also only have two options, always. Are you sure you iterate at the right position?

    This is my attempt at making something that works.

    <table>
    @php($baris = 1)
    @foreach($benang as $data)
        <tr id="baris{{ $baris }}">
            <td>
                <select>
                    <option value="" hidden>-- Pilih Barang --</option>
                    <option value="{{ $data->id_barang }}">{{ $data->id_barang }}</option>
                </select>
            </td>
            <td contenteditable="true" class="pekerjaan"></td>
            <td contenteditable="true" class="alamat"></td>
            <td>
                <button class="btn-sm btn-danger" data-row="baris" id="hapus">-</button>
            </td>
        </tr>
        @php($baris++)
    @endforeach
</table>
    Login or Signup to reply.
  2. 0

    I believe you are trying to loop the $benang data in your Javascript code after #tambah element was click. However, it won’t work as Javascript can’t compile the blade component, thus it will display on your web page as a string.

    There are several ways to achieve the Javascript method.

    1. Pass the value of $benang into a Javascript variable. This will only work if your Javascript is in your blade file (example: home.blade.php).
    <script>
    $(document).ready(function () {
        let baris = 1

        // Pass into Javascript variable.
        let benang = JSON.parse('<?= json_encode($benang) ?>');
        
        $(document).on('click', '#tambah', function () {
            baris = baris + 1
            var html = "<tr id='baris'" + baris+  ">"
                html +="<td>"+baris+"</td>"
                html +="<td contenteditable='true' class='id_barang'>"
                html += "<select class='form-control' class='id_barang' id='id_barang' name='id_barang' required>"
                html += "<option value='' hidden>-- Pilih Barang --</option>"

                // Loop using Javascript instead of blade.
                benang.forEach(function (data) {
                    html += "<option value='" + data.id_barang + "'>" + data.id_barang + "</option>"
                });

                html += "</select>"
                html += "</td>"
                html +="<td contenteditable='true' class='pekerjaan'></td>"
                html +="<td contenteditable='true' class='alamat'></td>"
                html +="<td> <button class='btn-sm btn-danger' data-row='baris' id='hapus'>-</button> </td>"
                html += "</tr>"
            $('#tabel1').append(html)
        });
    });
</script>

    The code a

    1. Create a HTML view in the blade file for you to re-use in Javascript.

    home.blade.php

    <div class="select-in-js">
    <select class='form-control' class='id_barang' id='id_barang' name='id_barang' required>
        <option value='' hidden>-- Pilih Barang --</option>
        @foreach ($benang as $data)
            <option value='{{ $data->id_barang }}'>{{ $data->id_barang }}</option>
        @endforeach
    </select>
</div>

    home.js

    <script>
    $(document).ready(function () {
        let baris = 1
        
        $(document).on('click', '#tambah', function () {
            baris = baris + 1
            var html = "<tr id='baris'" + baris+  ">"
                html +="<td>"+baris+"</td>"
                html +="<td contenteditable='true' class='id_barang'>"

                // Get the dropdown and add using jQuery.
                html += $('.select-in-js').html();

                html += "</td>"
                html +="<td contenteditable='true' class='pekerjaan'></td>"
                html +="<td contenteditable='true' class='alamat'></td>"
                html +="<td> <button class='btn-sm btn-danger' data-row='baris' id='hapus'>-</button> </td>"
                html += "</tr>"
            $('#tabel1').append(html)
        });
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search