Javascript / jQuery: Why do I keep getting undefined? - javascript

I have the following html code:
<a class="tabTitle" id="title_boxtab_default" tab-type="default" href="#tabs-3">Sample</a>
In jQuery I'm trying to get the value of the href attribute with:
$('.tabTitle').last().attr('href');
But it keeps telling me it's undefined?
I should mention that the number of links with class"tabTitle" increases. That's why I use .last()

Works just fine for me in JSFiddle. I changed it to this, and it returned #tabs-3:
alert($('.tabTitle').last().attr('href'));
My guess is that it's not running from a ready handler like this:
$(function() {
var x = $('.tabTitle').last().attr('href');
});

It should work. Make sure you are running the script when the element is present in the DOM, f.ex using .ready():
$(function() {
alert( $('.tabTitle').last().attr('href') );
});
DEMO: http://jsbin.com/IyeSacU/1/edit

Try DOM Ready
$(document).ready(function(){
$('.tabTitle').last().attr('href');
});
Fiddle

Related

Remove Script Tag

I hope you have well with nice pleasure.
I am trying to remove Script tag by ID. For this purpose, I am apply code
var elem = document.getElementById("sns_scripts");
elem.remove();
But, this is give me error on my console windows is :
Uncaught TypeError: Cannot read property 'remove' of null
I am trying another method is :
$("#sns_scripts").remove();
It is also not working. See Picture
Picture is mention , sns_scripts script still avaialbe, and above this script my custom code, but it is not working.
Please help me, I am really want to remove sns_scripts script from my webpage.
Wrap your code within DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function(){
var elem = document.getElementById("sns_scripts");
elem.remove();
});
Because you are trying to get an element at that point where is wasn't available in the DOM. So, it was null.
do not use elem.remove(), but use
$(elem).remove();
NOTE: Re-order following lines in your code. Because you are running remove() function before writing script with id(sns_script):
<script type="text/javascript" id="sns_scripts">var video=document.getElementById('bgvid');</script>
<script>
$('#sns_scripts').remove();
</script>

Loading external javascript, and then remove href attribute from results

I'm trying to load a widget in javascript which creates a HTML table once it has been loaded.
Example:
<td class="foo"><a class="bar" href="http://example.com">Example</a></td>
Inside the table are links where I'd like to remove the href attribute.
So the result looks like this
<td class="foo"><a class="bar">Example</a></td>
I tried the following jQuery:
function myfunction() {
$("td a").each(function(){
if($(this).hasClass("bar")){
$(this).removeAttr("href");
}
});
};
Reference: http://www.tutorialrepublic.com/faq/how-to-remove-clickable-behavior-from-a-disabled-link-using-jquery.php
I tried it also with onload="myFunction()" but that neither worked out.
Why this is not working? Any input is much appreciated!
have you try:
$(window).load(function(){
myFunction();
})
The problem, you're facing is, contents are added after the full document load. You should use .on() method to call your function or to run the script.
$(".widget").on("load", function(){
alert("It was loaded/ load your function/write your code here.");
});
Note, .widget and load are my assumptions. You should better use the correct values or provide your jsfiddle or code here to diagnose the problem if it still exists.

$(window).load(function() fails to execute after completely loaded document

I have failed to find the answer in the following:
I have an html document that loads a couple of other htmls.
This is done perfectly.
However, in on one of the included htmls, the "navmenu.html", I would like, after everything is comlepetly loaded, to execute a script found in load() to modify "menu1" element's class, which is in the included "navmenu.html".
After the ready() function, the load() function is executed before the "navmenu.html" is really & completely included in the document, since I get the error message that the element "menu1" is not found.
If I pause the action by an alert() at the beginning of load() - then the menu1 element is found - since this delay caused by the alert() gives time to the ready() function to complete.
So, is there a way to solve this?
Thank you in advance.
<body>
<div id="navmenu"></div>
<div id="carousel"></div>
</body>
<script language="javascript" type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html');
$('#carousel').load('carousel.html');
});
$(window).load(function() {
var element = document.getElementById("menu1");
element.classList.add("active");
});
</script>
jQuery.load() has the following signature (url,data,callbackFunction).
You could try the followind :
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html',[],function(){
$('#carousel').load('carousel.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
});
});
Thank you so much Radu Toader for the reply.
It worked !!!
(I am not sure if this is the right way to answer, since it's my first question to the group.)
I also tried the following, since the element was in "navmenu.html" and had a separate line for the carousel.
$('#navmenu').load('navmenu.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
$('#carousel').load('carousel.html');
I also tried your answer where load.carousel was called by the load.navmenu and it also worked.
Do you suggest that I should use your "more complex" solution instead of the separated line for the carousel?
Thanks again.
Dimitrios

Count Number of Matched Elements in Document with jQuery

I need to count the amount of video thumbnails on a given product page for an ecommerce store, and then output this number on the same page in a particular HTML element.
The desired result is that on the 'Videos' tab there will be the number of videos right next to it. i.e. Videos 17
I've tried to use .length() and .append() to achieve this but am having dramas. I have about 1.5 days jQuery experience so I know I'm doing something wrong here.
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
I've set up a JSFiddle
Any help is much appreciated. Thanks!
In Jquery $() is a selector, if you say :
$(document).ready(function(){
});
it means that execute the block inside that function when my document is loaded complete on the browser, but what you write :
$document().ready(function(){
...
});
is wrong syntax and is not valid in jquery.
this should work with length:
$(document).ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
or you can use size():
$(document).ready(function(){
var numvids = $('.videos').size();
$('.countvids').append("<p>"+numvids+"</p>");
});
here is Fiddle DEMO
you code was like this:
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
which is wrong
and also you need to include query script file in your page.
you can include it from online like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
See updated fiddle.
The only error is that you did not include the Jquery link and/or
$(document).ready(function(){
http://jsfiddle.net/65BrR/4/
$document() is not Correct syntax of jquery , its $(document)
hope so its solve your problem !
$(document).ready(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
Your mistake was referencing the a non-existent global function called $document isntead of calling $(document). As it happens, your code would have worked, as-is, if it had been preceded by this:
var $document = $(document).ready;
But this is purely for amusement and is not very practical or readable code :)
Use the document-ready shortcut syntax
You really want to use the shorter jQuery shortcut. Instead of $(document).ready(function() {YOUR CODE HERE}); use $(function(){YOUR CODE HERE});
e.g.
$(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
This results in shorter code and is becoming so commonplace you might as well get used to it :)

Toggleclass not working, altough should

This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!
toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/

Categories