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。

要更新的控制器功能：

 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以便提供更快的加载时间，如果是这种情况则编辑视图按钮。

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

现在你需要做的就是听编辑社区按钮点击事件（来自视图按钮的事件），从中获取data-community对象，打开一个模态并填充以适应编辑过的社区。

在其中搜索$('modal-title span')和.html()社区名称
搜索$('#editCommunityForm')并将其更改为\update\{community_id}
使用ajax

$('button[form="editCommunityForm"])

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

原始回答

为什么你的提交按钮在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>

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

1 个答案: