We Keep Coding

JS error on Chrome 57+ for RichFaces application "Cannot read property 'switchToItem' of undefined"

I've a jsp page with tabs. and sometimes an error occurs (when I press a tab) "Cannot read property 'switchToItem' of undefined"
Uncaught TypeError: Cannot read property 'switchToItem' of undefined
at init.__onHeaderClick (packed.js:6102)
at HTMLTableCellElement.<anonymous> (packed.js:1333)
at HTMLTableCellElement.dispatch (jquery.js:846)
at HTMLTableCellElement.eventHandle (jquery.js:722)
as I understand the error happens in packed.js (this is a js-file packed by richfaces of version 4.3.4). I've looked inside this file and found that RichFaces try to find a list of tabs. these tabs are located in property "rf" (element[richfaces.RICH_CONTAINER]), but in moment when I pressed a tab, there was no property.
This bug reproduce in chrome v.57, in version 56 it doesn't reproduce.
Could you help me with some advice, how it can be fixed?
some technical details:
I use xmlns:rich="http://richfaces.org/rich" <rich:tabPanel> tag in my jsp page
in pom.xml <richfaces.version>4.3.4.Final</richfaces.version>

James G, you have a mistake in richfaces.js
richfaces.$$ = function(componentName, element) {
while (element.parentNode) {
var containerId = element.getAttribute(richfaces.RICH_CONTAINER);
if (containerId && containerId !== "" && !!richfaces.COMPONENT_MAP[containerId] && richfaces.COMPONENT_MAP[containerId].component.name == componentName) {
return e.component;
}
else {
element = element.parentNode;
}
}
};
There is no e. You need change it to
...
return richfaces.COMPONENT_MAP[containerId].component;
...

Sorry I don't have the reputation points to make this a comment.
I don't know if google chrome knows about this problem or would be willing to fix it. Our response to this is to patch RichFaces 4.3.7.Final javascript to not use the adhoc dom element property but a global map instead and then deploy our own richfaces jar to our production environment at the end of the month (after testing). I don't have to ability to deploy this to central repo but if you wanted to see the direct changes I made you can see my commits (https://github.com/JamieGHamilton/core). If chrome fixes the problem then this won't be an issue but I'm not counting on that.
So far the changes I made work perfectly in chrome (and other browsers)
Update: I've included the fix found by dennyDarko - thanks for this. My understanding is that the Chrome 58-beta doesn't produce this behavior so for some affected apps, the admins may choose to wait.

This might he an issue of Chrome 57. Try Chrome 58 Beta.

I had the same issue with Richfaces 4.5.17.Final and Chrome 92.
Additionally there was the following log message:
<jsf.non_displayed_message> <WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.), detail=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.)]>
So changing body to h:body in the main XHTML file has resolved the issue.
And h:head contains <h:outputScript name="jsf.js" library="javax.faces"/>

Unable to get property 'style' of undefined or null reference but works in another server

I have a classic asp project. In one of my pages i have to call a javascript function. That call does not have any problem and works fine on my test server (not localhost, just a server to test he project). But when i deploy it to the actual server, that function does not work. I call this function in onload event.
That function has this type of lines (i cannot write the whole code, because of the company that i work for, does not allow it)
document.getElementById("R6C2_1").style.display = 'block'
document.getElementById("R6C2_2").style.display = 'none'
....
When I try to debug it on IE10, i got "Unable to get property 'style' of undefined or null reference" error. After that, the elements in javascript function are not load. They are not seen on the page.
My main problem is, as i mentioned before differences between servers. I do not understand why it works on one server, but not on another server.

While it's not possible to determine the issue from this information alone, you should look into:
Whether the elements you're looking for actually exist when the code is invoked (use browser debug / breakpoints to look at the page the moment the code is invoked).
If they exist, check if they have the ID you expect (e.g R6C2_1) - if not, why? who creates these IDs? could be a server configuration issue.
Do a debug using the app from each server, and look at the page / DOM, see if there are differences or check if the code is invoked at different times.
These could lead you to pinpoint the issue. Good luck!

In case the elements just take time to be created, you can just wait until they are present:
function ExecuteWhenExists() {
var R6C2_1 = document.getElementById("R6C2_1");
var R6C2_2 = document.getElementById("R6C2_2");
if (R6C2_1 && R6C2_2) {
R6C2_1.style.display = 'block';
R6C2_2.style.display = 'none';
} else {
window.setTimeout(ExecuteWhenExists, 100);
}
}
ExecuteWhenExists();
This will not crash when the elements do not exist, and will just keep trying to execute in a non-blocking way (polling every 0.1 seconds) until they exist.

Ace Editor: Uncaught ReferenceError: window is not defined

I have been looking for a solution to below described issue for a few days but I couldn't find anything helping...
I am using Ace editor on 6 different DIVs on a webpage (so I have 6 editors).
Basically everything works fine, I am able to create them, set them up (language mode, soft tabs, etc.) and manage their content once the user is done.
BUT I keep having the same error message in the console "Uncaught ReferenceError: window is not defined". I get it 6 times, 1 per Ace editor on the page.
Here is the JS I am using. divIdsArray is an array containing the 6 DIVs Ids.
function initAceEditorFields()
{
$(document).ready(function(){
for (var i = 0 ; i < divIdsArray.length ; i++){
var l_arr_splitted = divIdsArray[i].split("_");
var l_str_code = l_arr_splitted[2];//Each div id contains either "js" or "html" which i am retrieving here
var l_ace_editor = ace.edit(divIdsArray[i]);
l_ace_editor.setShowPrintMargin(false);
l_ace_editor.getSession().setUseSoftTabs(false);
l_ace_editor.getSession().setTabSize(4);
l_ace_editor.$blockScrolling = Infinity;
if(l_str_code == "js"){
l_ace_editor.getSession().setMode("ace/mode/javascript");
}else{
l_ace_editor.getSession().setMode("ace/mode/html");
}
}
});
}
I am loading the files: ace.js, mode-javascript.js and mode-html.js from the ace package.
I have tried with ace editor builds: "src-min" and "src-min-noconflict" from the github repo and I tested with Chrome, Mozilla and MS Edge but I always get the same error message.
It is strange as everything seems to be working fine (or at least as I want it too). I just don't want to leave these messages in the console when I go to production.
Any help will be greatly appreciated.
Thank you!

Your ace editor must be using web workers somewhere, then some function called inside a web worker is trying to access "window". The code you've shown us has no references to window. Scrutinize your other interactions with ace to see if you ever pass in a function that references "window" or jquery, or any other dependency in the global scope. If not, then the error in the console is outside your control I suspect.

how to access a backbone model via chrome console

Say for example, I have the following Javascript,
var User=Backbone.Model.extend({
});
var jt=new User({name:"jonathan"});
How would I access jt in the Chrome console?
>jt // doesn't work
>Backbone.... ?
thx

you have to make the jt variable global:
jt = new User({name:"jonathan"});
or
window.jt = new User({name:"jonathan"});
or just use the console while in the debugger and set a breakpoint on that line

Peter's answer will do the trick, but it is generally considered bad practice to start making things global. If it's just a quick thing that you plan on reverting, it's ok, but you have to be careful to remember to fix it.
Since you're using Chrome, you can make use of the powerful debugger. Just add a line with debugger right after you've set something you want to inspect.
var User=Backbone.Model.extend({
});
var jt=new User({name:"jonathan"});
debugger;
If you have the developer tools open, refreshing the page will basically set a break point at the debugger. You can then hit Esc to open up a console at the exact scope at which you put your debugger line.

Log to Firefox Error Console from JavaScript

Is it possible to add messages to the built-in error console of Firefox from JavaScript code running in web pages?
I know that I there's Firebug, which provides a console object and its own error console, but I was looking for a quick fix earlier on and couldn't find anything.
I guess it might not be possible at all, to prevent malicious web pages from spamming the log?

If you define a global function that checks for the existence of window.console, you can use Firebug for tracing and still plays nice with other browsers and/or if you turn Firebug's console tracing off:
debug = function (log_txt) {
if (typeof window.console != 'undefined') {
console.log(log_txt);
}
}
debug("foo!");

You cannot write to the console directly from untrusted JavaScript (e.g. scripts coming from a page). However, even if installing Firebug does not appeal to you, I'd recommend checking out Firebug Lite, which requires no installation into the browser (nor, in fact, does it even require Firefox). It's a script which you can include into any web page (even dynamically), which will give you some basic Firebug functionality (such as console.log()).

Yes, you can =P
function log(param){
setTimeout(function(){
throw new Error("Debug: " + param)
},0)
}
//Simple Test:
alert(1)
log('This is my message to the error log -_-')
alert(2)
log('I can do this forever, does not break')
alert(3)
Update to a real function
This is a simple hack, just for fun.

window.console is undefined in Firefox 4 beta 6 even if Firebug 1.6X.0b1 is enabled and open, probably because of privilege issues that others discuss. However, Firefox 4 has a new Tools > Web Console, and if this is open you have a window.console object and untrusted JavaScript code on the page can use console.log(). The Web Console is in flux (see https://wiki.mozilla.org/Firefox/Projects/Console), you may need to change settings named devtools.* in about:config , YMMV.

I would just install Firebug and use console.log. If you can't do that, though, you can always throw an error:
throw "foobar";
throw new Error("bazquux");
Of course, this will break you out of the code that you're currently executing, so you can't use it for detailed logging, but if you can work around that I think it's the only way to get something logged out of the box.

AFAIK, it is not possible. But if you are interested in how extensions in Firefox interact with the error console, check this out.

This function does not require any extension nor library. However it grants full privileges to the relevant website. No worries since you are the one developing it, right?
// Define mylog() function to log to Firefox' error console if such a
// thing exists
function defineMyLog()
{
// Provide a useless but harmless fallback
mylog = function(msg) { };
// return; // disable in production
if (typeof(netscape) === "undefined") {
// alert("Logging implemented only for Firefox");
return;
}
// The initial auth popup can be avoided by pre-setting some magic user_pref
// ( "capability.principal.codebase.p0.granted", "UniversalXPConnect"), etc.
try {
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
} catch (e) { // User has denied privileges
// alert(e.name + ": " + e.message);
return;
}
ffconsoleService = Components.classes["#mozilla.org/consoleservice;1"]
.getService(Components.interfaces.nsIConsoleService);
mylog = function (msg)
{
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
ffconsoleService.logStringMessage(new Date().toLocaleTimeString() + ": " + msg);
}
mylog("Firefox logging function has been defined");
// window.open("javascript:"); // this URL does not work anymore?
}

If you're interested, check out a script I wrote -- it's a "cheap" Firebug replacement that doesn't interfere with any normal console (like Safari or Chrome) but does extend it with almost all the Firebug methods:
http://code.google.com/p/glentilities/
Look under the hood and you'll see what I mean by "cheap". :-)
Combine it with YUI or json.org's JSON serializers to sorta replicate console.dir.
Firebug and Firebug Lite are definitely nicer GUIs, but I use my home-grown one all the time to retain logging safely even for production code -- without constant commenting & un-commenting,