Laravel 5.4ブレードテンプラムのJavaScript貼り付け

Question

LaravelブレードテンプレートファイルにAJAXスクリプトを追加しています。しかし何らかの理由で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> &#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 

私はこの問題を解決することができますか？

Answer 1

ここでは、指定したコードの例を示します。これがあなたを助けることを願っています。

コードが動作しない可能性があります。テストしていません。しかし、この方法では、ループ内にJSコードを置く必要はありませんが、単一の機能を使用します。

ここでは、送信クリックイベントでJS関数 "searchSold"を呼び出しています。

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