0
我正在爲我的Laravel刀片模板文件添加AJAX腳本。但由於某種原因，我的JavaScript無法正常工作。它坐在頁面上，一切都很好，但是當我嘗試通過點擊按鈕來觸發功能時，它不起作用。Laravel 5.4在刀片模板中粘貼JavaScript
此JavaScript代碼不能位於單獨的文件中，因爲我裝箱了很多不同的表單，應該使用它自己的JavaScript函數處理這些表單。所以我需要在窗體的循環中使用這個函數。
這裏是我的整個葉片模板文件腳本：
@if($inventories)
<a href="{{ url('/inventory') }}" type="button" class="btn btn-sm btn-primary"> <<- Back To Inventory</a>
<div class="text-center"><b>Search Page</b></div>
<br>
<br>
<div class="search">
<div class="col-md-12">
@include(env('THEME').'.search_box')
</div>
</div>
<table>
@foreach($inventories as $inventory)
<tr >
<td class="part_img" rowspan="3"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}"><img src="{{ asset(env('THEME')) }}/images/inventory/{{$inventory->main_img}}"></a></td>
</tr>
<tr>
<td class="inventory_part_title" colspan="8">
<div style="float: left; margin: 0 30px;">{{ $inventory->part_number }}</div>
<div style="float: left;"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}">{{ $inventory->title }}</a></div>
<div style="float: right; margin-right: 50px;">{{ $inventory->upc_number }}</div>
</td>
</tr>
<tr>
<td><b>Location:</b> {{ $inventory->storage_location }}</td>
<td><b>Brand:</b> {{ $inventory->brand }}</td>
<td><b>Supplier:</b> {{ $inventory->supplier }}</td>
<td><b>GBP:</b> £{{ $inventory->unit_price_gbp }}</td>
<td><b>USD:</b> ${{ $inventory->unit_price_usd }}</td>
<td><b>In Stock:</b> {{ $inventory->unit_in_stock }}</td>
<td><b>Sold:</b> {{ $inventory->unit_sold }}</td>
<td>
<div class="onpage-sold-input">
{!! Form::open(['url' => route('sold.sold'),'class'=>'contact-form', 'id'=>'search-sold-button-'.$inventory->id,'method'=>'POST']) !!}
{!! Form::text('sold', old('sold'), array('class'=>'form-control', 'placeholder'=>'Qty.')) !!}
<input type="hidden" name="part_id" value="{{ $inventory->id }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
{!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit']) !!}
{!! Form::close() !!}
</div>
<script type="text/javascript">
$('#sold-button-{{ $inventory->id }}').on('click', function (e) {
e.preventDefault();
var form = $('#search-sold-button-{{ $inventory->id }}'),
data = form.serialize(),
ajax_url = form.attr('action'),
alert_section = $('.alert-section');
console.log(ajax_url);
console.log(data);
$.post(ajax_url, data, function (resp) {
alert_section.fadeIn().find('.alert').html(resp);
setTimeout(function() {
alert_section.fadeOut();
}, 3000)
})
});
</script>
</td>
<!--<td><button type="button" class="btn btn-sm btn-success">Edit</button></td>-->
</tr>
<tr>
<td colspan="8"></td>
</tr>
@endforeach
</table>
@else
<p>Inventory is empty!</p>
@endif
我怎樣才能解決這個問題？
您應該創建JS代碼的函數，而不是在循環中使用它。 你的做法是不好的做法。 –
@Vishal Tarkar請你發表一個這種功能的例子 –