php - 在 laravel 中使用 Modal 动态更新数据

Question

明天我将在 sprint 中展示我的代码。直到几个小时前，一切都运行良好。当用户单击“编辑”时，我会弹出一个模式。它是根据 id 给出值。

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                @foreach($Community as $editCommunity)
                <h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
            </div>
            <div class="modal-body">
                <form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
                </form>
                @endforeach
                <button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
            </div>
            <div class="modal-footer">
                {{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
            </div>
        </div>
    </div>
</div>

我很沮丧和困惑，不知道该怎么办。

非常感谢任何帮助

编辑:看完评论后；我知道每次只会更新一个id。我如何动态更改 id 并更新该特定 id 的数据，并且每次它应该只获得 clicked id。

要更新的 Controller 函数:

 public function updateCommunity($id, CommunityRequest $request) {
        $updateCommunity = Community::findOrFail($id);
        $updateCommunity->update($request->all());
        return back();
    }

查看按钮:

@foreach ($Community as $communities)
     <tr>
        <td>{{$communities->community_name}}</td>
        <td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
        | <a href="{{ URL::to('delete', array($communities->id)) }}" class="btn btn-danger dropdown-toggle waves-effect waves-light">Delete</a></td>
      </tr>
  @endforeach

Answer 1

更新

我知道您在此模式之外的某处列出了所有社区，每个条目都有一个编辑和删除按钮。单击编辑按钮后，应向用户显示一个带有单一表单的模式，以编辑他单击该按钮的社区。所有这些都使用单个模态元素。

您不想使用多个模式这一事实意味着您希望生成较少的 DOM 以提供更快的加载时间，如果是这种情况，请编辑您的 View 按钮。

@foreach ($Community as $communities)
     <tr>
        <td>{{$communities->community_name}}</td>
        <td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
        | <a href="{{ URL::to('delete', array($communities->id)) }}" class="btn btn-danger dropdown-toggle waves-effect waves-light">Delete</a></td>
      </tr>
@endforeach

通知新data-community编辑按钮中的属性。

现在更改您的模态，为社区编辑表单提供一个模板，而不是为每个社区提供一个表单。

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit: <span></span></h4>
            </div>
            <div class="modal-body">
                <form class="form-group" method="post" id="editCommunityForm">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="text" name="community_name" class="form-control">
                </form>
                <button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
            </div>
            <div class="modal-footer">
                {{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
            </div>
        </div>
    </div>
</div>

现在你需要做的是听编辑社区按钮点击事件(来自 View 按钮的那个)，得到data-community对象，打开模式并填充以适应编辑的社区。

• 搜索 $('modal-title span')和 .html()将社区名称放入其中
• 搜索 $('#editCommunityForm')并将其操作更改为 \update\{community_id}
• 搜索 $('button[form="editCommunityForm"])然后单击使用 ajax 发送表单

还有很多其他方法可以做到这一点，更好的方法，这只是一个简单的例子，说明如何让它发挥作用。

---

原始答案

为什么你的提交按钮在foreach之外？但是在图像中它显示在每个表格之后？你也在关闭<div>在该循环之前打开的循环中标记。

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    @foreach($Community as $editCommunity)
    <h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
    <form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
    </form>
    @endforeach
    <button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>

修复此问题后，您可以通过添加 $editCommunity->id 来简单地编辑表单 ID像这样:

 <form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">

然后您可以编辑按钮的表单参数以匹配您的表单:

<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>

你应该这样结束:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                @foreach($Community as $editCommunity)
                <h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
                <form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
                </form>
                <button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
                @endforeach
            </div>
            <div class="modal-footer">
                {{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
            </div>
        </div>
    </div>
</div>