Update database value with Bootstrap Modal and Laravel 5.2 - javascript

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>

Related

I want to show Modal popup and pass data to modal according to user-id in Laravel Blade

I want to show a popup modal with information for an individual user when someone clicks on view Details Button.
I want to pass the user data according to the user-id and show this in the modal popup. My data are in $user.
I want to do exactly done in the link below website http://ssipgujarat.in/sgh201920/problem_statement.php as you click on view details, it shows the modal for that particular problem statement. I hope that it make sense to you.
#extends('layouts.app')
#section('content')
<div class="container" id="blur-wrapper">
<div class="row">
#foreach($data as $user)
#if($user->user_type == 'user')
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
<h6>{{ $user->email }}</h6>
<hr/>
<h6>Department: {{$user->StudentProfile->department}}</h6>
<h6>Sem: {{ $user->StudentProfile->sem }}</h6>
</div>
<div class="button-wrapper">
<form action="{{ $user->id }}">
{{-- <button class="btn btn-primary" id="view-detail">View Details</button>--}}
<a class="btn btn-info" id="view-detail" href="{{ $user->id }}">View Details</a>
</form>
<form method="POST" action="/admin/reject/{{ $user->id }}">
#csrf
<button class="btn btn-danger" type="submit">Delete Account</button>
</form>
</div>
</div>
<div class="popup">
<h2>{{ }}</h2>
</div>
</div>
#endif
#endforeach
</div>
</div>
#endsection
On your view details button assuming you are using bootstrap,your code should
<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>
on your routes
on your modal's code
#foreach($users as $user)
<div class="modal fade" id="exampleModal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Edit Brand
</h5>`enter code here`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-offset-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" value="{{$user->first_name}}">
</div>
<input type="submit" value="Edit" class="btn btn-success">
</div>
</div>
</div>
</div>
</div>
#endforeach
Did this with jQuery and Ajax and a data-entry attribute:
blade (CSS: bulma)
<!-- list of elements -->
<li class="dashboard">
<p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>
<!-- MODAL -->
<div class="modal" id="QuickInfo">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Quick-Info</p>
<button class="delete closeQuickInfo" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- PUT INFORMATION HERE, for example: -->
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rubrik</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" id="category" type="text" value="" readonly>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Kunde</label>
</div>
<div class="field-body">
<div class="field">
<input class="input" id="customer" type="text" value="" readonly>
</div>
</div>
</div>
<!-- END PUT INFORMATION HERE -->
</section>
<footer class="modal-card-foot">
<button class="button is-link closeQuickInfo">Schließen</button>
</footer>
</div>
</div>
jQuery
$(document).ready(function () {
$('.showQuickInfo').click(function () {
$('#QuickInfo').toggleClass('is-active'); // MODAL
var $entry = this.getAttribute('data-entry');
getEntryData($entry);
});
}
function getEntryData(entryId) {
$.ajax({
url: '/entries/getEntryDataForAjax/' + entryId,
type: 'get',
dataType: 'json',
success: function (response) {
if (response.length == 0) {
console.log( "Datensatz-ID nicht gefunden.");
} else {
// set values
$('#category').val( response[0].category );
$('#customer').val( response[0].customer );
// and so on
}
}
});
}
Controller
public function getEntryDataForAjax(int $id)
{
$entries = new Entry();
$entry = $entries->where('id', $id)->get();
echo json_encode($entry);
}

update and delete in the same table

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>

How to add fields in bootstrap model dynamically in angular

I am new to webDevelopment. Now, Here I have a list of buttons , but the data-target is a same model for every button click. So, My model is like -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
In this buttons are like -
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. E.g. If the button is like FullName , I should be able to add the two Input box fistName and lastName . Its like on click of the Button, How can I add the fields respective of that button.? Can any one help me with this ?
I think you can use ng-if
Just create all fields in modal
Like
firstname
lastname
email
password
remember me
When you click on btn , set a variable like showFields
Eg:
showFields== "login" or ""
showFields== "register"
use ng-if ='showFields== "register"' for fields that need to show only on register page
Hope it will help

e.preventDefault jquery not working with multiple forms and buttons

I have a problem with a JS script I'm working with :
I have a page that handles various operations using AJAX, multiple forms with different IDs are inside the page and in my script I use e.preventDefault at the beginning of ever button's on submit event, so that it doesn't redirect to form's action attribute but instead let me use AJAX and retrieve informations in the console, the problem is that not all the preventDefault work in the file, here it is :
// Various buttons to show/hide things, here e.PreventDefault works
$('#AddCategoryLinkToggle').on('click', function(e) {
e.preventDefault();
$('#addACategoryBlock').fadeIn();
});
$('#AddBrandLinkToggle').on('click', function(e) {
e.preventDefault();
$('#addABrandBlock').fadeIn();
});
$('#CloseAddCategory').on('click', function(e) {
e.preventDefault();
$('#addACategoryBlock').fadeOut();
});
$('#CloseAddBrand').on('click', function(e) {
e.preventDefault();
$('#addABrandBlock').fadeOut();
});
// end various buttons section
// FIRST AJAX SCRIPT, this e.PreventDefault works
$('#AddCategoryForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
$.post(Actionurl, postData)
.fail(function(data) {
$('#AddCategoryError').fadeIn();
$('#AddCategoryForm').fadeOut();
})
.done(function(data) {
//console.log(data);
$('#AddCategoryForm').fadeOut();
$('#AddCategorySuccess').fadeIn();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
// 2nd AJAX script, it works since it's the same as the first one
$('#AddBrandForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
$.post(Actionurl, postData)
.fail(function(data) {
$('#AddBrandError').fadeIn();
$('#AddBrandForm').fadeOut();
})
.done(function(data) {
//console.log(data);
$('#AddBrandForm').fadeOut();
$('#AddBrandSuccess').fadeIn();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
// 3rd AJAX script , DOESN'T WORK
$('#DeleteModal').on('submit', function(e) {
// Stop the browser from submitting the form.
var target = $(this);
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
var category_name = postData[1]['value'];
e.preventDefault();
$.post(Actionurl, postData)
.fail(function(data) {
//$('#'+ category_name +'ConfirmDelete').removeClass("disabled");
//$('#'+ category_name +'PostAlertError').fadeIn('fast');
})
.done(function(data) {
//$('#'+ category_name +'ConfirmDelete').addClass("disabled");
//$('#'+ category_name +'PostAlertSuccess').fadeIn('fast');
alert("Fatto!");
});
$('.closeModal').click(function(e) {
$('#'+ category_name +'ConfirmDelete').removeClass("disabled");
$('.postAlert').hide();
location.reload();
});
// TODO
});
// 4th AJAX script, DOESN'T WORK - same as previous
$('#EditCategoryForm').on('submit', function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
var postData = $(this).serializeArray();
var Actionurl = $(this).attr('action');
var category_name = postData[1]['value'];
$.post(Actionurl, postData)
.fail(function(data) {
$('#'+ category_name +'EditCategoryError').fadeIn();
$('#EditCategoryForm').fadeOut();
$('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");
})
.done(function(data) {
console.log(data);
$('#EditCategoryForm').fadeOut();
$('#'+ category_name +'EditCategorySuccess').fadeIn();
$('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");
});
// Reset Modals and Cards
$('#'+ category_name +'CloseEditCategoryModal').click(function(e) {
$('#'+ category_name +'ConfirmCategoryEdit').removeClass("disabled");
$('.postAlert').hide();
setTimeout(function(){ location.reload(); }, 2000);
});
// TODO
});
Comments in it says it all, I don't know what I've done wrong and I've spent quite a while trying to figure it out, I hope you can help me.
EDIT : The HTML as requested, a bit long :
<div class="container">
<div id="addACategoryBlock">
<div class="row">
<div class="col-lg-12"><h4>Add a new category to the site</h4></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div id="AddCategorySuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Category Added successfully!</h4>
</div>
<div id="AddCategoryError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> There's been an error</h4>
</div>
</div>
</div>
<form id="AddCategoryForm" method="POST" action="{{ path_for('auth.categories.add') }}">
<div class="form-group">
<div class="col-lg-6">
<input name ="category_name" class="form-control" id="category_name" placeholder="Name" type="text" required>
<input name="slug" class="form-control" id="slug" placeholder="Slug" type="text" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Select a brand to connect it with this new category</label>
<select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
{% for brand in brands %}
<option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-6 text-center">
<button type="submit" class="btn btn-primary">Add category</button>
</div>
<div class="col-lg-6 text-center">
<button id="CloseAddCategory" type="button" class="btn btn-primary">Close</button>
{{ csrf.field | raw }}
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h1>Categories</h1>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Categories in the site</h3>
<small class="pull-right">or <a id="AddCategoryLinkToggle" href="#">add a new category</a></small>
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-bordered table-striped text-center">
<tbody><tr>
<th>#</th>
<th>Name</th>
<th>Slug</th>
<th>Brands inside this category</th>
<th>Action</th>
</tr>
{% for category in categories %}
<!-- Modal -->
<div class="modal fade" id="{{ category.slug }}Delete" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}DeleteLabel">
<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="{{ category.slug }}DeleteLabel">Delete {{ category.category_name|capitalize }}</h4>
</div>
<div class="modal-body">
<h2>Are you sure you want to delete {{ category.category_name|capitalize }} ?</h2>
<h4>This action is permanent.</h4>
<div id="{{ category.category_name|lower }}PostAlertSuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Record deleted successfully!</h4>
</div>
<div id="{{ category.category_name|lower }}PostAlertError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> Alert!</h4>
Warning alert preview. This alert is dismissable.
</div>
</div>
<div class="modal-footer">
<form id="DeleteModal" class="DeleteModal" method="POST" action="{{ path_for('auth.categories.delete') }}">
<input name="category_id" type="hidden" value="{{ category.category_id }}">
<input class="category_name" name="category_name" type="hidden" value="{{ category.category_name|lower }}">
<button type="button" class="btn btn-default closeModal" data-dismiss="modal">Close</button>
<button id="{{ category.category_name|lower }}ConfirmDelete" name="confirmDelete" type="submit" class="btn btn-primary confirmDelete">Confirm</button>
{{ csrf.field | raw }}
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="{{ category.slug }}Edit" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}EditLabel">
<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="{{ category.slug }}EditLabel">Edit {{ category.category_name|capitalize }}</h4>
</div>
<form id="EditCategoryForm" method="POST" action="{{ path_for('auth.categories.edit') }}">
<div class="modal-body">
<div id="{{ category.category_name|lower }}EditCategorySuccess" class="alert alert-success alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Record updated successfully!</h4>
</div>
<div id="{{ category.category_name|lower }}EditCategoryError" class="alert alert-warning alert-dismissible postAlert">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-warning"></i> Alert!</h4>
There's been an error!
</div>
<div class="form-group">
<label for="EditName">Name</label>
<input type="text" class="form-control" name="EditName" id="EditName" placeholder="Name" value="{{ category.category_name|capitalize }}">
<label for="EditSlug">Slug</label>
<input type="text" class="form-control" name="EditSlug" id="EditSLug" placeholder="Slug" value="{{ category.slug }}">
</div>
<div class="form-group">
<label>Edits brands connected with this category</label>
<select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
{% for brand in brands %}
{% if brand.brand_id in correlated %}
<option selected="selected" value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% else %}
<option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
{% endif %}
{% endfor %}
</select>
<input type="hidden" class="form-control" name="category_id" id="category_id" value="{{ category.category_id }}">
</div>
</div>
<div class="modal-footer">
<button id="{{ category.category_name }}CloseEditCategoryModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="{{ category.category_name }}ConfirmEditModal" type="submit" class="btn btn-primary">Save changes</button>
</div>
{{ csrf.field | raw }}
</form>
</div>
</div>
</div>
<!-- end modal -->
<tr>
<td>{{ category.category_id }}</td>
<td>{{ category.category_name|capitalize }}</td>
<td>{{ category.slug }}</td>
<td>
<ul>
{% for brand in category.brands %}
<li>{{ brand.brand_name }}</li>
{% endfor %}
</ul>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Delete">Delete</button>
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Edit">Edit</button>
<!--Prova edit-->
</div>
</td>
</tr>
{% endfor %}
</tbody></table>
</div>
<!-- /.box-body -->
<div class="box-footer clearfix">
<!--<ul class="pagination pagination-sm no-margin pull-right">
<li>«</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>»</li>
</ul>-->
</div>
</div>
</div>
</div>
</div>
Try return false:
$('#DeleteModal').on('submit', function (e) {
// ...
return false;
});
$('#EditCategoryForm').on('submit', function (e) {
// ...
return false;
});

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<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">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories