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

Question

我通常可以使用 Laravel 5.2. Now i want to update table data with Bootstrap Modal 从数据库中插入、更新和删除数据。我的模式和 Table 视图相同 blade.

模态：

  <!-- 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>
    @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 url 并出现 MethodNotAllowedHttpException 错误。我怎样才能做到这一点？提前致谢。

Answer 1

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

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

Answer 2

你有很多选择来让它工作。我会给你看一个：

创建一个单独的 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 上加载此视图，填写您的模式的内容，然后显示它。

还有很多其他方式，取决于你项目的大小和你要实现的功能。

例如使用 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>

Answer 3

我使用一点点 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>
    @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 模式和 Laravel 框架 insert/update 数据库值的人。

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

Update database value with Bootstrap Modal and Laravel 5.2

javascript

php

twitter-bootstrap

laravel

laravel-5.2