Use Foreach Loop in Javascript with Laravel 5.3

Question

I want to make a button to add new item row :

This is the HTML in create.blade.php

            <div class="createOrderForm" id="orderMenuItems">
            
                <div class="orderItem">
                    
                    <label> Item : </label>
                    <select name="item[]" required>

                        <option value="">Menu Items</option>

                        @foreach ($menuItems as $item)
                        <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach

                    </select>
                    
                    <label>Quantity :</label>
                    
                    <input  type="text" name="quantity[]" value="" required>
                
                </div>
            
            </div>

and this is create.js that's included :

$(document).ready(function () {
console.log("Welcome To create order Page");


var addItem = $('#addItem');
var orderMenuItems = $('#orderMenuItems');



$(addItem).click(function(e){
   
    var newItem = '<div class="orderItem">';
                    
    newItem += '<label> Item : </label>';

    newItem += '<select name="orderItem[]">';

    newItem += '<option value="">Menu Items</option>';

    newItem += "@foreach ($menuItems as $item)";

    var itemID = "{!! $item->id !!}";
    
    newItem += '<option value="'+ itemID +'">'+ itemID +'</option>';

    newItem += "@endforeach";

    newItem += '</select>';
    
    newItem += '<label>Quantity :</label>';
    
    newItem += '<input  type="text" name="quantity[]" value="" required>';
                
    newItem += '</div>';
    
    $(orderMenuItems).append(newItem);
                
});
});

The button works and adds new row, but there is a problem with the menu items in the new row :

I think the problem is here :

newItem += "@foreach ($menuItems as $item)";

    var itemID = "{!! $item->id !!}";
    
    newItem += '<option value="'+ itemID +'">'+ itemID +'</option>';

    newItem += "@endforeach";

I tried to use :

@foreach ($menuItems as $item)
....
@endforeach

instead of :

newItem += "@foreach ($menuItems as $item)";
....
newItem += "@endforeach";

but it doesn't work.

How Can I fix it ??

I think it's because you are mixing php and javascript so the {!! $item->id !!} isn't getting echoed by php, but is set as a string. — Mr. Greenwoodz
– Mr. Greenwoodz, Commented Oct 13, 2017 at 12:44
I tried it but still having the same problem .. @Mr.Greenwoodz — Rowayda Khayri
– Rowayda Khayri, Commented Oct 13, 2017 at 13:04
You need to generate the select in JS and append it with js. Don't use blade , it will be not compiled. You will need ajax to get your value. — Dessauges Antoine
– Dessauges Antoine, Commented Oct 13, 2017 at 13:20

Thomas · Accepted Answer · 2017-10-13 14:13:41Z

2

I have no experience in laravel, but I'd guess that it simply doesn't feel responsible for js files.

I don't like this approach where you store the markup in two places. Once in the html, and once in a String in JS. And you have to keep these two places sync.

May I suggest a different approach:

in create.blade.php:

<div class="createOrderForm" id="orderMenuItems">
    <div class="orderItem">

        <label> Item : </label>
        <select name="item[]" required>

            <option value="">Menu Items</option>

            @foreach ($menuItems as $item)
            <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach

        </select>

        <label>Quantity :</label>

        <input  type="text" name="quantity[]" value="" required>

    </div>
</div>

the template can be anywhere in the page, so why not store it right next to where it's used

and in create.js

$(document).ready(function () {
    console.log("Welcome To create order Page");

    var $addItem = $('#addItem');
    var $orderMenuItems = $('#orderMenuItems');

    $addItem.click(function(){
        var markup = $orderMenuItems.children('.orderItem')[0].outerHTML;
        $orderMenuItems.append(markup);
    });
});

edited Oct 13, 2017 at 14:13

answered Oct 13, 2017 at 13:03

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

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

3 Comments

Thomas Over a year ago

@RowaydaKhayri, no js variables don't start with a $, but I've adapted this pattern of nameing variables that store a reference to a jQuery object with a leading $, mostly to tell these jquery lists from native objects apart, mostly real DOM-nodes and Arrays. It just happens that this snippet only contains variables storing jquery objects.

Rowayda Khayri Over a year ago

Thanks, it works .. but the new row has a default quantity value as the first row .. is there a way to fix this ?

Thomas Over a year ago

@RowaydaKhayri didn't check that, thought the implicit .clone(false) would take care of that. I've updated the answer to append the markup of the initial .orderItem rather than a cloned node, as the values ain't stored into the markup on change.

Collectives™ on Stack Overflow

Use Foreach Loop in Javascript with Laravel 5.3

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related