I am using Vue.js to generate a list of items in a table. Everything is working fine. Now on the end of every row I have got a button. When clicking the button a modal opens. I would like to put information from the row on which the button is clicked, in the modal.
So, table row looks like this:
Title, price, button
When clicking the button from this specific row, I would like to send the title in that row as an input value in the modal.
Piece of my code:
<table>
<div>
<tbody>
<tr v-for="samsung in samsungFilteredList">
<td class="text-left">{{ samsung.title }}</td>
<td class="text-right">{{ samsung.scherm }}</td>
<td class="text-right">{{ samsung.batterij }}</td>
<td class="text-right">{{ samsung.camera }}</td>
<td class="text-right">{{ samsung.behuizing }}</td>
<td class="text-right">{{ samsung.microfoon }}</td>
<td class="text-right"><i class="fa fa-file icon-primary"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-header bg-white">
<div class="text-muted text-center">
<small>Stuur ons een bericht</small>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<form role="form">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" value="Samsung Galaxy S9" readonly>
</div>
</div>
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative">
<input class="form-control" id="email" name="email" placeholder="Email" type="email">
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4">Verzenden</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
So I would like to send {{samsung.title}} as the value of the input with the id and name of 'telefoon'.
How can I do this?
Thanks in advance,
Mike
UPDATE (Found the solution by trial and error)
<tr v-for="samsung in samsungFilteredList">
<td class="text-left">{{ samsung.title }}</td>
... etc
<td class="text-right">
<i class="fa fa-file icon-primary"></i>
<div class="modal fade" :id="samsung.title" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-header bg-white">
<div class="text-muted text-center">
<small>Stuur ons een bericht <span class="d-none">{{ samsung.title }}</span></small>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<form role="form">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" :value="samsung.title" readonly>
</div>
</div>
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative">
<input class="form-control" id="email" name="email" placeholder="Email" type="email">
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4">Verzenden</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Related
I hope everyone had good holidays.
I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.
My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty.
The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.
Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic.
Here is the code:
(js)
$(document).ready(function () {
$('#AddProdBtn').click(function () {
$('#returnLinesGrid').dataTable().fnAddData( [
$('#prodId').val(), $('#prodQty').val()] );
});
});
(cshtml)
<div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content white-box white-box--lblreset">
<div class="modal-header">
<h5 class="modal-title create" style="display:none;">#TitleResource.ReturnCreate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
<input type="hidden" value="#Guid.NewGuid()" asp-for="Id" />
<div class="modal-body row">
<div class="md-form col-6 create-only row">
<select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnType</option>
</select>
<span asp-validation-for="ReturnType"></span>
</div>
<div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
<select disabled selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
<select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotive"></span>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
<select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotiveAux"></span>
</div>
</div>
<div class="modal-body row">
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)">
<input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="#LabelResource.SelectReturnInvoiceNumber" />
</div>
<div class="md-form col-6 create-only">
<input type="text" value="" asp-for="ClientReturnNumber" placeholder="#LabelResource.SelectClientReturnNumber" class="form-control" />
</div>
</div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="#LabelResource.SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="#LabelResource.SelectProdQuantity" />
</div>
<div class="col-6>
<button type="button" id="AddProdBtn">#ButtonResource.AddProduct</button>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
<thead>
<tr>
<th>#Html.Raw(LabelResource.ProductId)</th>
<th>#Html.Raw(LabelResource.Quantity)</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row modal-footer message-footer pr-5">
<div class=" mr-md-0">
<a data-dismiss="modal" class="btn btn-danger w-100">#ButtonResource.Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary w-100">#ButtonResource.Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do..
Thank you for any and all help.
Pictures
Modal window
Main window, modal is called by pressing "Nova devolução" button
You should add the js to the main view. Below is a working demo:
Main View:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
Create
</button>
#await Html.PartialAsync("_ProductPartial")
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var datatable = $('#returnLinesGrid').dataTable();
$('#AddProdBtn').click(function () {
datatable.fnAddData([
$('#prodId').val(), $('#prodQty').val()]);
});
});
</script>
}
Partial View:
<div id="return-edition-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
</div>
<div class="col-6">
<button type="button" id="AddProdBtn">AddProduct</button>
</div>
<table id="returnLinesGrid">
<thead>
<tr>
<th>#Html.Raw("ProductId")</th>
<th>#Html.Raw("Quantity")</th>
</tr>
</thead>
</table>
<div class="modal-footer">
<div class="mr-md-0">
<a data-dismiss="modal" class="btn btn-danger">Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Result:
I finally got it! There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window, for some reason. I basically just had to put my jquery code in the .ts file associated(in this case Return.Index.ts) and then it finally recognized the values in my inputs!
Thank you so much, everyone, and early happy new year!
I want to create a sign in - signup form, using html <form> and bootstrap4 modal. Every thing is okay but when I click the submit button, the modal is dismissed, so the error of data validate format can not be show for clients. Now how can I keep the modal displayed when I click submit button?
<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>
<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs w-100" role="tablist">
<li class="nav-item w-50">
LOGIN
</li>
<li class="nav-item w-50">
SIGN UP
</li>
</ul>
</div>
<div class="tab-content" style="font-size: 14px;">
<div id="login" class="tab-pane active" style='height: 550px'>
<form method='post' action=''>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
<h6 class="text-center text-muted">Login to your account</h6>
<div class="error" id='signin_err'>{signin_err}</div>
<div class='section-input'>
<div class="mt-2">Email</div>
<input type="text" class="form-control w-100 my-2" name="" autofocus>
</div>
<div class='section-input'>
<div class="mt-2">Password</div>
<input type="text" class="form-control w-100 my-2" name="">
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
</div>
</form>
<div class="forgot text-center mb-3">forgot your password?</div>
</div>
<div id="register" class="tab-pane" style='height: auto'>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
<h6 class="text-center text-muted">Sign up now</h6>
<div class='error' id='signup_err'>{signup_err}</div>
<div class='section-input' style="margin-top: 70px">
<div class="mt-2" id='signUp_name'>Name</div>
<input type="text" class="form-control w-100 my-2" name="name" autofocus >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_mail'>Email</div>
<input type="text" class="form-control w-100 my-2" name="mail" id='mail' >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_psd'>Password</div>
<input type="text" class="form-control w-100 my-2" name="psd" >
</div>
<div class='section-input'>
<div class="mt-2" id='confirm_psd'>Confirm password</div>
<input type="text" class="form-control w-100 my-2" name="psd_cf" >
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
</div>
<div style='height:70px'></div>
</div>
</div>
</div>
</div>
</div>
I have no idea how your backend is being implemented, but based on your code, my guess is that your page is being refreshed every time you click submit because of the empty action. I see no other way that the modal will close.
You'll need to submit via AJAX if you want to display any validation without refreshing.
Using bootstrap and jquery, I have created the table linked with the modal popup window. In the table I have two action icons
Activate
De-Activate
Currently, on click to the Activate icon in the table the popup window is appearing with the value of current row along with the Activate button, my need is OnClick to this Activate button in the popup window the activate icon in the current td need to be changed as de-activate icon. Like the same need to do for De-activate icon. please help me to find out this.
below is the code.
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="lsusrfname">Jayashree</span></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<span class="usrin glyphicon glyphicon-ok" title="Activate"> </span>
</td>
</tr>
<tr>
<td><span class="lsusrfname">Siva</span></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span>
</td>
</tr>
</tbody>
</table>
</div>
Model window:
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery :
$(".usrrm, .usrin").click(function(){
var tdusrname=$(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
$("#actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-ok');
$('tr td span').addClass('usrin glyphicon glyphicon-remove');
});
$("#de_actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-remove');
$('tr td span').addClass('usrin glyphicon glyphicon-ok');
});
please help me to find out this
If it's just front end stuff that you need to change and you're not too concerned about the back end then you could add and remove classes as required using jQuery.
Using your fiddle:
/* Click the tick button and add a class of current */
$('.usrin').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the x button and add a class of current */
$('.usrrm').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the activate button and change the classes of the tick or x */
$('#actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
});
/* Click the de-activate button and change the classes of the tick or x */
$('#de_actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
})
/* Click the window close button and remove the current class */
$('.close').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.removeClass('current');
});
I've commented it pretty extensively, but it seems to do what you want. First, when the glyph is clicked, we need to 'bookmark' the element that triggered the modal, whether activating or deactivating. Then, if the modal is dismissed, we need to remove that bookmark. If the user has clicked the activate/deactivate buttons, we need to do a number of things (including, probably, your back-end processing): we need to remove that bookmark, update the glyph classes, redirect the target modal, and change the tooltip text. See it working below, or as a fiddle.
Again, my code should be pretty clearly documented. Best of luck!
$(".usrrm, .usrin").click(function() {
// Mark the element that triggered the modals. we'll need this later.
$(this).parent().addClass("currently-active-el");
// Populate the modal fields.
var tdusrname = $(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname = $(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
/*****
* #actusr.click() - we are activating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the deactive modal, and change the icons for the span.
*
*****/
$("#actusr").click(function() {
$(".currently-active-el")
.attr("data-target", "#usrdeact") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrin glyphicon-ok') // toggle the glyph class
.addClass('usrrm glyphicon-remove')
.prop("title", "Deactivate") // change the tooltip text
});
/*****
* #de_actusr.click() - we are deactivating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the active modal, and change the icons for the span.
*
*****/
$("#de_actusr").click(function(evt) {
$(".currently-active-el")
.attr("data-target", "#usract") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrrm glyphicon-remove')
.addClass('usrin glyphicon-ok') // toggle the glyph class
.prop("title", "Activate") // change the tooltip text
});
/*****
* Any modal button that dismisses the modal also needs to remove
* the placeholder class. Otherwise, things will get messy fast.
*****/
$("[data-dismiss='modal']").on("click", function(){
$(".currently-active-el")
.removeClass("currently-active-el");
})
.usrin{color: #ccc;}
.usrrm{color: #d9534f;}
.usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;}
.usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;}
.table > thead{
background-color:#337ab7;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="lsusrfname">Jayashree</span></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<span class="usrin glyphicon glyphicon-ok" title="Activate"> </span>
</td>
</tr>
<tr>
<td><span class="lsusrfname">Siva</span></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr" data-dismiss="modal">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
You need to concentrate on the event when modal is opened. See here
$('#myModal').on('shown.bs.modal', function () {
//do the necessary things
})
I have tried few things but didn't work, i need to open a modal popup on a modal popup either by hiding back modal popup or any other way.
I cannot inject controller instance too according to my application structure. Any help could be greatly appreciated.
As below, when i click on add stoppage button, a new modal opens, and this popup modal should hide or close & open again.
<div class="modal fade" id="editModal" role="dialog">
<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">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
AddStoppage Popup code:
<div class="modal fade" id="addModal" role="dialog">
<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" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Ideally multilevel modals are not supported by bootstrap. you would have to do it manually/programmatically by JavaScript; in your controller for your case.
You can make a flag variable to add some more css to the modal body. That flag can be active when there are more than one flags.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
<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">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addModal" role="dialog">
<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" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
</div>
</div>
</div>
</div>
I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<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="<?=$prodName ?>">
</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" value="<?=$prodPrice?>">
</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 class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</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>