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!

{% csrf_token %} printing as text from js file django

{% csrf_token %} printing as text from js file in Django the code is working if use it in script tag but when I try to use from an external js file it doesn't work
HTML
<div class="build">BUILD YOUR RESUME</div>
<div class="box container" id="box2">
<div class="skillbox">
<div class="workquestion">
How Many work Exprience you wanted <br> to add in your resume ?
</div>
<div class="row" id="butt">
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(1)" id="butt1">1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(2)" id="butt2">2</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(3)" id="butt3">3</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(4)" id="butt4">4</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(5)" id="butt5">5</button>
</div>
<div class="workquestion" style="color: red;">
Maximum
</div>
</div>
<div class="row" >
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(6)" id="butt6">6</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(7)" id="butt7">7</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(8)" id="butt8">8</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(9)" id="butt9">9</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" onclick="updateform(10)" id="butt10">10</button>
</div>
<div class="workquestion" style="color: red;">
10 Skills
</div>
</div>
</div>
Script
<script src='{% static "js/skill.js" %}'>
</script>
skill.js
function updateform(n){
var temp=`<div class="heading">
<h2 class="head">Tell us about your Skills</h2>
<form method="POST" action="/skill">{% csrf_token %}`
for(var i=1;i<=n;i++){
temp=temp+`<div class="form-row">
<div class="form-group col-md-3">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Skill ${i}</label>
<input type="text" class="form-control" id="skill${i}" name="skill${i}" placeholder="Skill" required>
</div>
</div>`
}
temp=temp+`<button id='b1' type="submit" class="btn btn-primary nextbtn">Next</button>
</form>
</div>`
document.getElementById('box2').innerHTML=temp
}

Are you processing the JS file in Django, as a template?
Instead of referencing the resource directly in your script at its specified location, you will need to instead reference a Django URL that processes the file as a template and then returns the processed content (source text ...) to you.

Reset button label when the dialog is closed

I'm using this code to implement copy into clipboard functionality:
function copyToClipboard(e, btn) {
e.preventDefault(); // prevent submit
var str = document.getElementById("forms-subscribe-email");
str.select();
document.execCommand('copy');
btn.innerHTML = "Copied!";
return false; // prevent submit
}
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
This code works fine but when I open the dialog second time I see the text button Copied. How I can reset the label of the button each time when I open the dialog?

Add this Code On model Show, Need to Reset Text to Orignal
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button id="copyBtn" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Reset Before Open
document.getElementById("copyBtn").innerHTML = "Copy!";
Reset Before Hiding
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
document.getElementById("copyBtn").innerHTML = "Copy!";
})
Hope it Helps for Your need.

You could attach the "reseting" of the text to the closing or hidding event on the modal.
First, modify your button with an id:
<button id="btnCopyToClip" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
Then, in your JS, add the event listener for hidden.bs.modal on the modal:
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
let btnCopyToClip = document.getElementById("btnCopyToClip");
btnCopyToClip.innerText = "Copy";
});

Here is code :
https://jsfiddle.net/aviboy2006/3k7z2c64/1/
Add code in js :
function openModal(){
$("#bitcoinModal").modal();
$('.btn-width-165').html("Copy");
}
Add your open modal code :
<button type="button" class="btn btn-info btn-lg" onClick="openModal()">Open Modal</button>

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

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