We Keep Coding

jQuery Issue cannot retrieve or set attributes, 'undefined'

I have an img element. That image element, on mouse hover, will display a detailed tool tip.
I'm trying to make the img element default start empty null, and feed it the image information from the tooltip on load.
I can't retrieve or assign attributes though using $('idName').attr(a,b);
html and js below:
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td><img id="primary" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('primary_tool_tip').style='display:block'"
onmouseleave="document.getElementById('primary_tool_tip').style='display:none'">
<div id="primary_tool_tip" class="bottom" style="display:none">
<img id="tooltip_img" src="../images/sword01.jpg" />
<div id="tooltip_name">Bronze Sword</div>
<div id="tooltip_equipslots">Primary, Secondary</div>
<div id="tooltip_attributes">STR+2 DEX+2</div>
<div id="tooltip_elements">Fire+5</div>
</div>
</td>
<td id="secondary"><img class="img-responsive" src="" alt="Secondary"></td>
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
alert($("tooltip_img").attr("src"));
function initialize(){
$('primary').prop('src', $('tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );

Place all of your JavaScript in a JQuery document.ready() function so that it doesn't execute until after the DOM has been loaded and is ready to be interacted with.
Then, make sure that you are using correct selectors.
Tag Name gets elements by the element name.
Prepending # gets elements by ID
Prepending . gets elements by class name
So all together:
// The contents of an anonymous function that is passed to JQuery
// won't run until the DOM is parsed and ready to be interacted with.
// This is also known as a "document.ready()" function.
$(function(){
alert($("#tooltip_img").attr("src"));
function initialize(){
$('#primary').prop('src', $('#tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );
});

You need to $("#primary") to target element by id.
in your case : $("primary") will try to find an HTML element named <primary>

I fiddled around with what Scott gave me made some minor adjustments and everything works now =).
My img is now instantiated from information contained inside my tooltip's bundle of information. Which will eventually be supplied itself from js, and js will supply it through xml externally if things go accordingly.
Thanks for help Scott and company, final refined code below:
Final code
HTML
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td>
<img id="primaryIcon" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('tooltip_primary').style='display:block'"
onmouseleave="document.getElementById('tooltip_primary').style='display:none'">
<div id="tooltip_primary" class="standardtooltip">
<img id="tooltip_primary_img" src="../images/sword01.jpg" />
<div id="tooltip_primary_name">Bronze Sword</div>
<div id="tooltip_primary_equipslots">Primary, Secondary</div>
<div id="tooltip_primary_attributes">STR+2 DEX+2</div>
<div id="tooltip_primary_elements">Fire+5</div>
</div>
</td>
<!--
<td>
<img id="secondaryIcon" class="img-responsive" src="../images/sword01.jpg" alt="Secondary"
onmouseover="document.getElementById('tooltip_secondary').style='display:block'"
onmouseleave="document.getElementById('tooltip_secondary').style='display:none'">
<div id="tooltip_secondary" class="tooltip" style="display:none">
<img id="tooltip_secondary_img" src="../images/sword01.jpg" />
<div id="tooltip_secondary_name">Bronze Sword</div>
<div id="tooltip_secondary_equipslots">Primary, Secondary</div>
<div id="tooltip_secondary_attributes">STR+2 DEX+2</div>
<div id="tooltip_secondary_elements">Fire+5</div>
</div>
</td>
-->
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
$(function(){
initialize();
});
function initialize(){
document.getElementById("primaryIcon")
.setAttribute("src", $("#tooltip_primary_img").attr("src"));
alert('working as intended!');
}

How to make entire <tr> in a table clickable like <a href="">

Here is my Fiddle
How can I make the entire <tr> as clickable.
In the fiddle all the elements like text and images are clickable, but i want to make the entire <tr> clickable. I won't want to make the jQuery query action, as it won't show the href icon while hovering it.
How can I do this ?
I read this question but it still uses jQuery on click event, which won't show the href icon while hovering it
Here is my HTML
<table border=1>
<tbody>
<tr>
<td style="display: none;">
13467.36232877521
</td>
<td style="display: none;">
0
</td>
<td width="5%" >
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/store/profile/1458470633N4IjGniw81.png" alt="image" height="58px" width="58px" style="margin: -8px 0px -9px -7px;" />
</a>
</td>
<td width="25%">
<div class="semibold">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation Demo 1
</a>
</div>
<div class="text-muted"><i class="fa fa-heart yellow"></i> 0</div>
</td>
<td width="35%">
<div class="text-muted">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
Juice Generation, 9th Avenue, New York, NY, United States
</a>
</div>
</td>
<td width="35%" class="text-right">
<a href="http://localhost/greenhopping/store/976" style="text-decoration:none;color:black">
<img src="http://greenhoppingbucket.s3.amazonaws.com/tip/1456942351fQoyY8DNZd.png" alt="image" height="36px" width="40px" />
</a>
</td>
</tr>
</tbody>
</table>

A combination of the above should do the trick.
Add recognizable class to your element.
<tr class="clickable" data-href="http://website/your_href"></tr>
Write CSS for the element to appear clickable.
.clickable {
cursor: pointer;
}
Make the thing clickable using Javascript:
var elements = document.getElementsByClassName('clickable');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('click', function() {
var href = this.dataset.href;
if (href) {
window.location.assign(href);
}
});
}

Try putting display as block.
td a {
display: block;
}
Fiddle
Also have a look at answer in this question too.

All you need to do is add cursor: pointer; to have it look like its clickable and then add an ID to it if you want to actually make the entire tr tag clickable. IE:
<tr id="clickable">
CSS
tr { cursor: pointer; }

You can do it by using javascript. Maybe:
$("tr").click(function() {
// what to do
});

jQuery actions independent of id

I have a working web page, but I would like to generalize the code. When one clicks a link with e.g. anchor #11 or #12, a div called #t11 or #t12 will open (or close) with this piece of script:
Script
$( "#11" ).click(function() {
$( "#t11" ).toggle();
});
$( "#12" ).click(function() {
$( "#t12" ).toggle();
});
Stripped HTML
<div class="a">
<table>
<tr><td><a id="11">Foo</a></td></tr>
<tr><td>Find out more about Foo</td></tr>
</table>
</div>
<div class="a">
<table>
<tr><td><a id="12">Bar</a></td></tr>
<tr><td>Find out more about Bar</td></tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
Relevant CSS
.b {
display: none;
}
This is fine, however, with over 20 divs it's getting complicated and difficult to maintain. Is there a way to reduce the code, so every id in <a> will toggle its <div>? I've been struggling with $this but without the result I hoped for.

You can use a selector that will match all appropriate <a> elements, so that your click function will be applied to all of them. Then, you can get the id attribute from your <a> tag using $(this).attr('id'). You can then form a selector that matches the corresponding id of the content you want to toggle, then call the .toggle() method using that selector.
$('.a table tr td a').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
EDIT
You may also consider adding a class to your actual <a> tags, as mentioned by #Lelio Faieta.
In the above example, if the structure of your html changes, the $('.a table tr td a') selector will break, and the click functionality will be lost.
If, however, you assign a class of, say toggler to each <a> tag, then you can just replace the $('.a table tr td a') selector with $('.toggler') and your click functionality will still work if you change the location of your <a> tags in your html.
$('.toggler').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11" class="toggler">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12" class="toggler">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>

You can use classes to group elements in jquery.
A class is referenced like id but with a dot instead of a dash:
$('.someClass')
where you used to write
$('#anID')
Many objects can share the same class so you can both use classes to target an animation to multiple objects at the same time or to use different element on the DOM to fire an animation

The best way to solve this is by adding a common class to all a tag and performing event with that class.
<a class="atag" id="11">
<a class="atag" id="12">
$(".atag").click(function() {
var id=$(this).attr("id");
$(body).find("#"+id).toggle();
});

jQuery last child selector

This is not working and I don't know why. I have tried it in the console it works, but when I change my js codes it does not work.
$('#recipe-table td:last-child').width();
How can I get it the correct way?
this is the html
<div id="div-lists">
<div id="div-recipe-table">
<table class="" id="recipe-table" cellspacing="0" cellpadding="0">
<tbody>
<tr class="recipe-list" data-ng-repeat="recipe in recipe_data" ng-click="recipe_click(recipe.CodeListe,recipe.Name)">
<td id="td-img{{recipe.CodeListe}}">
<center>
<span id="img{{recipe.ID}}X">
<a id="{{recipe.ID}}" href="javascript:void(0);">
<img ng-if="recipe.Pictures !==''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/><img ng-if="recipe.Pictures===''" class="images" src="images/default.png" id="img1"/>
</a>
</span>
</center>
</td>
<!-- I want to get The width of this <td> -->
<td class="recipes">
<div id="div-recipe-name">
<strong>{{recipe.Name}}</strong></div>
</td>
<!-- Until here
I already tried using $('.recipes').width(); but it returns 0 -->
</tr>
</tbody>
</table>
</div>
<div id="div-list-loading"></div>
<div id="div-list-noresults">{{ui_translation.UIT[171610]}}</div>
</div>
</div>

Try the following:
$('#recipe-table td:last').width();
From the jQuery Docs
While :last matches only a single element, :last-child can match more
than one: one for each parent.
Since you have already tried $('.recipes').width(); does the following provide you any results:
$('.recipes').each(function (index, elem) {
alert($(this).width());
});

Try below jQuery
You can use .last() method constructs a new jQuery object from the last element in that set.
$('#recipe-table td').last().width();
JSFIDDLE DEMO

how to show and hide inner divs onclick upto 3 levels?

I have following structure in my page
HTML:
<div style="position:relative; width:200px; height:100px; overflow:hidden;">
<div style="position:absolute;" id="innerDiv">
<table style="width:400px;height:50px;" border="1" id="innerTable">
<tr>
<td>
<div id="td1"class="monthDiv" style="white-space:nowrap;">
2000
</div>
<div id="td2" style="white-space:nowrap;">
<table>
<tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
</table>
</div>
</td>
<td>
<div id="w" style="white-space:nowrap;">
2001
</div>
</td>
</tr>
</table>
</div>
</div>
JAVASCRIPT:
$("#td1").click(function(){
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(){
$("#td2").hide('slow');
$("#td1").show('slow');
});
$("#quarter1").click(function(){
});
$("#quarter2").click(function(){
});
So, when I click on 'td1'(2000) I am showing 'td2'(JAN-JUN00 AND JUL-DEC00)' and viceversa but I need to show another div(JAN00 FEB00 ... JUN00) when click on 'quarter1'. Also I need to find on which div click event was fired, 'quarter1' or 'quarter2' to show (JUL00 AUG00 ... DEC00)
Please help me.

You can simply call a show event on the div you want to display on click of quarter1:
$("#quarter1").click(function(){
alert('quarter1');
$('#quart1').show('slow');
});
$("#quarter2").click(function(){
alert('quarter2');
$('#quart2').show('slow');
});
quart1 and quart2 are the ids of the divs you want to display.
EDIT:
Add this:
$("#td1").click(function(e){
e.stopPropagation();
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(e){
e.stopPropagation();
$("#td2").hide('slow');
$("#td1").show('slow');
});