Appened is not working with calling id which is unique - javascript

This my code when click the button i want to display button dynamic id to the specific place by calling that id:
this is my code:
<span id="2" class="view-details">View Details</span>
$( ".view-details" ).on( "click", function() {
var group = field.attr("id");
console.log(group); //Ex: value is coming as "2"
$("#groupID").append( group );
My HTML
<span id="groupID"></span> //i want to display the value "2" here

In your code field variable is not defined instead of that use this to refer the clicked element and get id property. Althogh for updating the content use html() or text() method since append() method just insert the new content at end(existing content would be there).
$(".view-details").on("click", function() {
// get id property
var group = this.id;
// update the html contecnt of span element
// or use `text()` method
$("#groupID").html(group);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="2" class="view-details">View Details 1</span><br>
<span id="3" class="view-details">View Details 2</span><br>
<span id="groupID"></span>

If we look only the snippet you provided, the issue is that you are not defining the field variable. However it will keep appending the 2 in your span as many times as you click if that is not desired , the other answer is already taking care of that.
$( ".view-details" ).on( "click", function() {
field = $(this);
var group = field.attr("id");
console.log(group); //Ex: value is coming as "2"
$("#groupID").append( group );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="2" class="view-details">View Details</span>
<span id="groupID"></span>

Related

Class not working jQuery

So I more than one dynamicly generated elements with the same class name that I am trying to check input for in jQuery. Instead of it letting me click on both, it is just letting me click the first element generated.
Ex: I click on item_1 and it returns the item_1 id, but when I click on item_2 it doesn't return anyting.
HTML
<div id="item_1" class="resp"></div>
<div id="item_2" class="resp"></div>
JS - Jquery
$(".resp").on("click",() =>{
var id = $(".resp").attr("id");
console.log('attempting toggle' + id);
});
Firstly, you have to use normal function instead of arrow function (to avoid missing the context). Secondly - use this keyword to refer to the actually clicked element.
$(".resp").on("click", function() {
console.log('attempting toggle ' + this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">A</div>
<div id="item_2" class="resp">B</div>
This is because .attr('id') returns the value of the id attribute of the first matched element in the set.
Instead, use an old school function for the handler so the this value is equal to the clicked div, then get its id:
$(".resp").on("click", function() {
var id = $(this).attr('id');
console.log('attempting toggle ' + id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">First</div>
<div id="item_2" class="resp">Second</div>
What you're doing here is referencing the classname to obtain the id. This gathers the id of the first classname, which isn't what you desire. What you need to do is use the this keyword to correctly obtain the id.
After removing the arrow function and changing the internal code a bit, it should look like this:
$(".resp").on("click", function() {
var id = this.id;
console.log('attempting toggle: ' + id);
});
Also make sure you've correctly installed JQuery. Pick up your JQuery embed code from here.
Also remember to include your JQuery code before your JavaScript code.

How to save data using jQuery?

I have some dynamic data in my <div> element. Look at the sample below:
<div>345</div>
<div>3245</div>
When I click on the div element, the nested value will change.
var someVar = $(this).find(div);
someVar.empty();
someVar.append("<div>Number has changed</div>");
Sample:
<div>345</div>
<div>Number has changed</div>
And when I click again on the div, I need to return the previous value:
<div>345</div>
<div>3245</div>
Here's the question: How do I keep this value for returning the number every time I click on the div with changed text inside of it?
you need create some data attribute store the previous value.The each time click get the data from attribute and restore the current text to attr like this data-prev.No need to append .html() is enought to toggle
updated
$('div').click(function(){
var prev=$(this).html();
$(this).html($(this).data('prev'));
$(this).data('prev',prev)
console.log($(this).data('prev'))
})
.nested{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>345</div>
<div data-prev="<div class='nested'>Number has changed</div>">3245</div>
You can use jQuery 'data' method.
$( "div" ).data( "number", 1 )
Then read it with:
( $( "div" ).data( "number" ) )
Documentation:
https://api.jquery.com/data/

alert div id when click on div

I created new website and on it I want when I click on one div jquery show me div ID and I user this command and I can give div ID
var name = $(this).attr("id");
and when I want to give div's child I use this Command
var name = $(this).children(".select").attr("name");
now I have 3 divs like this
enter image description here
and when I click on div 3 Jquery give me div2 with this command
var name = $(this).children(".select").attr("name");
how can I get div's ID when click on it?
example click on div 1 show me div 1 or when I click on div 2 show me div 2
and when I click on div 3 show me div 3
Thanks
Your first code was correct, you don't need to find children...
$("div").click( function(){
var name = $(this).attr("id");
console.log( name );
});
If you have trouble with multiple events, you can stop propagating the click event with .stopPropagation() like so:
$("div").click( function( e ){
var name = $(this).attr("id");
console.log( name );
e.stopPropagation();
});
See example: https://jsfiddle.net/tg4rmkk9/
You've already solved the main part of the problem:
var name = $(this).attr("id");
This will get you the ID of the Div.
To alert it you can then do alert(name);
Here's a demo of what I think you're going for :
$('[id^=div]').on('click', function() {
alert($(this).attr('id'));
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="div1">
Click me
</div>
<div id="div2">
Click me too
</div>
<div id="div3">
Click me three
</div>
(see also this Fiddle)

jQuery using multiple buttons of the same class to return a value [duplicate]

This question already has answers here:
Getting the ID of the element that fired an event
(24 answers)
Closed 7 years ago.
I have a list of entries generated by PHP, each in its own div and each with a unique ID. I'm trying to develop an AJAX call that can remove each entry based on their ID, however whenever I run the script below, it always returns 0.
<div>
Some entry here
<button id="0" class="remove">Remove</button>
</div>
<div>
Another entry here
<button id="1" class="remove">Remove</button>
</div>
// ... and so on
<script>
$(".remove").click(function() {
var id = $(".remove").attr('id');
alert(id); // debug
// AJAX call here
});
</script>
Previously I tried the same thing except for the other way around - the id returned by PHP was in the class attribute and the id attribute had the value 'remove' and this only returned 0 for the first button. The second button didn't invoke the jQuery script at all.
How can I pass a unique ID to the same jQuery call?
Try this
$(".remove").click(function() {
var id = $(this).attr('id'); // $(this) refers to button that was clicked
alert(id);
});
The vanilla option for future viewers.
Select all elements with class remove
Iterate through the elements, assigning a click handler
On click remove the parent element
Log the id to the console
(function () {
"use strict";
var buttons = document.getElementsByClassName('remove');
for ( var i in Object.keys( buttons ) ) {
buttons[i].onclick = function() {
this.parentElement.remove();
console.log(this.id);
};
}
})();
<div>Some entry here
<button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
<button id="1" class="remove">Remove</button>
</div>
Just use this.id to get id of the element
$(".remove").click(function() {
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Some entry here
<button id="0" class="remove">Remove</button>
</div>
<div>
Another entry here
<button id="1" class="remove">Remove</button>
</div>
$(".remove").on("click",function() {
var id = $(this).attr('id');
console.log(id);
});
You need to use the this keyword to refer to the clicked element:
$('.remove').click(function() {
var id = this.id;
// OR
var id = $(this).attr('id');
});

find text contained in a div and get its child checkbox ID

I`m trying to write a script that gets the ID from a checkbox element and do something with it. The problem is that I can not target the checkboxes by value since its generated from mysql query.
Here is how the html for the checkboxes looks like :
<div class="cat_checkbox cat_unchecked">
<input id="r_c136" type="checkbox" value="36" name="r_c1[]">
Sample
</div>
<div class="cat_checkbox cat_unchecked">
<input id="r_c131" type="checkbox" value="31" name="r_c1[]">
Text1
</div>
And here is the code I managed to write (I`m still learning java script and jQquery).
What I am trying to do is to tell js to select the that contains "Text1" and find the checkbox inside it, get its id and then add checked prop to the item.
But instead it selects the first div finds the checkbox inside and checks it no matter the value inside.
$( "#click" ).click(function() {
if ($( "div:contains('Text1')" ))
{
id = $("div:contains('Text1')").find("input[type='checkbox']").attr("id")+"";
alert(id);
$("#"+id).prop("checked", !($("#"+id)).is(':checked'));
}
});
});
Any help will be aprciated. Thank you.
Use $("div:contains('Text1')").length instead of $("div:contains('Text1')")
Change Your code as
$("#click").click(function () {
if($("div:contains('Text1')").length) {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']"); //Find Checkbox here
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
DEMO
Change your code as
$("#click").click(function () {
var checkbox = $("div:contains('Text1')").find("input[type='checkbox']");
if (checkbox.length) {
checkbox.prop("checked", !checkbox.is(':checked'));
}
});
Updated DEMO

Categories