Bootstrapの動的コンテンツとAjaxの動的データ[Laravel]

Question

Laravelでコーディングするときに、特にデータをモーダル（ブートストラップフレームワーク）に渡し、データをAjaxのポストリクエストに渡す際に問題があります。 私は 'id'、 'name'、 'content'を持つアイテムの配列を持ち、データベースから取得してビューに渡します。
コントローラー：

<?php 
 

 
namespace App\Http\Controllers; 
 

 
use Illuminate\Http\Request; 
 

 

 
class SiteController extends Controller 
 
{  
 
    public function index(){ 
 
    
 
    $items = App\Items::all(); 
 

 
    return view('home', compact('items')); 
 
    } 
 
}

ビュー（index.blade.php）

@foreach ($items as $item) 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">{{ $item->name }}</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    {{ $item->content }} 
 
    <a href="#" role="button" class="delete_btn" data-item_id="{{ $item->id }}" data-item_name="{{ $item->name }}" class="btn btn-default">Delete</a> 
 
    </div> 
 
</div> 
 
@endforeach

以下コントローラコードとビューであります

「削除」ボタンをクリックすると、モーダルが表示されます。コード以下：

<div id="modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Delete item</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Are you sure to delete item <strong id="item_name"></strong>?</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button id="delete_btn_modal" type="button" class="btn btn-danger" data-item_id="is passed by js">Delete</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

Iレイアウトに含まれる他のファイルにある次のJavaScriptコードを使用モーダルにデータ（アイテムIDとアイテム名）を通過させます。コードでは、更新しなければならないフィールドのID（この場合は 'item_name'と 'delete_btn_modal'）を見つけるモーダルデータを更新します。ここで私は最初の問題を持っています：モーダルは常に最初のアイテムの名前を表示します。
Javascriptコード（functions.js）：

$('.delete_btn').on('click', function (event) { 
 
    var a = $('delete_btn') 
 
    var item_name = a.data('item_name') 
 
    var item_id = a.data('item_id') 
 
    
 
    var modal = $('#modal') 
 
    modal.find('#item_name').text(item_name) 
 
    modal.find('#delete_btn_modal').attr('data-item_id',item_id) 
 
    modal.modal('show'); 
 
});

だから私は '削除' をクリックをシミュレートしてみてください。私はAjax投稿要求をコントローラに送信する必要があります。コントローラからアイテムがデータベースから削除されます。 は、以下の私のAjaxコードです：
ItemControllerコード：

以下

$.ajaxSetup({ 
 
    headers: { 
 
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
 
    } 
 
    }); 
 
    
 
     $('.delete_btn_modal').click(function(e) { 
 
      e.preventDefault(); 
 
      var btn = $('.delete_btn_modal'); 
 
      var item_id = btn.data('item_id'); 
 
     
 
      var url = "/item"; 
 
      var $data = {}; 
 
      $data.item_id = item_id; 
 
      $.ajax({ 
 
      type: "POST", 
 
      url: url, 
 
      data: $data, 
 
      cache: false, 
 
      success: function(data){ 
 
       console.log(data) 
 
       return data; 
 
      } 
 
      }); 
 
      return false; 
 
     });

とAjaxリクエストから渡されたデータは、コンソールログにプッシュされるItemControllerコードは、あります

public function destroy(Request $request) 
 
    { 
 
     if ($request->ajax()){ 
 
      $item_id = $request->item_id; 
 
      return "The item's ID is: ".$item_id; 
 
     } 
 
    }

そして第2の問題：ajax投稿要求は常に最初のアイテムのIDを渡します。 私はどの要素がこれらの問題を引き起こす可能性があるのか​​を理解しようとしましたが、成功しませんでした。 申し訳ありませんが、あまりにも多くを書きましたが、私は正確であることをお勧めします。
これは愚かな質問ではありません、アドバイスをいただきありがとうございます。

Answer 1

あなたのajaxセットアップファイルのvar item = btn.data('item_id');は、var item_id = btn.data('item_id');である必要があります。

また、functions.jsにエラーがあります。それは次のようになります。

$('.delete_btn').on('click', function (event) { 
    var a = $(this); 
    var item_name = a.data('item_name') 
    var item_id = a.data('item_id') 

    var modal = $('#modal') 
    modal.find('#item_name').text(item_name) 
    modal.find('#delete_btn_modal').attr('data-item_id',item_id) 
    modal.modal('show'); 
}); 

あなたがに$('.delete_btn')を割り当てました。これにより、クラス.delete_btnのすべての要素が選択されます。後でaからデータを取得しようとすると、リストの最初の要素からデータが取得されます。それで、あなたは常に最初の要素の結果を得ました。 thisは、クリックされたリンクの特定の要素を参照します。それがあなたのデータを取得しようとしている場所です。

Answer 2

あなたはそれはあなたがしているクラス名と同じクラスのattrを持つすべての項目