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!

Toggle div programmatically using JQuery

I have a button that when its clicked it shows a window with some information, as follows
$(function() {
$("#basicModal").collapse('toggle');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Click to open Modal
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-body">
<div class="row">
<img src="css/cabin.jpg" class="img-responsive col-md-6" alt="conductor">
<div class="row">
<label>Name: </label>
<label id="basicModal-placeName">placeName</label>
<br>
<label>Address: </label>
<label id="basicModal-placeAddress">#asf-2431</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Now I want to do the same thing the first "a" tag does but programmatically and erase the that container, leaving just the code starting at the div with class modal. I have tried the following:
$("#basicModal").collapse('toggle');
But this just shows the windows and blocks the content that is inside it that is supposed to be interactive to the user. How can I achieve this?

I solve this by using $('#basicModal').modal('show');

Clear file contents after uploading a file in modal popup

I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.

Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/

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.

Getting jquery.js Error: No such template '_resetPasswordDialog' error when I try to use bootstrap modal in my meteor app

I'm trying to load the content of internal url into the bootstrap modal when the user clicks the button. However, when I click the button I get the error mentioned on the title of question.
Here is my code :
<template name="flowchart">
<div class='container-fluid'>
{{#if currentUser}}
<div class="row-fluid">
<div class="span8">
<h3>Flowchart Editor</h3>
<div id="flowchart">
Launch demo modal
<!-- <button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://localhost:3000/">Launch modal</button> -->
</div>
</div>
<div class="span4">
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button>
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<!-- remote content will be inserted here via jQuery load() -->
</div>
<div class="modal-footer">
</div>
</div>
</div>
{{else}}
<div class="row-fluid" style="text-align:center;margin-top: 80px;">
<h3>The flowchart is only available to logged in users.</h3>
<p class="lead">If you just want to try out the flowchart, you can use the Demo Account:</p>
<p class="lead">User: demo, Password: demo</p>
</div>
{{/if}}
</div>
</template>
As a result, I'm unable to show the content of internal url, what should I do in order to fix this problem?
Edit
When I remove the data-remote attribute from the button, everything works fine but that is not what I want to do it. By the way, I'm using bootstrap 2.3.2 and jquery 1.8.2