Develop Reference

What is the browser neutral replacement for HTMLFormElement's all method?

I'm using an institutional (ie, any fix will have to be on my side) website that is IE specific, but I want to use it with Safari. The website mostly works, but at one point I get the following error in my console:
Uncaught TypeError: Object #<HTMLFormElement> has no method 'all'
When I dig into the Javascript the error is coming from:
function fnFocus() {
var frmCtl = document.frmAddEditAdultPosition ;
if(frmCtl !=null) {
var ctlFN = frmCtl.all("txtFirstName") ;
ctlFN.focus() ;
}
}
Calls to the all method are scattered throughout the code.
My plan, is to use proxypy to fix the Javascript as it comes in. I'm assuming that the all method is something IE specific, but I don't know what I should replace it with.

The elements collection:
frmCtl.elements["txtFirstName"] // Might be another collection if there are duplicate fields of that name
or getElementsByName:
frmCtl.getElementsByName("txtFirstName") // Always a collection
or querySelector:
frmCtl.querySelector('[name="txtFirstName"]') // Gets the first match
or querySelectorAll:
frmCtl.querySelectorAll('[name="txtFirstName"]') // Always a collection

Unable to create a MozillaBrowserBot object

I tried to get the MozillaBrowserBot object in mozilla js. But it is not giving the object. I used the code as below:
function externalApplication(){
var wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
alert("wm: "+wm);
var contentWindow=wm.getMostRecentWindow('navigator:browser').getBrowser().contentWindow;
alert("contentWindow: "+contentWindow);
//I am not gettting this pageBot object
var pagebot=new MozillaBrowserBot(contentWindow);
alert(pagebot);
}
I want to add the find option to the xpath checker. If the MozillaBrowserBot is related to selenium IDE then is there any possibility to get the pagebot object?

Judging by Google search results, MozillaBrowserBot is something that's defined by Selenium IDE. Also, it is apparently defined in the content page you got, not in the context where your code executes. That means that the proper invocation would be:
var pagebot = new contentWindow.MozillaBrowserBot(contentWindow);
This is based on a bunch of guesses of course since your question doesn't provide any context information whatsoever.

jQuery SVG plugin transform animation error

I'm trying to use the jQuery SVG plugin to animate some stuff — scaling and whatnot. I'm totally new to SVG.
var params = {};
params['svgTransform'] = ['scale(1)', 'scale(1.5)'];
$('#TX', svg.root()).animate(params);
This is copied almost verbatim from the developer of the plugin.
Yet when it runs, I'm getting this:
4TypeError: 'undefined' is not a function (evaluating 'f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration)')
Any ideas?

I think you should check for existence of an element with ID="TX" in your SVG document.
Anyway, I must say that sometimes I found very difficult to remember where to code specific behaviour: there are so many choices, among XML (plain SVG), plain JavaScript+DOM (but what DOM?), jQuery specific, jQuery+SVG.... And all of these with their details... It's daunting! I hope it will be rewarding in the end.
BTW I found that Chrome give a good IDE to workout problems (I'm on Linux now...). Hit Ctrl+Shift+I to enter the debugger and see whatever error...

maybe it doesn't support array inside animate arg object. can you try :
var params = {};
params['svgTransform'] = 'scale(1.5)';
$('#TX', svg.root()).animate(params);

"SCRIPT438: Object doesn't support property or method 'url' " in IE only

I am getting the following error in IE (but not Firefox):
SCRIPT438: Object doesn't support property or method 'url'
AjaxSetup.js?version=7b8dcb65-17d1-437f-9594-0621c779427c, line 28 character 2
There are several other posts with errors like this (for other objects besides url), but all of them seem to have answers along the lines of "such a function doesn't exist in jquery" or "such a function is invalid to use in this context", and neither seems to apply to my situation at least as far as I can tell.
The function containing the line number that the error is referring to is:
function redirectToLogin() {
var redirUrl = $.url().attr("path");
if ($.url().attr("query").length > 0) {
redirUrl += "?" + $.url().attr("query");
}
top.window.location = "/Shared/Logout?redir=" + encodeURIComponent(redirUrl);
return;
}
where line 28 is the second line of the function above.
More strangely, while on the offending page (from which the above function gets called), when I type $.url() or $.url().attr("path") into the IE Developer Tools console, it returns the correct object and string, respectively. The values also seem to stay correct if I "watch" them.
Any help would be much appreciated!
EDIT:
I found a workaround:
function redirectToLogin() {
top.window.location = "/Shared/Logout?redir=" + encodeURIComponent(location.pathname + location.search);
return;
}
This seems to work and achieve the same thing, so I'm posting it in case it helps someone. However, I would still be curious to find out why the original code using jquery was not working.

I would guess if you say it works in the console that the code is trying to use it before $.url() is initialized. Is the url JavaScript included before the AjaxSetup file?

IE Object doesn't support this property or method

This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com

In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.

Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.

Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.