Develop Reference

How to add rows to jquery datatable inside a form?

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!

jQuery click event works only once (Beginner)

I'm a beginner programmer in jQuery and I do not understand why this feature can not perform the second time. The first time the button content changes, after two seconds it returns to the previous state and the second time I can not do the same thing. Please help! Regards
$(document).ready(function() {
$('#registerButtonM').on('click', function() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
}, 2000);
}
});
});
EDIT:
html:
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Change your #footerButtonsM HTML to
<div class="modal-footer" id="footerButtonsM">
<i class="fa fa-spin fa-circle-o-notch" style='display:none'></i>
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
and your jquery code to:
$(document).ready(function() {
var btnWrapper = $('#footerButtonsM');
var loading = $('#footerButtonsM .fa-circle-o-notch');
$('#registerButtonM').on('click', function() {
var btn = $(this);
btn.hide();
loading.show();
if ($('#passRegisterM').val().length <= 8) {
setTimeout(function(){
loading.hide();
btn.show();
}, 2000)
}
});
});
The result will be the same, but the approach is better.

To setup late binding, change
$('#registerButtonM').on('click', function() {
To this:
$(document).on('click', '#registerButtonM', function() {

Since you have remove the html button from the DOM the onclick handler is autmotically garbaged (this makes sense since the element present does not exist).
An alternative is to declare and function named clicker.. When you remove and insert the html simply add the function clicker to the new button
See snippet below
function clicker() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
$("#registerButtonM").on('click', clicker)
}, 2000);
}
}
$(document).ready(function() {
$('#registerButtonM').on('click', clicker);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

The reason this doesn't work is that you're removing the button on click of the button. This causes it to not be bound any more.
When you do: $('#footerButtonsM').html(''); this removes the button from the dom object and you lose the early binding that you've setup.
Then you put another button back on the page when you do $('#footerButtonsM').html(btn);
Since this is a completely new button it is no longer bound by the click handler that you have setup.
You have a couple options to fix this issue. You can either rebind or a new click handler either early or late binding to the new button.
A quick fix is to change it to late bind by changing :
$('#registerButtonM').on('click', function() {
to be:
$(document).on('click', '#registerButtonM', function() {
Here is a fiddle of this working

Bootstrap modal not working in safari / windows

This Bootstrap modal is not working in Safari but there is no issues in Chrome and Firefox.
I also have a javascript select. When I remove the javascript select the popup works in Safari but otherwise its not working.
<div class="modal fade" role="dialog" id="fav-popup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-fav-header">
<h2 class="txt-pop-head">Add category</h2>
<button class="close" data-dismiss="modal"><span class="fa fa-close"></span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-control" placeholder="">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<div class="select-box select-gray">
<label>Category</label>
<select class="form-control input-control wide custom">
<option value="">Product Category</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="btn-group-custom">
<input type="button" class="btn btn-draft" value="Cancel">
<input type="button" class="btn btn-next" value="Create">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-8 col-md-9">
<h2 class="txt-profile-head">Add Category</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="row-adj">
<div class="products-block">
<div class="category" style="background:#fff;">
<a href="#fav-popup" data-toggle="modal" data-target="#fav-popup"><button type="button" class="btn">+</button>
<h3>Create a Category</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<script src="js/SelectBox.js"></script>
<script>
$(function() {
$("select.custom").each(function() {
var sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200,
});
});
});
</script>

How to display different Bootstrap Modal on toggling

I am working on Bootstrap Modal. I have two modals. The First Modal toggles/open the second modal dialog, when the user clicks on "Forgot Password" link. The second modal is the same as the first one except body.
What I want to do, on toggling from first modal to second one, the second modal will appear with different header and footer. Is it possible? How can I have this feature?
My code:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color: whitesmoke">
<button type="button" class="close" data-dismiss="modal">
<span title="close" class="glyphicon glyphicon-remove"></span>
</button>
<h2><span class="glyphicon glyphicon"></span> Login to our site</h2>
<p>Enter username and password to log on:</p>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>
<!--<div class="inner-addon right-addon">
</div>-->
<input type="password" class="form-control" id="password" placeholder="Enter password">
<i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Send us your email and we'll reset it for you!</p>
<input type="text" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
<!--End Body-->
<div class="modal-footer" style="background-color: whitesmoke">
<!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>-->
<p class="text-center">Not a member? Sign Up</p>
<p class="text-center">Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>

Here you go, I hope this code helps you:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
var showMessage = function (heading, message) {
$(".modal-body").empty();
$(".modal-title").empty();
$(".modal-title").html(heading);
$(".modal-body").html(message);
$('#messageBox').modal('show');
};
$("#popup1").click(function () {
showMessage("Heading 1", "Modal popup message 1");
});
$("#popup2").click(function () {
showMessage("Heading 2", "Modal popup message 2");
});
});
</script>
<input id="popup1" type="button" value="Show Popup" />
<input id="popup2" type="button" value="Show Another Popup" />
<div class="modal fade" id="messageBox" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Output Popup 1:
Output Popup 2:
Just use that as an example and make the necessary changes to your code to make it work

Modal in bootstrap JSF Java EE project

I want to show a bootstrap modal in my JSP login page when the password is wrong. Otherwise the user is redirected (through faces-config.xml) to another JSP page. The username and password are validated in a managedbean that calls a remote bean.
I tried this with JavaScript but cannot get the desired result. This is my JSP login:
<%-- BEGIN: Modal window --%>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<%-- END : Modal window --%>
<br>
<div class="container-fluid">
<div class="row">
<div class="panel-heading" align="center" style="opacity: 0.5;">
<h2><b><font color="white">RedCine<small><font color="white">Administrativo</font></small></font></b></h2>
</div>
</div>
<div class="row">
<div class="panel-body col-md-4 col-sm-6 col-xs-12 col-md-offset-4 col-sm-offset-3 " align="center">
<div class="container-fluid" style="margin-top: 1%; margin-bottom: 40%;">
<div class="panel panel-success" align="left">
<div class="panel-heading form-group">
<b><font color="white">
Ingrese usuario y contraseña</font> </b>
</div>
<div class="panel-body" >
<h:form id="PersonaBean">
<div class="form-group">
<label for="username">Usuario</label>
<h:inputText value="#{persona.userName}" required="required" styleClass="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<h:inputSecret value="#{persona.password}" required="required" styleClass="form-control" />
</div>
<h:commandButton id="btn_entrar" value="Entrar" action="#{persona.login()}" styleClass="btn btn-large btn btn-success btn-lg btn-block" style="width: 100%; font-size:1.1em;"/>
</h:form>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer" align="center"><font style="color: #111">Copyright #2014 example.com, All Rights Reserved. </font></div>
</div>
</body>
<script>
$(document).ready(function(){
$('#btn_entrar').click(function(){
var resultado;
if(resultado = 0)
{
$("#myModal").modal("show");
}
});
});
</script>
</html>
How can I do that?

your variable "resultado" is not getting set to any value, set the "debugger" keyword above "if(resultado = 0)" and check for that value.