This question already has answers here:
JQuery parameter serialization without the bracket mess
(2 answers)
Closed 5 years ago.
I have an array of id's in JS, like so
var ids = [123,456,789]
I am trying to pass them as part of a querystring in a GET request to a .NET API application. From what I understand .NET needs the querystring to resemble endpoint/ids=123&ids=345&ids=789 or similar.
I've tried using $.param({ ids: ids } ) but it ends up as ids%5B%5D=123&ids%5B%5D=456&ids%5B%5D=789
How can I do this?
Here's my html link to use it. I'm using knockout databinding and observables
<a class="btn btn-sm btn-default" data-bind="attr:{'href':'bill/' + bills().map((data) => {return data.billId;}), 'target':'_blank'}">
<i class="fa fa-print"></i>
Click
</a>
and it currently returns
bill/123,456,789
You could use
ids.map(ids=> `ids=${id}`).join('&')
to create a string with ids=123&ids=345&ids=789.
Aftwards you can just add the concattedIds to you url.
Would be something like this:
<a class="btn btn-sm btn-default" data-bind="attr:{'href':'bill/' + bills().map((data) => `ids=${data.billId}`).join('&'), 'target':'_blank'}">
<i class="fa fa-print"></i>
Click
</a>
Related
This question already has answers here:
Django Template Variables and Javascript
(18 answers)
Closed last month.
I'm trying to generate a code for editing posts using modal that are made before
but it shows "Identifier or string literal or numeric literal expected" and "Statement expected" ERROR
here is my code:
`
function submitHandler(){
const textareaValue = document.getElementById("textarea_"${post.id}).value
</script>
<button type="button" class="btn btn-secondary"onclick=submitHandler({{post.id}}) > Save Changes</button>
`
want to submit change to editing posts.
if your are sending the textarea id via onclick, so didn't need to get it again via jinja or django template.
<script>
function submitHandler(post_id){
my_textarea = 'textarea_'.concat(post_id);
const textareaValue = document.getElementById(my_textarea).value
</script>
<button type="button" class="btn" onclick=submitHandler({{post.id}})> Save Changes</button>
This question already has answers here:
How to remove an HTML element using Javascript?
(11 answers)
Closed 2 years ago.
Hi I am trying to get a few buttons to work but all the other things I found didnt work here it is
document.getElementById("Element").remove();
isnt working
<button class="btn btn-danger" onclick="reset()">Reset</button>
Error:
script.js:30 Uncaught TypeError: Cannot read property 'remove' of null
at reset (script.js:30)
at HTMLButtonElement.onclick (index.html:14)
Im sorry if this is formatted weird but I am new to this.
Try this
<button id="reset-button" class="btn btn-danger" onclick="reset()">Reset</button>
And you can remove the button via
document.getElementById("reset-button").remove();
The element you want to remove needs to have id="Element".
For example if you want to remove a div it would look like:
<div id="Element"> Div to remove </div>
then your script:
function reset() {
document.getElementById("Element").remove();
}
will work for the button:
<button class="btn btn-danger" onclick="reset()">Reset</button>
I didn't get what you are trying to do, I am assuming you are trying to remove the button.
you are trying to get button by element id but there is no id attribute in the button tag,
it should look like something like below
document.getElementById("id_name").remove();
<button id="id_name" class="btn btn-danger" onclick="reset()">Reset</button>
Just give the id name to your button with the same name you're giving in remove.
document.getElementById("Element").remove();
<button id="Element" class="btn btn-danger" onclick="reset()">Reset</button>
This question already has answers here:
How can I remove a specific item from an array in JavaScript?
(142 answers)
Closed 2 years ago.
I have this
<span #click="remove(product)" class="btn btn-sm btn-danger"><i class="fa fa-times"></i></span> element, It triggers this function:<br/>
remove(product) {
this.form.products.$remove(product);
} <br/>
But it outputs this error:TypeError: this.form.products.$remove is not a function i don't know what is wrong.
Use the splice method to remove the item from an array
First get the index of the item
let index = this.form.products.indexOf(product);
Then remove it using splice
this.form.products.splice(index,1);
This question already has answers here:
Does ID have to be unique in the whole page?
(14 answers)
Closed 4 years ago.
I have the following issue.
I'm generating multiple data from db and each item has a "delete" btn which has a "data-entryid" attribute with the entry id number.
I want to pass the data attribute of each item when i click the trash icon but with the current js code i only get the first entry's id.
Here's my html btn code where "entry-num" the entry id generated from db:
<a href="#" id="dlt-btn" data-entryid="{entry-num}" class="btn btn-danger delete">
<i class="far fa-trash-alt"></i>
</a>
And here's my js code in which i'm trying (for now) to pass the value in console:
$("#dlt-btn").click(function(){
var entryId = $(this).data("entryid");
console.log(entryId);
});
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
Use class instead of id:
$(".delete").click(function(){
var entryId = $(this).data("entryid");
console.log(entryId);
});
Use Class instead of Id Because its unique or generated id
Seeing as the data is being generated after the page has loaded, you should try event delegation. Something like:
$('#someParentElement').on('click', '.deleteButtonClass', function(){
var entryId = $(this).data("entryid");
console.log(entryId);
});
You can use simply like this use class instead id and change accordingly
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dlt-btn").click(function(){
var entryId = $(this).data("entryid");
alert(entryId);
});
});
</script>
</head>
<body>
<a href="#" data-entryid="value" class="btn btn-danger delete dlt-btn">
<i class="far fa-trash-alt">ddd</i>
</a>
</body>
</html>
if you do not want to use class and id Attributes.
$("a").on('click',function(){
var entryId = $(this).data("entryid");
console.log(entryId);
});
This question already has an answer here:
Passing parameters to Javascript from jsp
(1 answer)
Closed 7 years ago.
I'm having a jsp page which displays a grid, containing data from the database. For each and every record I'm having an action called editRecord() which is a button in the jsp page. I'm having the editRecord function within a separate javascript file which has id(id of the record) as the parameter.
What I need to know is, if I'm having something like this in my jsp for my button:
<button id="reviewEdit" type="button"
class="edit-btn pull-right margin-left10 recos"
onclick="editPersonalDetail()">
<span class="fa fa-edit margin-right3"></span>
<fmt:message key="review.grid.btn.edit"/>
</button>
How should I pass the record id as the parameter within the onclick function? If needed can post the function as well.
Any help would be appreciated.
In a JSP you can just simply print the variable as a literal:
editPersonalDetail(<%=record.getId()%>);
This is a JSP expression shorthand, do not confuse it with scriptlets (which are bad). Of course, the code inside the JSP block will be different.
You can also use the JSTL c:out:
editPersonalDetail(<c:out value="record.id"/>);
One simple way is you can pass the value for your record id as:
onclick="editPersonalDetail('"+ <%= your_jsp_variable %> +"')"
The other way you can use JSTL library.
Another option is to do it through javascript.
$(".use-address").click(function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".nr").text(); // Find the text
// Let's test it out
alert($text);
});
http://jsfiddle.net/UW38e/1264/
Another way is to keep variables in hidden inputs.
So in jsp you have this:
<input id='record_id' type='hidden' value='<%= record.getId() %>' />
and in javascript you get it like this:
var record_id = document.getElementById("record_id").value;
or use jQuery:
var record_id = $("#record_id").val();
If you are passing the value that is present in the model, then you could try this..
onclick="editPersonalDetail(' + modelname.columnname +')"
check whether it works.
Just use JSTL.
<button id="reviewEdit" type="button"
class="edit-btn pull-right margin-left10 recos"
onclick="editPersonalDetail('<c:out value="${record.id}"/>')">
<span class="fa fa-edit margin-right3"></span>
<fmt:message key="review.grid.btn.edit"/>
</button>