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

update data dynamically using Modal in laravel

提问by Qasim Ali

Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It wasgiving the values according to id.

明天我将在 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>

I am very upset and confused and don't know what to do.

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

Any help would highly be appreciated

任何帮助将不胜感激

Edit:After reading the comments; i have understood that only one idwould be updated every time. How could i change the iddynamically and update data of that specific idand each time it should get only clicked id.

编辑：阅读评论后；我知道id每次只会更新一个。我怎么能id动态地改变和更新那个特定的数据，id每次它应该只得到clicked id.

Controller Function to update:

控制器功能更新：

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

View Buttons:

查看按钮：

@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

采纳答案by Linek

Update

更新

I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.

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

The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.

您不想使用多个模态这一事实意味着您希望生成更少的 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

Notice new data-communityattribute in edit button.

注意data-community编辑按钮中的新属性。

Now change your modal to provide a template for community edit form instead of providing a form for each 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>

Now what you need to do it listen to edit community button click event (the one from view buttons), get data-communityobject from it, open a modal and fill with to fit edited community.

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

• search for $('modal-title span')and .html()community name into it
• search for $('#editCommunityForm')and change it's action to \update\{community_id}
• search for $('button[form="editCommunityForm"])and on click send form using ajax

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

There are many other ways to do this, better ways, it's just a simple example on how you can make it work.

有很多其他方法可以做到这一点，更好的方法，这只是一个关于如何使其工作的简单示例。

---

---

Original answer

原答案

How come your submit button is outside of foreachbut in an image it is displayed after each form? Also you are closing <div>tag in a loop that you opened before that loop.

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

After you fix this you can simply edit form id by adding $editCommunity->idto it, like so:

解决此问题后，您可以通过添加$editCommunity->id来简单地编辑表单 ID ，如下所示：

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

Then you can edit button's form parameter to match your form:

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

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

You should end up with this:

你应该得到这样的结果：

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