Laravel 5,4 JavaScript function with ajax

Asked by: bohdan baida

I have a java script function with ajax in it. I call function in laravel blade loop, and I have a form which submitting sells. I need to pass sell for each product separately but to use the same ajax code.

My form looks like this:

Here is my blade 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">
                var product_id = {{ $inventory->id }};
                ajax_search_sold(product_id);
            </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

And here is my JavaScript function which is contains AJAX script:

function ajax_search_sold(product_id){

    jQuery.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        }
    });

    $('#sold-button-'+product_id).on('click', function (e) {
        e.preventDefault();

        var form = $('#search-sold-button-'+product_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)
        })
    });
}

How can I write a function with AJAX in it to pass data for each sell in loop?

Source