【问题标题】:Update database value with Bootstrap Modal and Laravel 5.2使用 Bootstrap Modal 和 Laravel 5.2 更新数据库值
【发布时间】:2018-04-19 10:41:43
【问题描述】:

我通常可以使用 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>
    @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 按钮,则它不会更新到数据库中。它只是用MethodNotAllowedHttpException 错误重定向../public/admin/winner/status/18 url。我怎样才能做到这一点?提前致谢。

【问题讨论】:

  • 您是否在您的网络路由文件中设置了发布路由?您也不能只从模态框发布数据,您需要在 Ajax 中发送发布请求,当您收到来自服务器的响应时,您需要关闭模态框。
  • @ankitpatel 我没有发布路由。没有 AJAX 调用可以吗?
  • 您必须在您的网络路由文件中设置发布路由以进行发布操作,而且当您在服务器上验证数据并收到错误消息时,我想不出任何其他方式?你会如何显示这些?
  • 我添加了发布路线现在错误是creating default object from empty value laravel。我将显示在同一页面中。并想单独编辑一行。
  • 现在我可以更新,但是当我单击一个编辑按钮时,所有行值都会显示在引导模式中。我只想要点击的价值。使用 foreach 循环正在发生这种情况。

标签: javascript php twitter-bootstrap laravel laravel-5.2


【解决方案1】:

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

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

【讨论】:

  • 它不仅会导致 get/post。现在我可以更新,但是当我单击一个编辑按钮时,所有行值都会显示在引导模式中。我只想要点击的价值。使用 foreach 循环正在发生这种情况。
【解决方案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> 

【讨论】:

    【解决方案3】:

    我通过使用一点点 JavaScript 来完成这项工作。希望它能帮助想要使用 Bootstrap Modal 和 Laravel 框架更新数据的人。使用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-&gt;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 Modal 和 Laravel 框架 insert/update 数据库价值的人。

    【讨论】:

      猜你喜欢
      • 2018-04-11
      • 1970-01-01
      • 2021-02-01
      • 2016-09-25
      • 1970-01-01
      • 2019-03-24
      • 1970-01-01
      • 1970-01-01
      • 2016-11-18
      相关资源
      最近更新 更多