The Dev Pages » Javascript and AJAX

‘Length’ attribute or column name in database can clash with jQuery and javascript

Nate Admin — Thu, 13 May 2010 05:45:01 +0000

In what was one of the worst bugs I have come across in a while, mainly my fault, I learned the hard way that using the name ‘length’ for an object attribute may be a bad idea. Along the same lines as using ‘window’ as an attribute name. These things tend to cause clashes in framework and javascript libraries.

So more specifically with the yii framework, which uses jQuery to handle gridview filtering, I debugged the hell out of other people’s JavaScript code until I learned from line 59 on the jQuery core library that the each method on a jQuery object uses the length property of a jQuery and javascript object to iterate over its properties.

It goes as follows. Say I have a ‘windowdrape’ table and object. This has a length and width, in inches, of how big the drape is. So I make a ‘length’ column. The yii framework hands my model object off to javascript. So now in javascript I have a windowdrape object. So WindowDrape.length to jQuery is how many attributes the WindowDrape has. I expect it to be how long the window is in inches. So I set it to 98, and now all of a sudden jQuery will iterate the thing 98 times, and the attributes on WindowDrape are all messed up because of the bogus length attribute.

The lesson here, especially if you use the yii framework is Don’t name a column or model object attribute ‘length’. These things are also why I avoid using ‘name’ or ‘window’ etc. for attribute names.

jQuery Dialog not showing content after being hidden

Nate Admin — Fri, 16 Jan 2009 01:37:59 +0000

So the autoOpen:false on the jQuery dialog instantiation doesn’t hide the div fast enough sometimes. You can skirt this by setting the display to none (display:none) on the dialog div you made, but then when you actually do load up the dialog after someone clicks an anchor, or whatever, the content of the div doesn’t show up because the child divs have all inherited the display:none;

Just call the show method after the dialog load to skirt this.

$(”#detailPopin”).dialog(’open’);
$(”#detailPopin”).show();

Error: ‘jQuery.event.special[...].teardown’ is null or not an object

Nate Admin — Mon, 27 Oct 2008 19:03:18 +0000

Apparently, when the page is left, jQuery tries to remove event listeners. When this happens, the jQuery.event.special[type].teardown is null or undefined in a line of the jQuery source. This appears to be a dialog error, or caused by the dialog somehow. The jQuery error is found on line 1948 using the latest release, 1.2.6. (For me this is line 1955 but my jQuery has been a little modified).

I added the following to the if on line 1948 – || !jQuery.event.special[type].teardown. This fixes the jQuery error on line 1948.

if ( !jQuery.event.special[type] || jQuery.event.special[type].teardown.call(elem)

 === false ) {

becomes

if ( !jQuery.event.special[type] || !jQuery.event.special[type].teardown

 || jQuery.event.special[type].teardown.call(elem) === false ) {

This makes it so if the teardown function is undefined, an error won’t occur.

I am fairly certain that this fix doesn’t break anything else, but no guarantees. I didn’t spend a lot of time going into what elem.removeEventListener or elem.detatchEvent does because it looks like the eventListeners are not very consequential. Maybe a little bit more overhead. All I know is when I added the extra if, things worked great from that point on. And what I call a jQuery error could very well be an IE error, a user error (me, of course), etc. I happen to love jQuery.

jQuery Dialog error in IE7. Runtime error: invalid argument

Nate Admin — Thu, 31 Jul 2008 17:35:52 +0000

So if your using jQuery UI dialogs, you may run into issues with IE 7. Apparently the value of a usually ‘undefined’ javascript variable can get set to ‘NaNpx’ in IE7. I had to change the jQuery base code to get a dialog ui component to work.

I was getting the following runtime error: “Line: 1102 Error: invalid argument.”

This error comes from code around line 1101 in jquery-1-2-6.js.

So I think my version of jQuery had already been modified or comes from an older or different source. My code follows, but the most recent 1-2-6 jQuery script has code that is like the comment Dom left (thanks – that code looks more like the most recent release of jQuery).

/* MODIFIED 7/31/08 BY NATE

* WAS THIS, but IE7 was throwing an error

if ( value != undefined )

elem[ name ] = value;

*/

if ( value != 'NaNpx' && value != undefined)

elem[ name ] = value; //NATE - Sometimes the value would come up as NaNpx in

IE and causes an error

With Internet Explorer, Javascript setAttribute(’style’, ’something’) doesn’t work in IE

Nate Admin — Thu, 03 Jul 2008 18:08:11 +0000

If you try and set the style attribute of a DOM element with Javascript, the following code WON’T WORK IN IE:

yourelement.setAttribute('style','left:150px; top:150px;');

Instead use:

yourelement.style.cssText = 'left:150px; top:150px;';

Thanks to Rob on this page

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

http://blog.throbs.net/

Javascript – Find height, position of scroll height in browser – great site

Nate Admin — Thu, 03 Jul 2008 17:26:37 +0000

For finding scroll height while being cross-browser compatible. This site was perfect for what I was doing.

http://www.codehouse.com/javascript/articles/scroll_area/

javascript substring is not a function – check your variable content

Nate Admin — Tue, 24 Jun 2008 16:44:34 +0000

You’re trying to get the substring of a number, or something else, maybe undefined.

trimAll(document.getElementById(”email”).value.length)

should be

trimAll(document.getElementById(”email”)).value.length

Beware the affect of the base href= on AJAX requests, and IE. Permission denied to call XMLHttpRequest open method

Nate Admin — Fri, 30 May 2008 13:54:30 +0000

The base href effect on XMLHtttpRequest.open (in IE)

Imagine that. If your base href is set to something weird, the ajax requests will get Access errors indicating “Permission Denied to call method yourXMLHttpRequestObject.open” Errors! But only in IE.

In IE, with AJAX requests, your url root must match your base href. base ref=”http://www.mydomain.com should be the same as the base url in xmlHttp.open(”GET”, “http://www.mydomain.com/MyRemoteServices/MyRemoteOrderService.cfc?
method=getOrderInfoXML&userid=1234″, true), or you can use relative urls.

Example I had:

//The XMLHttpRequest is named xmlHttp here, xmlHttp = new XMLHttpRequest()

//If the base href is set to something other than the server root, the AJAX request

//thinks the request is coming from a different server, or something.

//Permission denied to call XMLHttp.open with the following

//SET IN HTML HEAD 	 - NOT HTTPS!

xmlHttp.open("GET", "https://mydomain.com/MyRemoteServices/MyRemoteOrderService.cfc?

method=getOrderInfoXML&userid=1234" , true);

//Now when the base href is set to the server root, no problems //SET IN HTML HEAD - HTTP! xmlHttp.open("GET", "https://mydomain.com/MyRemoteServices/MyRemoteOrderService.cfc? method=getOrderInfoXML&userid=1234" , true);

Issues when www isn’t mapped to your home url

Another issue that can happen with access denied errors with your AJAX request is when your www doesn’t resolve to the same url as your root. I.E. http://www.yourdomain.com isn’t the same dns entry as http://ourdomain.com, even if they both eventually go to the same server ip.

Error: Happens when your session is in http://www.yourdomain.com and your AJAX request points to http://yourdomain.com (if your www subdomain doesn’t resolve to http://yourdomain.com).

//I'm on a http:://www.mydomain.com page, and I get an error with this line

xmlHttp.open("GET", "http://mydomain.com/MyRemoteServices/MyRemoteOrderService.cfc?

method=getOrderInfoXML&userid=1234" , true);

// I'm on a http:://mydomain.com page, this line will work

xmlHttp.open("GET", "http://mydomain.com/MyRemoteServices/MyRemoteOrderService.cfc?

method=getOrderInfoXML&userid=1234" , true);

Javascript variable names and ‘missing ; before statement’

Nate Admin — Thu, 22 May 2008 18:17:07 +0000

So after being confused as to why I kept seeing the javascript error ‘missing ; before statement’, I realized that javascript variables can’t begin with a number.

My code was:

for (int i = 0; i < top; ++i) {

   eval("form." + fieldsArray[i] + ".value");

}

fieldsArray contains a string ‘0to99scans’ referring to a form input ‘0to99scans’. This should have been something like ‘zeroTo499scans’.