2017-07-06 6 views
0

私はajaxを持つJavaスクリプト関数を持っています。私はララールの刃のループで機能を呼び、私は売りを提出するフォームを持っています。私は別々に各製品の販売を渡すが、同じAjaxコードを使用する必要があります。Laravel 5,4 ajaxを使用したJavaScript関数

私のフォームは次のようになります。私のブレードファイルスクリプトです。ここ enter image description here

@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 

そしてここでは、AJAXのスクリプトが含まれて私のJavaScript関数です:

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) 
     }) 
    }); 
} 

方法AJAXでループ内の各売りデータを渡す関数を書くことはできますか?

+0

jqueryの遅延を使用します。 – aldrin27

+1

あなたは間違ったアプローチを使用しています。クリックしているのと同じオブジェクトにアクセスするには '$(this) 'を使用してください。 –

答えて

1

今のところ、2つの方法を1つに混在させました。

  1. この関数を起動するにはonclickイベントを適用します。
  2. ajax呼び出しを行うボタンに適用されるjqueryを作成します。

jqueryボタンのイベントは、今までコールされていない関数に適用されました。関数が呼び出しを取得するとき、あなたのプロセスを実行できるように、これは上記のいずれかを選んで修正するには、例えば

は、ボタンに

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

をonClickのパラメータを追加し、

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

を削除します。

+0

と今すぐページを再ロードする方法を教えてください。 –

+0

あなたの行動をjavascriptに変更することができます:void(0) –

関連する問題