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"/>

Invalid argument JavaScript exception in IE 8 issue with ExtJS in moveItem function

Below is a code snippet from the file ext-all-dev.js. The JavaScript exception below only happens in Internet Explorer 8 (IE). I have not tried any other versions of Internet Explorer. When I place a break-point on this line of code when running my application, the browser freezes in IE. So I don't have a way to troubleshoot this in IE. Is there an easy way to tell what code might be calling this line? I'm getting a sense that some drag and drop functionality may be causing this (because of the function comment), but that's a guess. My only option right now is to start tracing backwards using Google Chrome or Mozilla Firefox. I'm just looking for advice on troubleshooting unless you know what might cause this.
/**
* Moves Component to the provided target instead.
* #private
*/
moveItem : function(item, target, position) {
target = target.dom || target;
if (typeof position == 'number') {
position = target.childNodes[position];
}
target.insertBefore(item.el.dom, position || null); // line 51942
item.container = Ext.get(target);
this.configureItem(item);
},
Exception:
Invalid argument.
ext-all-dev.js line 51942 character 9

Placed the tree drag and drop plugin fully qualified class name into the requires config.

IE8 and SmoothGallery: Just getting script errors

I am using Jon Designs SmoothGallery on a website for one of my clients. The only problem is that I get a script error in IE8 when trying to go to the next image. I have checked this gallery in all major browser, and yet again, IE is the one where it doesn't work.
What a surprise.
I have been trying to find out what the problem was, but I only get an error in the eval-function of the mootools library which the gallery is based on, so no luck there.
Is there any way to set a "All-Exceptions Breakpoint", simular to setting one in Xcode, so that I could find the code that it actually hangs up on? Or does anyone know what is actually going on here?
The site is http://internetvolk.de/tische and the JS file responsible for the gallery is http://internetvolk.de/typo3conf/ext/rgsmoothgallery/res/scripts/jd.gallery1010.js
Thank you in advance,
Tobias Timpe

you are using a really old version of mootools - 0.89 or 1.0, if I am not mistaken. it's eval packed via dean edwards' PACKER, which makes it particularly hard to debug.
the instantiation code itself is somewhat awful and monkey patched:
function startGallery17() {
if (window.gallery17) {
try {
var myGallery17 = new gallery($('myGallery17'), {
timed: false,
showArrows: true,
showCarousel: false,
textShowCarousel: 'Thumbnails',
embedLinks: false,
lightbox: true
});
var mylightbox = new LightboxSmoothgallery();
} catch (error) {
window.setTimeout("startGallery17();", 2500);
}
} else {
window.gallery17 = true;
if (this.ie) {
window.setTimeout("startGallery17();", 3000);
} else {
window.setTimeout("startGallery17();", 100);
}
}
}
window.onDomReady(startGallery17);
the use of strings in setTimeouts causes evals here also, the try blocks will prevent you from getting any useful error feedback either.
if you want to get to the bottom of this, get rid of these hacks, load up say, this version of mootools - https://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js - still very old but newer than yours, or if possible, try 1.12 and see if debugging becomes easier.
then get rid of the try/catch blocks, use window.addEvent('domready', fn) to start your code - or if reliant on images being loaded, consider window.addEvent('load', fn) instead.
if all you do on the page is stack up some images with a next/previous, why not use latest mootools with a new plugin - there is NOTHING good about what you have picked.
eg, read this tutorial I wrote on how to do it: http://fragged.org/tutorial-write-a-small-content-slider-class-in-mootools-and-extend-it_1321.html or look on the forge: http://mootools.net/forge/ for something packaged
should be fine with 1.4.5 (latest).
keep in mind the version you are currently using will likely break ie9 and latest gecko

Raphael JS - paper.remove

Just getting started with Raphael.
Now I'm finding that paper.remove() is generating a script error:
"SCRIPT5009: 'removed' is undefined
Is this a script bug?
My variable paper is initialized thus:
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
My HTML body has:
<div id="canvas_container"></div>
This is more info --
I am using Raphael 2.0 which I just downloaded again. Running IE9. Following is the Raphael JS function that is highlighted as the problem:
R.prototype.remove = function () {
eve("remove", this);
this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
for (var i in this) {
this[i] = removed(i);
}
};
the line ... removed(i) is highlighted --> SCRIPT5009: 'removed' is undefined
BTW I am new to this forum. Is there a way to respond to a thread other than "Answer Your Question"?

I've run across this a couple of times. The line 4443 method as suggested by sudoko-san does work in browsers but not backwards compatible with IE-7 & 8 (the whole point of using raphael).
Another work around is to implement the following code in your javascript:
try{
paper.remove();
}
catch (error) {
// this catches the error and allows you to proceed along nicely
}
That's it!

I don't know if you've supplied enough information to answer this question.
What version of Raphael are you using?
On what browser?
Is it being loaded up correctly - can you create any Raphael objects?
If all you're doing is deleting the paper, see the fiddle below.
JSFiddle
It seems to work fine for me with Raphael 1.5.2
Hope that helps (even slightly).

JavaScript "INDEX_SIZE_ERR: DOM Exception 1" when doing init() on DHTMLx grid object

I use a Joomla! plugin that takes advantage of the DHTMLxGrid library, particularly version 1.5. I have problem when opening the page that uses this DHTMLx Grid functionality, everything works fine with Firefox, however, when I open the page in Chrome (7 and 8) the browser hits an exception on line 60 of the dhtmlxgrid.js file, triggered by the initialization of the grid. I have included a few lines of code, I know this is very limited data, but this is what I was able to to put here as a summary. I hope someone encountered a similar problem. I have limited knowledge of JS, so any help is greatly appreciated.
If you need more specifics, let me know and I will try to include more data.
Thanks!
The php file:
function gridInit(){
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("http://mydomain.com//administrator/components/com_com/images/dhtmlxGrid/");
mygrid.setHeader("ID,Start Period,End Period,Price (USD)");
mygrid.setInitWidths("50,120,120,80");
mygrid.setColAlign("center,center,center,center");
mygrid.setColTypes("dyn,dhxCalendarA,dhxCalendarA,edn");
mygrid.setDateFormat("%d/%m/%Y");
mygrid.setColSorting("int,date,date,int");
mygrid.init(); //...hits exception at this point
//...
}
The js file:
//dhtmlxgrid.js...
this.hdr = document.createElement("TABLE");
this.hdr.style.border="1px solid gray";
this.hdr.cellSpacing = 0;
this.hdr.cellPadding = 0;
if ((!_isOpera)||(_OperaRv>=8.5))
this.hdr.style.tableLayout = "fixed";
this.hdr.className = "c_hdr".substr(2);
this.hdr.width = "100%";
//...
var hdrRow = this.hdr.insertRow(_isKHTML?2:1); //dhtmlxgrid.js:60 Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
//...

The error means an index is negative or too large. The line the error happens on is adding a row to a table, but there is a test for _isKHTML... I assume that is testing for konqueror, which was the progenitor of WebKit which Chrome is based on. Anyhow, try taking out that test and doing this instead:
var hdrRow = this.hdr.insertRow(1);
If that resolves the problem then the browser sniffing being used there is at fault, but if you don't have to support Linux running KDE then you should be fine without it.