in my project i have table(images). there is checkboxes column, when the user check record and press delete button record will be deleted. thats work fine.
then there is visible column(boolean) which is by default(true). So when record is checked and click hide/show button it will update visible value(from 1 to 0 or from 0 to 1)
My problem is that, delete and show/hide buttons work individually. i want both work at the same time. I don't know how combine them in the same table.
this is my view(in which only show/hide work)
<button type="submit" class="btn btn-danger" id="deleteImg"><i class="fa fa-trash"></i> Delete</button>
<form action="{{url('admin/images/hideimg')}}" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('post')}}
<div class="pull-right form-group" style="padding: 12px">
<button class="btn btn-warning" id="hideImg">
Hide/Show</button>
</div>
#if($images)
<table class="table panel panel-default" id="table">
<thead class="panel-heading">
<tr>
<th><input type="checkbox" id="options"> </th>
<th>Visible?</th>
<th>photo</th>
<th></th>
</tr>
</thead>
<tbody id="tablecontents" class="panel-body">
#foreach($images as $image)
<tr class="row1" data-id="{{ $image->id }}">
<td><input class="checkboxes" type="checkbox" id="option" name="checkBoxArray[]" value="{{$image->id}}" data-imageid="{{$image->id}}"></td>
<td>{{$image->visible == 1?'yes':'no'}}</td>
<td ><img src="/uploads/{{$image->path}}" id="img" ></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#endif
</form>
form action="delete/images" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('delete')}}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style="text-align: center" id="modalLabel">Delete Confirmation</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="text-center">Are you sure you want to delete the following service?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close</button>
<button type="submit" class="btn btn-danger" name="delete_all" value="Delete">
<span id="" class='glyphicon glyphicon-trash'></span> Delete</button>
</div>
</div>
</div>
</div>
</form>
Related
I have a table like this:
<table id="criteria-table">
<thead>
<tr>
<th rowspan="2" class="text-center align-middle">#</th>
<th rowspan="2" class="text-center align-middle">Employee</th>
<th colspan="3" class="text-center">Order</th>
</tr>
<tr>
<th class="text-center">Priority</th>
<th class="text-center">Criteria</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
<tr class="tr_template">
<td class="text-center">1</td>
<td class="text-center">Employee A</td>
<td class="text-center">75%</td>
<td class="text-center">10</td>
<td class="text-center">order</td>
</tr>
</tbody>
</table>
And I have 2 button in the end of this table:
<a class="btn btn-add-criteria btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD CRITERIA
</a>
<a class="btn btn-add-employee btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD EMPLOYEE
</a>
When I click add criteria button, a popup will open to type criteria data and submit:
<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content clear-form">
<!-- Body modal -->
<div class="modal-body">
<!-- Form -->
<form id="frm-add-criteria">
<div class="row">
<div class="col-lg-12">
<div class="m-form__group">
<div class="criteria-content">
<!-- Criteria -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Criteria</label>
<div class="input-group">
<select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
<option value="1">Order</option>
<option value="2">Contract</option>
<option value="3">Revenue</option>
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Priority</label>
<div class="input-group">
<input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
</div>
</div>
</div>
<!-- Amount -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Amount</label>
<div class="input-group">
<input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer modal -->
<div class="modal-footer">
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
<div class="m-form__actions m--align-right">
<button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
<span class="ss--text-btn-mobi">
<i class="la la-arrow-left"></i>
<span>CANCEL</span>
</span>
</button>
<button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
<span class="ss--text-btn-mobi">
<i class="la la-check"></i>
<span>SAVE</span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
After I submit the form in modal, it will add one more column like this for all employee row in table:
Here is my old table:
After submit form modal:
Same like this, when I click add employee, it will show a modal for me to choose employee, then it will insert one more employee row to this table with all criteria I add before.
Here is my JSFiddle to show you what I did.
I really don't know how to do this so forgive me if you feel I just give you about code not solution.
Hope you can give me a good advise to handle this.
Thank you very much!
You can use JS / JQuery DOM manipulation.
here's an example using JQuery and Bootstrap:
Table
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>John</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Person
</button>
I put an id to the table body (tbody) element so I can access it directly from script side using JQuery.
Modal
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Insert Person</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-6">
<label>Gender</label>
<select id="gender" class="form-control">
<option>Choose Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addPerson()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I put id on every input for JQuery access. and since we are not to sending it to a database or another http request, there's no need for a form.
The JQuery Script:
<script>
function addPerson() {
var name = $('#name').val();
var gender = $('#gender').val();
var html = '';
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + gender + '</td>';
html += '</td>';
$('#tableBody').append(html);
$('#name').val('');
$('#gender').val('Choose Gender');
}
</script>
first I make 3 variables to contain empty string, the value of name, and the value of gender. then I make a table row mock up and fill it with the values from name and gender on that empty string variable, after that I add the new data to the table using the $('#tableBody').append(html); command. and then refresh the form using $('#name').val('');and $('#gender').val('Choose Gender');. hit me up if you need more elaboration.
I have created a dynamic table by fetching data from SQL using PHP. each row has an edit button that is linked to modal. I want to pass the value from table to modal so that I can edit it.
I have tried looping trough table row and able to get the values of different columns. However, every time I clicked any edit buttons, only the last of the row is being passed on to the input on modal.
here is my markup:
Modal
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($categories as $category){ ?>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
<?php echo $category['categoryID']; ?>
</td>
<td class="footable-visible" id="tdCategory">
<?php echo $cakeOrdering->escape($category['category']); ?>
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Script
<script type="text/javascript">
$(document).ready(function () {
var table = document.getElementById("main-table");
$('#main-table tr').each(function(i, row){
var $row = $(row);
var category = $row.find('td:nth-child(2)').text().trim();
console.log(category);
$('#category').val(category);
});
});
</script>
This is the output
Output
When I tried to print values into console.
Console.log
To achieve what you require you can hook to the show.bs.modal event. In the event handler you can get a reference to the button which was clicked. You can use that reference to traverse the DOM to find the related td which holds the name of the category. Finally you can set the value of the input in the modal with that category name.
As an aside I would strongly suggest you remove the id attributes from the HTML content you create in the PHP loop as id need to be unique within the DOM. Similarly, remove the inline style attributes as styling should be places within external stylesheets.
With all that said, try this:
$('#modalCategory').on('show.bs.modal', e => {
var $button = $(e.relatedTarget);
$('#category').val($button.closest('td').prev().text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_1
</td>
<td class="footable-visible">
Category 1
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_2
</td>
<td class="footable-visible">
Category 2
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
You are setting value of category in input box inside each loop that's the reason last value is set. Instead you can write click event on edit button so on click of this button get category name and put it inside modal input-box.
Demo code :
$(document).ready(function() {
//on click modal buton
$(".editCategory").on("click", function() {
var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name
$('#category').val(category); //set value
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1
</td>
<td class="footable-visible">
abc
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2
</td>
<td class="footable-visible">
abcd
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
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">×</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.
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">×</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.
To update or insert into your database you need to use POST method.
Your GET method need to replace with POST method.
You have so many options to make it working.
I'will show you one:
Make a seperate GET Route e.g /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">×</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.
e.g. 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">×</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>
So I checked a lot of topics about this title but couldn't find a good answer to it.
So basically I have this table:
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered tablesorter">
<thead>
<tr>
<th>Email <i class="fa fa-sort"></i></th>
<th>Akcje <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
$subs = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$subs->bindParam(":id",$ID);
$subs->execute();
?>
<form method="post">
<?php foreach($subs as $sub){ ?>
<tr>
<td>
<?php echo $sub['adminEmail']; ?>
</td>
<td>
<input type="hidden" name="id">
<button type="button" value="<?php echo $sub["adminEmail"]; ?>" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-id="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
<button type="button" class='btn btn-warning btn-xs' data-toggle="modal" data-target="#myModalE"><span class="fa fa-edit"></span></button>
</td>
</tr>
<?php } ?>
</form>
</tbody>
</table>
</div>
</div>
So this is basically the table with users that have sub-admins and there's 1 action "Delete".
When someone clicks button delete, this modal will show:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal_nameDELETE">Sure?</h4>
</div>
<div class="modal-body">
Are you sure you want to remove sub-admin <label><?php echo $sub['adminEmail'];?></label> ?
<br>
</div>
<form method="post">
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
The problem is when there's for example 3 people in the table and I click the delete button for user 3, the modal pops-up but the email is wrong.
I am new to both modal's and JQuery and I am having a rough time getting two input values.
Modal in View
<div class="col-lg-offset-10 col-lg-2">
<!-- Modal Button-->
<span class="item-create-button">
<button class="btn btn-success btn-block" data-toggle="modal" data-target="#createActor">
<span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Actor</span>
</button>
</span>
<!-- Modal -->
<div class="modal fade" id="createActor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Create</h4>
</div>
<div class="modal-body">
<table class="table" id="createTable">
<tr>
<th class="col-lg-4">
<h5 style="font-size:x-large"><span style="font-weight:bolder">Name</span></h5>
</th>
<th class="col-lg-7 col-lg-offset-1">
<input type="text" name="createName" style="text-align: center; height: 35px; font-size: 20px; width: 100%" placeholder="Name" />
</th>
</tr>
<tr>
<th class="col-lg-4">
<h5 style="font-size:x-large"><span style="font-weight:bolder">Birthday</span></h5>
</th>
<th class="col-lg-7 col-lg-offset-1">
<input type="text" name="createBirthday" style="text-align:center; height:35px; font-size:20px; width:100%" placeholder="Birth (mm/dd/yyyy)" />
</th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" onclick="createFunction(this)" class="btn btn-success">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
JQuery "attempts"
function createFunction(element) {
var name = $(element).prev("div").closest("table").find("#createName").attr('value');
var name1 = $(element).prev("div").closest("table").find("#createName").val();
var birth = $(element).prev("table").next("input.col-lg-7").find(":input:first").val();
var check = $(element).closest("table").attr("class");
alert(name, name1, birth, check);
}
I have tried finding more helpful examples, but I am just getting lost in regards to how all the search functions work for JQuery (pre, next, closest, find, ect...)
If someone could help me with this AND possibly point me to good article that helps clarify all these search functions I would be eternally grateful! :)
You can use parent() and sibling() relationships to get the model body then standard sizzle selection like
//.parent() is modal-footer
//.parent().prev() is modal-body
//.parent().prev().find("#createName") is the input element
var name = $(element).parent().prev().find("#createName");
I trust that you'll be able to find out the others from here.