We Keep Coding

Cant get an attribute of an element with jquery

I have got this html:
<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">
I am trying to get this:
$('body').on('click','.hostPic',function(){
console.log($(this).attr('data-name'));
});
Whenever the picture is pressed, I want to gets its data-name attribute, but it doesnt work.. I get undefined reported when I try to retrieve the attribute. Any reason why?

Add the hostPic class to that image.
Additionally, you can just use .data('name'), but it doesn't actually make a difference. Older browser may have trouble with .data, but it's never been a problem for me.

$('.hostPic').click(function() {
console.log($(this).data('name'));
}

Make sure your image has the class 'hostPic' and then do the following in your jQuery:-
$('.hostPic').on('click', function() {
console.log($(this).data('name'));
}

The following code worked for me, maybe you are attaching the events wrong object, you can understand that by debugging the this object instead of data-name.
And another thing is if you are going to use .data just for read string you should use .attr as the .data caches and tries to convert the value its appropriate type like number or JSON it is a heavier process than .attr.
<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">​
​$("img")​.click(function () { alert($(this).attr("data-name")); });​

Chrome Javascript

i have two spans on my page with class='hidden' and then some javascript to remove the class when a condition is met, its working fine in ie 9/10 and firefox but its not working in chrome when I run the function in the chrome JS console I get the message TypeError: Cannot read property 'attributes' of null
Anybody know whats going on?
<script type='text/javascript' >
function showhidden() {
var att =document.getElementById('hiddentextbox');
att.attributes[0].value='';
att =document.getElementById('hiddentextbox1');
att.attributes[0].value='';
}</script>
Thanks

Try changing the class by using att.className = '' instead of what you're doing, which I have never seen before.
You might also want to check out jQuery, which has good built-in .show() and .hide() functions.

It can't find document.getElementById('hiddentextbox'); therefore it can't find attributes of null, because non-found element is null. I believe that is the problem.

JavaScript onClick work only after second click

I found another similar questios, but almost all is for advanced things, like Android development. My question is simple, I think. I have this two codes:
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display=='none')?'block':'none';
}
And in another file, I got that:
More Info
When I click on got the mouseover (second code), it just work after second try.
Anyone know where is the problem?
Obs.: The first code is in the header.php and the second on single.php (WORDPRESS)

The first time, d is set by CSS; JavaScript doesn't see that style property (See Get the Rendered Style). It initially sees o.style.display === "" (which is not 'none'). Consequently, the first click sets it to none and the second sets it to block.
Change it to:
o.style.display = (o.style.display === 'block') ? 'none':'block';

because the first time the display property is not set therefore it is not equal to "none"

Well, there's nothing wrong with your code above. Maybe something's up with your style declaration, like setting it to block in the start which you might not want. Here's a simple JSFiddle I made for testing your code: http://jsfiddle.net/77DMd/1/
Hope this helps.

javascript document.getElement.setAttribute doesn't work

I have this problem:
On this website: http://www.azercell.com/WebModule1/mainservlet?cmnd=sms&lang=en
I'm trying the following script, it works fine with C#, but javascript nope, why?
javascript:(function() {
document.getElementById('login').setAttribute('value', 'test'); })()

There are two main problems.
The script doesn't appear in the page.
While there is an element with name="value", there is no element with id="value". (So getElementById('value') won't return an element except in IE 7 and earlier (which is buggy) and rendering modes that try to be compatible with those bugs)
Give the element you want to target a suitable id attribute.

Try this:
javascript:(function() {
document.getElementById('login').value="test";
}

jQuery select list removes all options

I have a <select> list, which has been populated with several options, but want to remove those options to start again.
I am using jQuery and have tried the following:
$("#selectId").length = 0;
But this seems to have no effect.
Part of my problem is that I am using Firebug to debug the JavaScript, but the debugger does not break at the breakpoint, so I cannot see what is going on. Should it break when the JavaScript is within the <head> of my HTML file?

this would do:
$('#selectId').html('');

This works too.
$("#selectId option").remove();

$("#selectId").empty(); works for me.
The $("#selectId option").remove(); removed the select from the DOM.
Currently using jQuery JavaScript Library v1.7.1

The fastest way to accomplish this:
$("#selectId").empty();
Here are some tests:
http://jsperf.com/find-remove-vs-empty
I take no credit for these tests.
See this stack overflow question: How do you remove all the options of a select box and then add one option and select it with jQuery?

$("#selectId").options.length = 0;
That won't actually work as written because it's using a jQuery selector. It'd work if you used a straight DOM getElementById on the select list, though. Either AKX's or d.'s responses will set you right.

If without jquery:
javascript SELECT remove()

Try This for Multiple Select Drop Down.
$('#FeatureId').multiselect("deselectAll", false).multiselect("refresh");