明示的にModalを使用してデータを更新する

Question

明日私のコードをスプリントで提示しています。数時間前まですべてがうまくいっていました。私はユーザーが編集をクリックするとポップアップするモーダルを持っています。 は、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> 

私は非常に混乱しており、何をすべきかわかりません。

すべてのヘルプは高く評価されるだろう

編集：コメントを読んだ後 。私は1つだけ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

が更新

私はあなたがどこか外リストに記載されているすべてのコミュニティを持って理解してこのモーダル、それぞれ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属性が追加されました。

各コミュニティにフォームを提供する代わりに、コミュニティ編集フォーム用のテンプレートを提供するようにモーダルを変更してください。

今、あなたはそれは、コミュニティのボタンクリックイベント（ビューボタンの中から、1）を編集し、それから 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> 

。

• それに$('modal-title span')と.html()コミュニティ名を検索
• $('#editCommunityForm')を検索し、それが$('button[form="editCommunityForm"])ため、クリックの\update\{community_id}
• 検索へのアクションの変更、他の多くのがありますが、AJAX

を使用してフォームを送信これを行う方法、より良い方法、それはあなたがそれを動作させる方法についての単なる例です。

---

あなたのsubmitボタンが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>