PDA

View Full Version : Click event before fully loaded - 1.0.1a



MarkT
7 Jun 2007, 2:39 PM
I don't know if anyone else has already mentioned this or not. I have a complicated page with multiple widgets - BorderLayout, LayoutDialog, JSONView, a Toolbar, etc. While the page is in the process of initializing, if I click on the JSONView's element, it generates an error. In Firebug it says something like Ext is not defined. IE7 says a runtime error occurred. Error: Object required. The function that threw the error seems to be Prototype's Event pointerX.

I assume the cause is related to the fact that Prototype is loaded, and handling the event, but Ext hasn't finished yet, so the chain is broken.

I'm looking forward to using the new Stand Alone feature. :)

Perhaps a stop gap should be added somewhere to prevent the events from propagating until all the objects are ready?

MarkT
7 Jun 2007, 3:20 PM
Small follow up - the location of the mouse also seems to play a part. If I click but keep the mouse in place, the error doesn't seem to happen. If I click and then move my mouse away, say to click on the "reload" button, the error happens.

The call stack looks like:

Ext.EventManager listen h(e) calls Ext.EventObject.setEvent(e)
setEvent calls this.xy=E.getXY(e)
From the prototype-adapter.js page: Ext.lib.Event getXY calls Event.pointerX(e)
From the Prototype 1.5.1 file Event.pointerX fails.

I don't know if that helps or not, but that's all I know at this point. It may be a bug in Prototype for all I know. LOL

It is a lot easier to duplicate the error with IE7 than Firefox. I just click on the JSONView's element, not on one of the nodes, then move my mouse to the reload button and click it. As the page starts to reload, the error pops up. I wonder if IE7 is firing an event from before the page reloads on the newly loading page? I wish I knew more about IE's event handling.

Since it only happens while the page is loading, I have a theory. I click the page, but IE7 is busy doing things like loading the JSONView data, so the event doesn't get handled until after I've moved the mouse off the page. One can't get the pointerX when the pointer isn't over the page, right?

jack.slocum
7 Jun 2007, 9:55 PM
Try switching to one of the other adapters and see if you get the same error. Sounds like a bug in prototype. As long as the handers are attached in an onReady/on('load') block, there's really no way Ext would throw an error.

gimbles
8 Jun 2007, 10:50 AM
I'm getting the same error (in IE only), but I don't have to click, I just have to be moving the mouse during the page load. The error is coming from the same spot (line 2215 in prototype.js).

I'm trying to move from prototype to ext, and the problem began occurring right after I included the ext scripts.

Firebug tells me the function call to prototype.js Event.pointerX() stems from:

"ext-prototype-adapter.js" getViewWidth (line 11) > "ext-all.js" EventManager (line 17) > "ext-all.js" EventManager (line 17)

Gonna try some other tricks, I'll see what I come up with.

MarkT
10 Jun 2007, 1:59 PM
I think I've been able to stop the error. I felt it had something to do with things not loading correctly, so I moved the script tag that loaded ext-all.js to the bottom of the page, and moved my onDocumentReady line, too. That seemed to be enough for IE7 to load and init Prototype, Scriptaculous, and the prototype-adapter.

I have not gotten the error since.

I guess this is why everyone suggests building a single script file will all the parts you need, in the correct order. :)

I also had IE set to check for a new version of files on every page load.

Patrick Fox
10 Jun 2007, 7:16 PM
I'm getting an error similar to gimbles. In IE7, when the page is loading, when I move the mouse, I get an error stating "Object Expected" on line 1, which suggests an event error(most likely onmousemove or on mouseover). If I don't move the mouse, there's no problem.

MarkT
11 Jun 2007, 1:59 AM
I've found a couple postings on the Internet about IE7's ready state problems. They talk about problems altering the DOM too soon, etc. I also read something about the "defer" method not working correctly like it did with IE6, what ever that means.

Sounds like a whole new set of hacks and workarounds will have to be created for IE7. :(

I'm so glad I'm a Firefox user.

gimbles
11 Jun 2007, 1:45 PM
I've found a couple postings on the Internet about IE7's ready state problems. They talk about problems altering the DOM too soon, etc. I also read something about the "defer" method not working correctly like it did with IE6, what ever that means.

Sounds like a whole new set of hacks and workarounds will have to be created for IE7. :(

I'm so glad I'm a Firefox user.

Yea but I'm not glad that my users arent!

gimbles
11 Jun 2007, 2:25 PM
Ahah! It surfaces in the ext interactive API thingy too. I was just browsing the "Examples and Demos > Toolbar and Menus > Toolbar and Menus" example, and I switched it to prototype+scriptaculous library, and then move the mouse around in the content frame while its loading. In IE7 I get the error (Line 2215, character 5, etc...).

See it?

trbot
22 Jun 2007, 12:22 PM
Hi all,

This is my first post, and normally I don't spend any time posting on forums but you guys helped me chase down the lead, and after solving it I thought I would let you know.

It turns out it was a small bug in Prototype. Properties of the document object are accessed in two functions (pointerY and pointerX) in prototype.js, without checking if the document object currently exists.

It seems to call these functions while loading the page; when the document object isn't accessible.

The two errors are on lines 2215 and 2220.

Modifying the lines to check for nulls and return appropriate values:...

Original code:


pointerX: function(event) {
return event.pageX || (event.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
},

pointerY: function(event) {
return event.pageY || (event.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));
},


Corrected code:


pointerX: function(event) {
if (!document || !document.documentElement || !document.body)
return 0;

return event.pageX || (event.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
},

pointerY: function(event) {
if (!document || !document.documentElement || !document.body)
return 0;

return event.pageY || (event.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));
},


I hope this helps any of you still struggling with this!

gimbles
26 Jun 2007, 2:08 PM
Well we always knew the bug was in prototype, we already adressed that. The problem is that Ext is calling that function for some reason (who knows).

trbot
26 Jun 2007, 8:39 PM
Sure, but at least there's a fix!

MarkT
9 Jul 2007, 1:47 AM
I tested the fix with IE7 and Firefox, and it worked just fine. I'll be able to test Safari and Opera in a few days.

I'm wondering if the fix shouldn't be placed in the Ext adapter code rather than Prototype's. That way updates to Prototype like the recent release of v.1.5.1.1 won't require patching.

gimbles
16 Jul 2007, 12:50 PM
I'm wondering if the fix shouldn't be placed in the Ext adapter code rather than Prototype's. That way updates to Prototype like the recent release of v.1.5.1.1 won't require patching.

That's what I was thinking, I always considered that the problem should be approached on EXT's end