Data attribute value is not passed in jquery var [duplicate] - javascript

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);
});

Related

Select the custom tag from button attribute

I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>

Add number as parameter to function after I get button from DOM?

I use this row to get from DOM button:
var btn = parent.parent.document.getElementById('btnZoom')
I get from DOM this element:
<button type="button" id="btnZoom" onclick="parent.ExecuteCommand()" class="button_air-medium">
<img id="zoomMode" class="miniToolbarContant" src="...">
</button>
After I get the element from the DOM I need to add to ExecuteCommand function some number as parameter.
For example number 55:
<button type="button" id="btnZoom" onclick="parent.ExecuteCommand(55)" class="button_air-medium">
<img id="zoomMode" class="miniToolbarContant" src="...">
</button>
My question is how do I add number as parameter ExecuteCommand function afetr I get button from DOM?
Two ways to do that. One would be to set the number value as a separate data attribute on the HTML tag, and then have your parent.ExecuteCommand() command read it from there, via this:
var btn = parent.parent.document.getElementById('btnZoom');
btn.setAttribute('data-number', 55);
The other would be to add the onclick event handler in Javascript instead of using an attribute on the HTML tag:
<button type="button" id="btnZoom" class="button_air-medium">
var btn = parent.parent.document.getElementById('btnZoom');
btn.addEventListener('click', () => parent.ExecuteCommand(55));
Remember that onclick is an attribute and you can modify the value when you get the DOM element. Just like this:
var btn = parent.parent.document.getElementById('btnZoom');
btn.setAttribute("onclick","parent.ExecuteCommand(55)");

Select div using jquery not working

I have an event listener on dynamically created elements:
<script>
$(document).on('change', '.inputfile', function() {
var name = ($(this).val().split('\\').pop());
selectFile(name);
});
</script>
Once file is selected, i would like to append a paragraph showing the filename itself. My problem is that jquery selector is not working:
function selectFile(filename) {
alert(filename);
var classes = $(this).closest('.inputgroup');
$('classes').append('<p>'+filename+'</p>');
}
I would like to append the paragraph in the nearest div with class=inputgroup, because there are several div with that class.
Using a simple $('.inputgroup').append('<p>'+filename+'</p>'); is ok and paragraph is created.
This is the HTML:
<div class="inputgroup">
<label class="btn btn-default btn-info" style="margin-top: 8px">
Browse <input type="file" style="display: none;" class="inputfile"/>
</label>
<button type="button" class="btn btn-outline-danger" onclick="myAjax()">Ok</button>
<span id="remove_field" class="glyphicon glyphicon-remove" aria-hidden="true" style="vertical-align: middle"></span>
</div>
This line
$('classes').append('<p>'+filename+'</p>');
Is searching for an element named "classes" - that's not a valid HTML element.
I think you wanted
$(this).closest('.inputgroup').append('<p>'+filename+'</p>');
Based on this line of your question
I would like to append the paragraph in the nearest div with class=inputgroup
But you should put this straight in the event handler, otherwise this has a different meaning
$(document).on('change', '.inputfile', function() {
var name = ($(this).val().split('\\').pop());
$(this).closest('.inputgroup').append('<p>'+name+'</p>');
});
In this line of code
var classes = $(this).closest('.inputgroup');
$('classes').append('<p>'+filename+'</p>');
The first line gives you an jQuery object. Which you can directly use to append the p tag.
As already mentioned in other answer your second line looks for a element named classes which does not exist.
So simply use the Jquery object you have and append the paragraph. Like below
classes.append('<p>'+filename+'</p>');

How could I pass a parameter within the javascript function called from jsp? [duplicate]

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>

jquery attribute listener for onclick [duplicate]

This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 8 years ago.
I want to set a listener to handle button clicks which I know could be done with:
$("#id").click(function() {...});
but i was wondering if there is a way to make it listen to an attribute rather than an ID. because i would like to add custom attributes for example
<span class="btn btn-primary" button-type="css-change"></span>
and i would like to do something like
$(document).attr("button-type").equals("css-change").click(function () { ... } );
is this at all possible?
Use attribute-equals selector [attribute='value']
$("[button-type='css-change']").click(function() {
alert("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="btn btn-primary" button-type="css-change">hi</span>
You can do this with a attribute selector.
http://api.jquery.com/category/selectors/
In your case the:
http://api.jquery.com/attribute-equals-selector/
You can use the attribute-equals selector:
$("[button-type='css-change']")
Altho you should stick with data-* for custom attributes to pass validation.
$("[data-type='css-change']")
yes you can loop though all the elemnts in the .btn class ..
<span id="1" class="btn btn-primary" button-type="css-change"></span>
<span id="2" class="btn btn-primary" button-type="test"></span>
<script>
$(".btn").each(function()
{
if($(this).attr("button-type") == "css-change")
{
console.log("The winner is "+$(this).attr("id"));
}
});
</script>
or there is also an easier way ..
$("[button-type='css-change']").each(function(index)
{
$(this).html("hi");
}

Categories

Resources