динамически обновлять данные, используя Modal в laravel

Question

Завтра я представляю свой код в спринте. Все работало нормально, пока несколько часов назад. У меня есть модальный, который появляется, когда пользователь нажимает на Edit. Он был, давая значения в соответствии с 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> 

Я очень расстроен и смущен и не знаю, что делать.

Любая помощь будет высоко оценена быть

Edit: После прочтения комментариев; я понял, что только один 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

Update

Я понимаю, у вас есть все сообщества, перечисленные в списке где-то за пределами этот модальный, каждый en try имеет кнопку редактирования и удаления. При нажатии кнопки «Редактировать» пользователь должен быть представлен модальным с одной формой для редактирования сообщества, на который он нажал эту кнопку. Все это с использованием одного модального элемента.

Тот факт, что вы не хотите использовать более одного модального средства, означает, что вы хотите генерировать меньше 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}
• поиск $('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 к нему, например, так:

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