We Keep Coding

Uncaught TypeError: Cannot read property 'options' of undefined javascript

Everything works fine but from time to time there is a problem with the function. This makes it impossible to click a button and select a value from list. I tried to debug it but nothing is returned in the console.
_getSimpleProductId: function (element) {
var allOptions = element.config.options,
value = element.value,
config;
config = _.filter(allOptions, function (option) {
return option.id === value;
});
config = _.first(config);
return _.isEmpty(config) ?
undefined :
_.first(config.allowedProducts);
}
Error occurs:
Uncaught TypeError: Cannot read property 'options' of undefined
I think I have to change my question to "What I'm doing wrong?".

you should null check element.config
var allOptions = element.config ? element.config.options : null;
It looks like it's not always defined in your code

Your problem is that element.config is undefined.
You can either go with Basem's anwser (which would totally work) or find the source of the problem.
To me it looks like you expect to have options for the rest of your code, so I would go with the second solution.
Cheers!

TypeError: $(...) is null - how to use noconflict()

i get error TypeError: $(...) is null.
<script>
$('w_pages').observe('change', function(){
parent.preview.location = 'W/preview/<?=$page['parent_id'] ?>/?p='+$('w_pages').value;
});
$('w_layout').observe('click', function(){
parent.preview.Tiny.showURL('S/layout/'+$('w_pages').value+'?ajax=true',true)
});
</script>
i read that it is because of a conflict. how do i wrap this in noConflict()

There is no conflict here.
You are using the dollar function of Prototype, which returns a reference to the element with id equal to its argument. If no such element exists in the page it returns null, which in turn causes the TypeError.
I don't know why no such element exists in your page or how to make the JS work like it should, but you can avoid the immediate error by checking the return value before calling methods on it:
var wPages = $('w_pages');
if (wPages) {
wPages.observe('change', function(){
parent.preview.location =
'W/preview/<?=$page['parent_id'] ?>/?p='+wPages.value;
});
}
// The same for w_layout

i fixed it. i was indeed missing the element. thanx for putting me in the right direction.

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

I'm teaching myself AJAX to AJAXify my site. In my template, I have the following JS code to get some JSON data from a view then append the data to a div.
function filter(type) {
$.getJSON(
'/activity_stream/global-activity-stream/',
{xhr: "true", filter: type},
function(data) {
$('.mainContent').children().remove();
$(data).appendTo('.mainContent');
});
}
$(".btn").click(function () {
filter("recent");
});
}
I think my view is returning proper JSON but now data is not being added to the .mainContent div.
It gives this error:
Uncaught TypeError: Cannot read property 'ownerDocument' of undefined.

Make sure you're passing a selector to jQuery, not some form of data:
$( '.my-selector' )
not:
$( [ 'my-data' ] )

I had a similar issue.
I was using jQuery.map but I forgot to use jQuery.map(...).get() at the end to work with a normal array.

The same issue came up for me inside of $elms.each().
Because:
the function you pass to .each(Function) exposes (at least) two arguments; the first being the index and the second being the element in the current element in the list, and
because other similar looping methods give current the element in the array before the index
you may be tempted to do this:
$elms.each((item) => $(item).addClass('wrong'));
When this is what you need:
$elms.each((index, item) => $(item).addClass('wrong'));

In case you are appending to the DOM, make sure the content is compatible:
modal.find ('div.modal-body').append (content) // check content

If you use ES6 anon functions, it will conflict with $(this)
This works:
$('.dna-list').on('click', '.card', function(e) {
console.log($(this));
});
This doesn't work:
$('.dna-list').on('click', '.card', (e) => {
console.log($(this));
});

In my case, this error happened because my HTML had a trailing linebreak.
var myHtml = '<p>\
This should work.\
But does not.\
</p>\
';
jQuery('.something').append(myHtml); // this causes the error
To avoid the error, you just need to trim the HTML.
jQuery('.something').append(jQuery.trim(myHtml)); // this works

Uncaught TypeError: Cannot call method 'show' of null

I am getting an :Uncaught TypeError: Cannot call method 'show' of null" error in a script which points out the error is somewhere in this area, see below:
// Show the correct more view images and if there are moreviews displayed, display the more views title
if (selectedmoreview !== null && selectedmoreview !== undefined && howMany > 0) {
selectedmoreviewtitle.show();
selectedmoreview.invoke('show');
} else {
if(howMany > 0){ selectedmoreviewtitle.hide(); }
}
spConfig.configureElement(dropdownEl);
Can anyone help me sort this out and have my functionality working? Some expert advice would be truly appreciated

Per request:
As far as I can see (and I only looked quickly) you are trying this line of code:
selectedmoreviewtitle = $('moreviews-title');
in the colorselected.js on row 204. And there's no element with id or class named 'moreviews-title'. So that's why it gets null.
Further more, you'd probably want to use class selector '.moreviews-title' or id selector '#moreviews-title'.

You check selectedmoreview, but you try to call selectedmoreviewtitle.show(). Since selectedmoreview isn't null selectedmoreviewtitle probably is.

Javascript - Cannot call method 'split' of null

I have a javascript error that occurs on my site, Im pretty sure I know why, but I dont know how to fix it!
here's the error:
Uncaught TypeError: Cannot call method 'split' of null
Here's my JS code:
$(function(e) {
if (document.cookie.indexOf("login") >= 0) {
$("a#loggedInUser").html( $.cookie("login").split("|")[0] );
}
});
I'm just trying to display the username stored in the "login" cookie. Now, im pretty sure the error is because the value returned sometimes isn't a string, then it doesn't have the split method, so it causes this error.
How can I fix that? Any ideas?
Thanks!

Well you can do something like this to set a default if the value is null.
var login = $.cookie("login") || "";
$("a#loggedInUser").html(login);
Also, if you do that you might not need the document.cookie.indexOf thing.

It's probably the case that $.cookie("login") is not returning a valid string. I think the problem is that it's possible that: document.cookie.indexOf("login") >= 0 is true but $.cookie("login") is still null or undefined. It makes sense to use the same check e.g.:
$(function(e) {
var cookie = $.cookie("login");
if(cookie) {
$("a#loggedInUser").html( cookie.split("|")[0] );
}
});

Check the length of the cookie. This way you validate two things at once.
if (document.cookie.indexOf("login") >= 0 && $.cookie("login").length) {
$("a#loggedInUser").html( $.cookie("login").split("|")[0] );
}