使用Bootstrap Modal和Laravel 5.2更新数据库值

Question

我通常可以使用 Laravel 5.2 插入，更新和删除数据库中的数据。现在我想用 Bootstrap Modal 更新表格数据。我的模态和表视图在同一个刀片中。

模态：

    

  <!-- Modal content-->
  <div class="modal-content">
    @foreach($dataQrDetails as $dataQr)
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Updating {{ $dataQr->winner_name }}</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
              {{ csrf_field() }}
                  <input type="hidden" name="chance_of_win" value="Shipped">
                  <div class="form-body">                  
                      <div class="form-group">
                          <label class="col-md-3 control-label">Text Input</label>
                          <div class="col-md-9">
                              <div class="input-icon">
                                  <i class="fa fa-archive" aria-hidden="true"></i>
                                  <input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
                          </div>
                      </div>                                            
                  </div>
                  <div class="form-actions">
                      <div class="row">
                          <div class="col-md-offset-3 col-md-9">
                              <button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
                          </div>
                      </div>
                  </div>
        </form>
      </div>
      @endforeach
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>          
  </div>
</div>

TBODY：

<tbody>
    @foreach($dataQrDetails as $dataQr)
        <tr>
            <td> {{  $dataQr->winner_name }} </td>
            <td> {{  $dataQr->username }} </td>
            <td> {{  $dataQr->winner_gender }} </td>
            <td> {{  $dataQr->mobile_no }} </td>
            <td> {{  $dataQr->ship_address }} </td>
            <td> {{  $dataQr->product_name }} </td>
            <td> {{  $dataQr->product_stat }} </td>
            <td> {{  $dataQr->created_at }} </td>
            <td> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" data-winner="{{ json_encode($dataQr) }}">Open Modal</button> 
        </tr>                            
    @endforeach
</tbody>

控制器：

public function statusUpdate(Request $request, $id)
{
    $id = $request->input("id");
    $winner = Winner::find($id);
    if ($winner->product_stat == "Shipped") {
        echo "Its Already Shipped!";
    }else{

    $winner->product_stat = "Shipped";
    $winner->status_text = $request->get('status_text');
    $winner->save();
    $request->session()->flash('alert-info', 'Product Status Updated!'); 
    return Redirect::to('admin/winner/detail');
    }

}

路线：

Route::post('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController@statusUpdate']);

现在，如果我点击一行的edit按钮，那么它打开的Bootstrap模式具有所有值。但它应该是点击的价值。再次，如果我填写模态并单击submit按钮，然后它不会更新到数据库。它只是重定向../public/admin/winner/status/18网址，错误MethodNotAllowedHttpException。我怎样才能做到这一点？提前谢谢。

Answer 1

我使用一点 JavaScript 来完成这项工作。希望它能帮助谁想要使用Bootstrap Modal和Laravel Framework更新数据。使用js从数据库中检索数据，并使用id以模态显示。

模态看起来像：

  <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Updating "<span class="qr_winner_name_show" style="color: #32c5d2;"></span>" Shipping Status</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" action="{{url('admin/winner/status/update')}}" method="POST" enctype="multipart/form-data" id="contactForm">
              <input type='hidden' name='id' class='modal_hiddenid' value='1'>
              {{ csrf_field() }}
                  <input type="hidden" name="chance_of_win" value="Shipped">
                  <div class="form-body">                  
                      <div class="form-group">
                          <label class="col-md-3 control-label">Text Input</label>
                          <div class="col-md-9">
                              <div class="input-icon">
                                  <i class="fa fa-archive" aria-hidden="true"></i>
                                  <input type="text" class="form-control modal_status_inp" placeholder="{{ trans('common.enter') }}" name="status_text" value=""></div>
                          </div>
                      </div>                                            
                  </div>
                  <div class="form-actions">
                      <div class="row">
                          <div class="col-md-offset-3 col-md-9">
                              <button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
                          </div>
                      </div>
                  </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>   
  </div>

当我再次点击带有data-id="{{ $dataQr->id }}"的按钮时传递id，如果你需要传递另一个值，那么你就可以这样传递。

<强> TBODY：

<tbody>
    @foreach($dataQrDetails as $dataQr)
        <tr id="qrd_{{$dataQr->id}}">
            <td class="qr_winner_name"> {{  $dataQr->winner_name }} </td>
            <td> {{  $dataQr->username }} </td>
            <td> {{  $dataQr->winner_gender }} </td>
            <td> {{  $dataQr->mobile_no }} </td>
            <td> {{  $dataQr->ship_address }} </td>
            <td> {{  $dataQr->product_name }} </td>
            <td> {{  $dataQr->product_stat }} </td>
            <td> {{  $dataQr->created_at }} </td>
            <td> <button type="button" class="btn btn-info btn-xs openModal" data-id="{{ $dataQr->id }}" data-status-text="{{ $dataQr->status_text }}" data-toggle="modal" data-target="#myModal">Delier</button></td> 
        </tr>                            
    @endforeach
</tbody>

<强> JS：

  $(document).ready(function(){
    $(document).on('click','.openModal',function(){
        var id = $(this).data('id');
        $('.modal_hiddenid').val(id);
        $('.modal_status_inp').val($(this).data('status-text'))
        var qr_winner_name = $('#qrd_'+id+' .qr_winner_name').html();
        $('.qr_winner_name_show').html(qr_winner_name);
    });
  })

<强>路线：

Route::get('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController@editStat']);
Route::post('/winner/status/update', ['as' => 'winner.change', 'uses' => 'WinnerController@statusUpdate']);

<强>控制器：

public function editStat($id)
{
    //
    $winner = Winner::findOrFail($id);
    return view('winner.detail', ['id' => $id, 'winner' => $winner]);
}

public function statusUpdate(Request $request, $id=0)
{

    $id = $request->input("id");
    $winner = Winner::find($id);
    if ($winner->product_stat == "Shipped") {
        $request->session()->flash('alert-warning', 'Its has been already Shipped! Try another one.'); 
        return Redirect::to('admin/winner/detail');
    }else{

    $winner->product_stat = "Shipped";
    $winner->status_text = $request->get('status_text');
    $winner->save();

    $request->session()->flash('alert-info', 'Product Status Updated!'); 
    return Redirect::to('admin/winner/detail');
    }

}

希望通过Bootstrap Modal和Laravel Framework帮助一些想要insert/update数据库值的人。

Answer 2

要更新或插入数据库，您需要使用POST方法。

您的GET方法需要替换为POST方法。

Answer 3

你有很多选择让它发挥作用。 我会告诉你一个：

单独获取GET路线，例如/ winner / edit / {id}

然后在您的Controller函数中渲染一个包含模态内容的视图：

<div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Edit Item</h4>
        </div>
        <div class="modal-body">
           <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <input value="{{$model->whatever}}">
                </div>
            </div> 
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
        </div>
    </div>
</div>

控制器功能

fuction edit($id) {
return view('edit_modal')->with(['model' => Model::find($id)])->render();
}

在编辑按钮的点击功能中，将此视图加载到ajax上，填充模态的内容并显示它。

还有很多其他方法，取决于项目的大小以及您将实现的功能。

e.g。使用Libaray进行JS对象绑定（knockoutjs）

简单但资源丰富的方式： 为每个模型渲染一个单独的模态，并在单击时仅打开相应的模态。

@foreach($dataQrDetails as $dataQr)
<div class="modal fade" id="{{$dataQR->id}}">
    <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">Updating {{ $dataQr->winner_name }}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
                    {{ csrf_field() }}
                    <input type="hidden" name="chance_of_win" value="Shipped">
                    <div class="form-body">                  
                        <div class="form-group">
                            <label class="col-md-3 control-label">Text Input</label>
                            <div class="col-md-9">
                                <div class="input-icon">
                                    <i class="fa fa-archive" aria-hidden="true"></i>
                                    <input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
                                </div>
                        </div>                                            
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>          
        </div>
    </div>
</div>
@endforeach

<td> <button type="button" class="btn btn-info btn-xs" onclick:$('#'+{{$dataQR->id}}).modal('show')>Open Modal</button>