Laravel 5,4 JavaScript function with ajax

Question

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?

Answer 1

Right now, you mixed 2 possible ways into one.

1. apply onclick event to fire the function.
2. create jquery which apply to button to do the ajax call.

What you did is apply the jquery button event into function which never been call. To fix this pick one of the above, for example

Add onClick parameter to button

 {!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit','onClick'=>'ajax_search_sold('.$inventory->id.')']) !!}

then, remove

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

so that your process can be run when function get call.