[英]Update database value with Bootstrap Modal and Laravel 5.2
我通常可以使用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">×</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。 我怎樣才能做到這一點? 提前致謝。
我通過使用少量JavaScript來完成這項工作。 希望對使用Bootstrap Modal和Laravel Framework更新數據的人有所幫助。 使用js
從數據庫中檢索數據,並以id
為模式顯示數據。
模態看起來像:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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 Modal和Laravel Framework insert/update
數據庫值的人有所幫助。
要更新或插入數據庫,您需要使用POST方法。
您的GET方法需要替換為POST方法。
您有很多選擇可以使其正常運行。 我給你看一個:
進行單獨的GET路線,例如/ winner / edit / {id}
然后在Controller函數中呈現一個包含模態內容的視圖:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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">×</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.