Update database value with Bootstrap Modal and 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.

Answer 2

To update or insert into your database you need to use POST method.

Your GET method need to replace with POST method.

Answer 3

You have so many options to make it working. I'will show you one:

Make a seperate GET Route eg /winner/edit/{id}

then in your Controller function render a view which contains the modal content:

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

Controller function

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

In the click function of your edit button load this view over ajax, fill the content of your modal, and show it.

There are many other way, depends on the size of your project and what functions you will also achieve.

eg Use a Libaray for JS Object binding (knockoutjs)

Total simple but resource eating way: Render a seperate modal for each Model and open only the corresponding one on click.

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