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

Question

I can normally insert, update and delete data from database with Laravel 5.2. Now i want to update table data with Bootstrap Modal . My modal and Table view in same blade.

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>

Controller:

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');
    }

}

Routes:

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

Now if i click on edit button of one row then its open Bootstrap modal with all value. But it should be the clicked value. Again if i fill up modal and click on submit button then its not updating into database. Its just redirect ../public/admin/winner/status/18 url with MethodNotAllowedHttpException error. How can i do that? Thanks in advance.

Answer 1

I make this work by using little bit JavaScript. Hope it will help who want to update data with Bootstrap Modal and Laravel Framework. Retrieve data from database with js and show it in modal with id.

Modal Looks Like:

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

Passing id when i click on button with data-id="{{ $dataQr->id }}" again if you need to pass another value then you can pass like this way.

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);
    });
  })

Routes:

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

Controller:

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');
    }

}

Hope it will help some who wants to insert/update database value with Bootstrap Modal and Laravel Framework.