Динамический контент в модальных и динамических данных 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')); 
 
    } 
 
}

View (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 -->

Для передачи данных (идентификатор элемента и имя элемента) к модальным я использую следующий код Javascript, который находится в другом файле в макет. В коде я обновляю модальные данные, обнаруживая идентификатор поля, который необходимо обновить (в данном случае «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 на контроллер, который удалит элемент из базы данных. Ниже мой Аякса код:

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

И ниже код ItemController, в котором данные, передаваемые из АЯКС запроса выталкиваются в журнале консоли:
ItemController код:

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

И есть Вторая проблема: запрос на отправку ajax будет всегда содержать идентификатор первого элемента. Я попытался выяснить, какие элементы могут вызвать эти проблемы, без успеха. Извините, если я написал слишком много, но я предпочел быть точным.
Надеюсь, это не глупый вопрос, спасибо вам за консультацию.

Answer 1

Я думаю, var item = btn.data('item_id');, в вашем файле настройки ajax, должно быть var item_id = btn.data('item_id');.

Кроме того, у вас есть ошибка в ваших функциях.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 равного классом имя-