Laravel 5.4将JavaScript粘贴到刀片模板中

Question

I am adding AJAX script to my Laravel blade template file. But for some reason my JavaScript not working properly. It seats there on the page, and everything is good but when i try to trigger function by clicking on button it's just don't work.

This JavaScript code cannot be in the separate file, because I am crating a lot of different forms which should be processed with it own JavaScript function. So I need to have this functions on the loop with the form.

Here is my whole blade template file script:

@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> &#163;{{ $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

How can I fix this issue?

Answer 1

Here is example with your given code. Hope this will help you.

Code might not work I haven't tested it. but this way you don't have to put JS code in Loop but with single function.

Here we are calling JS function "searchSold" on Submit click event.

    @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> &#163;{{ $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','onclick' => 'searchSold(event,".$inventory->id.")' ]) !!}
                            {!! Form::close() !!}
                        </div>

                    </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

        <script type="text/javascript">

        function searchSold(event,inventory_id){

            event.preventDefault();

            var form = $('#search-sold-button-'+inventory_id);
            var data = form.serialize();
            var ajax_url = form.attr('action');
            var alert_section = $('.alert-section');

            $.post(ajax_url, data, function (resp) {                                    
                alert_section.fadeIn().find('.alert').html(resp);
                setTimeout(function () {
                    alert_section.fadeOut();
                }, 3000)
            });
        }
        </script>