Develop Reference

Why am I getting an undefined error from this jquery?

I'm trying to ensure there is always an image with a personal bio. There could be two images or none available to use (coming in from Xpath Parser feed). If no image is found in the XML, I want to load a default placeholder. Console tells me this line "Uncaught TypeError: Cannot read property 'indexOf' of undefined". I've tried many things to fix it but not having any luck. Any advise is appreciated.
if ($('.a_class').attr('src').indexOf('jpg') == -1
&& $('.b_class').attr('src').indexOf('jpg') == -1) {
$('.a_class').attr('src', '/folder/default_img.JPG');
}

First off, running the same jQuery selector multiple times is expensive. In my experience, saving the selector makes the Javascript visibly more responsive:
var aClass = $('.a_class');
var bClass = $('.b_class');
According to jQuery's attr(attributeName) documentation, it can return undefined if the attribute is not set, so you have a few things to check in your if condition. I'd also cache the result of attr(attributeName) in a variable:
var aClassSrc = aClass.attr('src');
var bClassSrc = aClass.attr('src');
This should finally work:
if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') == -1)
&& (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == -1)) {
aClass.attr('src', '/folder/default_img.JPG');
}
Note that we're assuming a_class and b_class exist somewhere in the part of the DOM you're searching, and they exist once. If they don't exist, the attr(attributeName) calls won't do anything without warning. Additionally, if there are multiple a_class or b_class elements, the attr call that sets the "src" tag will set it for every a_class element. Make sure you are OK with this.

I used javaJake's answer as the foundation to write the rest of the necessary logic to hopefully make this work completely (see below). The code does not invoke any errors in the console. However, I have discovered that something (in the CMS) is hard-coded to override the javascript I'm adding to the page so I don't actually know if this works yet. Unless you see something glaringly obvious wrong with the code, I guess there is no point in responding just yet. I am looking into what is doing the override and will update the post when I do. I want to thank everyone for their help, comments, and suggestions thus far.
<script>
var aClass = $('.a_class');
var bClass = $('.b_class');
var cId = $('#c_Id');
var aClassSrc = aClass.attr('src');
var bClassSrc = bClass.attr('src');
// set default if nothing is returned in XML
if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') == -1) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == -1)) {
cId.attr('src', '/folder/imagefield_default_images/bio_default_photo.JPG');
}
// if two images are returned, use aClass and hide bClass
else if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') >= 0) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == 0))
$('.b_class').hide();
// if aClass is not preset, use bClass and hide aClass's broken image URL icon
else if ((typeof aClassSrc === "undefined" || aClassSrc.indexOf('jpg') >= -1) && (typeof bClassSrc === "undefined" || bClassSrc.indexOf('jpg') == 0))
$('.dm_image').hide();
</script>

How to capture null in javascript

i try to detect null this way
if(!$(this))
{
alert('here is null');
}
OR
if($(this)===null)
{
alert('here is null');
}
but still no luck.
here is partial code
$elements.each(function(){
//alert($(this).html());
var $item = $('<li />').append($(this));
if(!$(this))
{
alert('here is null');
}
//alert($item.text());
$list.append($item);
});
anyone can see full code from here https://jsfiddle.net/tridip/41s1pq3a/12/
edit
i was iterate in td's content. td has some link and text. i was trying to wrap each text and link inside li. so iterate this below way. code is working but some time it is also showing null which i need to detect.
i am looking for way not consider any null or empty.
here is the code
var $elements = $('.webgrid-footer td').contents()
.filter(function() {
return this.nodeType === 3 || this.nodeType === 1; // 1 means elements, 3 means text node
});
var $list = $('<ul />');
$elements.each(function(){
//alert($(this).html());
var $item = $('<li />').append($(this));
if(this===null)
{
alert('here is null');
}
//alert($item.text());
$list.append($item);
});
//alert($list.html());
$('#dv').append($list);
see this line var $item = $('<li />').append($(this)); it is getting some time empty or null which i do not want tp consider. if anyone knows it how to handle this situation then share the idea. thanks

$(null) is an empty jQuery object, not null. And all objects are truthy.
If you want to test null, use this === null. You don't need jQuery for this.
However, I don't see why do you expect this to be null sometimes. Instead, it seems you want to ignore whitespace text nodes.
var $elements = $('.webgrid-footer td').contents().filter(function() {
return (this.nodeType === 3 && $.trim(this.nodeValue) !== '')
|| this.nodeType === 1;
});

$(this) will never be either null or falsey, because jQuery always returns an object reference, which is not null or falsey.
In strict mode, it's possible for this (not $(this)) to be null. In loose mode, it isn't; attempts to make this be null will cause this to be a reference to the global object.
So it may be that you want to test this, not $(this). But only in strict mode. In loose mode, bizarrely, you'd want if (this == window) to be your "null" test.
Having said that, $elements is clearly meant to be a jQuery object, and I'm not immediately thinking of a way to to create a jQuery objct with nulls in through the public API. (It's easy if you muck about with the internals...)

JavaScript throws TypeError saying that my variable is undefined

I don't have much experience in JavaScript, so far I have this:
function loop() {
var authorDivs = document.getElementById('ctl00_MainContent_MCPObjectInfo_dvCreatorView').getElementsByTagName("div");
for (var i = 0; i < authorDivs.length; i++) {
var divOfDiv = authorDivs[i].getElementsByTagName("div");
if (typeof divOfDiv.item(i) === 'undefined' || divOfDiv.item(i) === null) {
console.log("This is undefined or null");
}
else {
var realDivs = divOfDiv.item(i);
realDivs.item(i).textContent = "please work plz";
}
}
}
I get the following error from the console in FireFox: TypeError: realDivs is undefined on this line: realDivs.item(i).innerHTML = "please work plz";
Essentially what I have (in my mind) is a loop that goes through authorDivs and gets all of the divs within those divs and saves them in divOfDiv. I then check to see if the divs in divOfDiv are undefined or null, if they are not then those divs get saved in a variable realDivs which I then use to edit the innerHTML. That's what I'd ideally like to see happen, what is causing the error? What am I doing wrong?
Note: I do not have access to jQuery but only JavaScript.
Edit: I've added the changes suggested below and its fixed that -- thanks! But I'm now getting the following error: TypeError: realDivs.item is not a function
What is causing that? And on another note how do I know when I'm dealing with an array and when I'm dealing with an HTMLCollection? Do you just assume? I've never used a loosely typed language before so its new to me.

Well, you'll need to move that code inside the conditional block that is supposed to prevent it! Also, || "null" is not going to work as you expect, you'll need to check for || divOfDiv.item(i) === null explicitly.
So try
for (var i = 0; i < authorDivs.length; i++) {
var divOfDiv = authorDivs[i].getElementsByTagName("div");
if (divOfDiv.item(i) == null) {
console.log("This is undefined or null");
} else {
var realDivs = divOfDiv.item(i)
realDivs.item(i).innerHTML = "please work plz";
console.log(divOfDiv.item(i));
}
}
However, that still doesn't really work for two reasons:
The i index you use to access the i-th divOfDiv comes from the iteration over authorDivs - hardly what you want. Instead, use a second loop over all divOfDivs.
Your realDivs variable does hold a single <div>, which does not have an .item method. You'd just directly access its .innerHTML property.
So you should use
var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
for (var i=0; i<authorDivs.length; i++) {
var divsOfDiv = authorDivs.item(i).getElementsByTagName("div");
for (var j=0; j<divsOfDiv.length; j++) {
var realDiv = divsOfDiv.item(j);
realDiv.innerHTML = "please work plz";
console.log(realDiv);
}
}

it will happen in case when your if (typeof divOfDiv.item(i) === 'undefined' || 'null') returns true. Then you never initialize realDivs (what would happen if condition was falsy). Later you try to call item function on that unitialized object

There are two problems in the code.
comparing DOM object with 'undefined' and null. If div tag is not available in authorDivs[i], it will return empty DOM array. So, comparision of empty DOM array with undefined and null is not good approach. We can use array length property for doing validation.
divOfDiv = authorDivs[i].getElementsByTagName("div");
if(divOfDiv.length > 0) { console statement}
As item(i) is already return single DOM element, item(i) of "realDivs" variable is not proper approach. In addition to this, innerHTML method needs to be used after validating whether realDivs contains DOM element. Please update the code as below.
var realDivs = divOfDiv.item(i);
realDivs ? (realDivs.innerHTML = "please work plz"): null;
Note : item(i) will return null if DOM is not available.

Execute If statement, only if element is existed

if($("#Prefix").val().trim()=="" && $("#Infix").val().trim()==""){
return false;
}
In the above code, when the element id Prefix or Infix does not exist, it's throwing undefined error
TypeError: $(...).val(...) is undefined
I know, this can be avoided by checking its length $("#Prefix").lenght>0 and $("#Infix").lenght>0.
My question here is, how can we do both checks inside single if statement itself.

try below code . check this link explain element length condition
if(($("#Prefix").length && $.trim($("#Prefix").val()) == "") && ($("#Infix").length && $.trim($("#Infix").val())=="")){
return false;
}

if (($("#Infix").lenght>0 && $("#Prefix").lenght>0) && ($("#Prefix").val().trim()=="" && $("#Infix").val().trim()=="")){
//your code here
}

Yes you can.
if statement with && operator stops checking farther when first 0 is returned. [0 && anything == 0].
So just check for the .length first.
if ( ($("#Infix").lenght && $("#Prefix").lenght) && (another conditions) ) {
...
}

Javascript not working i put this in dom.ready in jquery

I have this code in my JS file. If i remove the the if else loops then i can get the hello as alert otherwise not.
Neither i am getting any error in firebug console
Basically in those loops i am just checking if the url contains few keywords so that ican chnage the css to selected
$(document).ready(function(){
var userPage = /child\/(.+)/.exec(location.href)[1];
if( userPage.indexOf('show') != -1 )
{$('.profile').addClass('selected');}
if( userPage.indexOf('workbook') != -1 )
{
$('.selected').removeClass('selected');
$('.workbook').addClass('selected');
}
if( userPage.indexOf('gallery') != -1 )
{
$('.selected').removeClass('selected');
$('.gallery').addClass('selected');
}
if( userPage.indexOf('mylist') != -1 )
{
$('.selected').removeClass('selected');
$('.mylist').addClass('selected');
}
if( userPage.indexOf('Photos') != -1 )
{
$('.selected').removeClass('selected');
$('.photos').addClass('selected');
}
if( userPage.indexOf('profile/list') != -1 )
{
$('.selected').removeClass('selected');
$('.list').addClass('selected');
}
alert("hillo");

The way you've set it up the alert is not inside any if statement, so it should alert no matter what. If there is no alert you're script has errors, and I spot at least two :
You're assuming the url contains the string child/, if it does not your script will halt and not work, next you're assuming the output of that exec() is an array with at least two values, selecting the second value of that array, and if for some reason your url does not contain child/ there will be no second value in that array, and the script halts, but then again it already halted in the exec().
The second error is that the document.ready function is'nt closed, thats probably just a typo.
On the other hand you should figure out a way to do this more dynamically. You're using the same class as the url string you are checking for, so for most of the cases you could just use it directly in the selector, cutting your function down to just a few lines, something like:
$(document).ready(function() {
var url = 'http://somesite.com/child/gallery'; //just a test url
var userPage = url.indexOf('child/') != -1 ? /child\/(.+)/.exec(url)[1] : null;
if (userPage) {
console.log('has child in url');
$('.selected').removeClass('selected');
$('.'+userPage).addClass('selected');
}else{
console.log('not ok');
}
});​

It returns null in the first line of your code.
var userPage = /child/(.+)/.exec(location.href)[1];
and you must get this error ": Cannot read property 'indexOf' of null"
its better to check first whether the url has child or not then proceed.