Question

我在Laravel中进行编码时遇到了一些问题，特别是将数据传递给模态（bootstrap框架）并将数据传递给Ajax post请求。我有一系列带有＆＃39; id＆＃39;，＆＃39;名称＆＃39;以及从数据库中检索并传递给视图的内容＆＃39;以下是控制器代码和视图：
的控制器：

＆＃13;

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

＆＃13;

查看（index.blade.php）

＆＃13;

@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

＆＃13;

点击＆＃39;按钮＆＃39;删除，它将显示一个模态。代码下方：

＆＃13;

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

＆＃13;

要将数据（项目ID和项目名称）传递给模态，我使用以下javascript代码，该代码位于布局中包含的另一个文件中。在代码中，我更新了模态数据，找到了必须更新的字段的ID（在这种情况下＆＃39; item_name＆＃39;＆＃39; delete_btn_modal＆＃39;）。这里我有第一个问题：模态将始终显示第一个项目的名称 Javascript代码（functions.js）：

＆＃13;

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

＆＃13;

所以我尝试模拟点击“删除”＃39;。我需要向控制器发送一个ajax post请求，它将从数据库中删除该项。下面是我的ajax代码：

＆＃13;

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

＆＃13;

以下是ItemController代码，其中从ajax请求传递的数据在控制台日志中被推送：
ItemController代码：

＆＃13;

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

＆＃13;

并且第二个问题：ajax post请求将始终传递第一个项目的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

你必须调用$（this）而不是$（.class-name），因为它将获得返回数组的第一项，其中所有项的类attr等于class-name

Ajax中的Bootstrap模态和动态数据中的动态内容[Laravel]

2 个答案: