PDA

View Full Version : How to Fire an Event (in FireFox) when load?



Ramesh.R
21 Oct 2009, 6:45 AM
Hi

I want to fire the click event when the page load.

I use



Ext.getDom('MyLink').fireEvent('onclick');


It will works fine in IE but not in FF.

Thanks in Advance.

Ramesh

Mike Robinson
21 Oct 2009, 6:48 AM
Show us the entire block of code in question.

If all that we have to look at is a single statement, it's impossible to say anything meaningful about it.

P.S.: If something like this "works in IE but not FF," then it's more proper to say that it "coincidentally, happens to work every time you tried it so-far" in IE, "but only because of a timing-hole that's not quite the same in FF." The DOM "onLoad" event, if properly trapped and utilized, works correctly in everything.

Ramesh.R
21 Oct 2009, 6:54 AM
Show us the entire block of code in question.

If all that we have to look at is a single statement, it's impossible to say anything meaningful about it.

P.S.: If something like this "works in IE but not FF," then it's more proper to say that it "coincidentally, happens to work every time you tried it so-far" in IE, "but only because of a timing-hole that's not quite the same in FF." The DOM "onLoad" event, if properly trapped and utilized, works correctly in everything.


Ext.onReady(function() {
//Used to initialize property related methods
Initialize()
// To remove the loading-mask after intialize all components
Ext.get('loading-mask').remove();
Ext.get('loading-content').remove();
Ext.getDom('MyLink').fireEvent('onclick');
});

function Initialize() {
Ext.get('MyLink').on("click", function() {
Ext.select('div.selected').replaceClass('selected', 'unselected')
Ext.get('MyLink').replaceClass('unselected', 'selected');
Ext.get('content').replaceClass('showCmp', 'hideCmp');;
Ext.get('ContentPanel').load("/Home/Index").addClass('showCmp');
});
}

hendricd
21 Oct 2009, 7:55 AM
@Ramesh.R--

Please post your code wrapped in VBulletin
tags. ;)

The HTMLElement.fireEvent method is not available on all browsers (IE).
Just call your onClick handler directly:

[CODE]Ext.onReady(function() {

function onClickHandler(){
Ext.select('div.selected').replaceClass('selected', 'unselected')
Ext.get('MyLink').replaceClass('unselected', 'selected');
Ext.get('content').replaceClass('showCmp', 'hideCmp');;
Ext.get('ContentPanel').load("/Home/Index").addClass('showCmp');
}

function Initialize() {
Ext.get('MyLink').on("click", onClickHandler);
}

//Used to initialize property related methods
Initialize()
// To remove the loading-mask after intialize all components
Ext.get('loading-mask').remove();
Ext.get('loading-content').remove();
Ext.getDom('MyLink').fireEvent('onclick');
onClickHandler(); //just do it !
});

Animal
21 Oct 2009, 8:04 AM
I've had an FR out for ages on this.

YUI have it, we don't.

A rudimentary implementation:



Ext.override(Ext.Element, {
fireEvent: (function() {
var HTMLEvts = /^(scroll|resize|load|unload|abort|error)$/,
mouseEvts = /^(click|dblclick|mousedown|mouseup|mouseover|mouseout|contextmenu|mousenter|mouseleave)$/,
UIEvts = /^(focus|blur|select|change|reset|keypress|keydown|keyup)$/,
onPref = /^on/;

return Ext.isIE ? function(e) {
e = e.toLowerCase();
if (!onPref.test(e)) {
e = 'on' + e;
}
this.dom.fireEvent(e, document.createEventObject());
} : function(e) {
e = e.toLowerCase();
e.replace(onPref, '');
var evt;
if (mouseEvts.test(e)) {
var b = this.getBox(),
x = b.x + b.width / 2,
y = b.y + b.height / 2;
evt = document.createEvent("MouseEvents");
evt.initMouseEvent(e, true, true, window, (e=='dblclick')?2:1, x, y, x, y, false, false, false, false, 0, null);
} else if (UIEvts.test(e)) {
evt = document.createEvent("UIEvents");
evt.initUIEvent(e, true, true, window, 0);
} else if (HTMLEvts.test(e)) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(e, true, true);
}
if (evt) {
this.dom.dispatchEvent(evt);
}
}
})()
});

mystix
21 Oct 2009, 9:19 AM
I've had an FR out for ages on this.

YUI have it, we don't.


i think i've +1-ed that one a couple of times too.
if you have the link to it handy i'd like to +1 it again to get it back on the radar.

hendricd
21 Oct 2009, 10:32 AM
@Animal -- Yeah, nice.

But, I suspect it leaves inline (DOM1) listeners in the dark though (too bad -- I say). Have you tested that theory yet?

Animal
21 Oct 2009, 10:45 AM
I haven't. But it should fire them. In theory, it's hooking into the DOM's own machinery. And firing an event is firing an event no matter how the listeners have been added.

Ramesh.R
21 Oct 2009, 8:01 PM
@Ramesh.R--

Please post your code wrapped in VBulletin
tags. ;)

The HTMLElement.fireEvent method is not available on all browsers (IE).
Just call your onClick handler directly:

[CODE]Ext.onReady(function() {

function onClickHandler(){
Ext.select('div.selected').replaceClass('selected', 'unselected')
Ext.get('MyLink').replaceClass('unselected', 'selected');
Ext.get('content').replaceClass('showCmp', 'hideCmp');;
Ext.get('ContentPanel').load("/Home/Index").addClass('showCmp');
}

function Initialize() {
Ext.get('MyLink').on("click", onClickHandler);
}

//Used to initialize property related methods
Initialize()
// To remove the loading-mask after intialize all components
Ext.get('loading-mask').remove();
Ext.get('loading-content').remove();
Ext.getDom('MyLink').fireEvent('onclick');
onClickHandler(); //just do it !
});



Thanks for ur reply Hendri, it works.

Animal
22 Oct 2009, 1:19 AM
i think i've +1-ed that one a couple of times too.
if you have the link to it handy i'd like to +1 it again to get it back on the radar.

Ticket #68

Hopefully, the Ext team can come up with something more flexible than that - it's just an illustration of the technique really.

It's used by VinylFox's grid plugin which allows drops from external apps like spreadsheets. I contributed some code to allow the plugin to programatically fire mouse events at the grid even though it is completely masked by a <textarea> element which catches any drop gestures. So the grid can me manipulated by the mouse "through" the textarea.

This could also fix that old problem where Fx.frame masks the element making it unclickable.