[英]Use Foreach Loop in Javascript with Laravel 5.3
I want to make a button to add new item row :我想制作一个按钮来添加新的项目行:
This is the HTML in create.blade.php这是 create.blade.php 中的 HTML
<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 :这是包含的 create.js :
$(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 have no experience in laravel, but I'd guess that it simply doesn't feel responsible for js files.我没有 laravel 的经验,但我猜它根本不觉得对 js 文件负责。
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.一次在 html 中,一次在 JS 中的字符串中。 And you have to keep these two places sync.你必须保持这两个地方同步。
May I suggest a different approach:我可以建议一种不同的方法:
in create.blade.php:在 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并在 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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.