1

This is a simple scenario, the click event is working fine in Firefox but not IE. Let's go in the detail. I have a button which is like below:

<h:form id="theForm">
  <h:commandLink id="theButton" styleClass="button" action="#{theBean.doWork}"/>
</h:form>

When I try to invoke the click event of the button from JavaScript like this:

document.getElementById('theForm:theButton').click();

According to this thread, I am required to put the code below like this:

<script language="javascript" type="text/javascript">
  HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
  }

But when I have this code in my JavaScript, it really work in Firefox, but not in IE anymore. May I know how can I make it work on both IE and Firefox?

Community
  • 1
  • 1
huahsin68
  • 6,819
  • 20
  • 79
  • 113

3 Answers3

2

Try:

if(!HTMLElement){
var HTMLElement = Element;
}
HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
}

This should work for IE>=8, which uses Element to provide the same interface HTMLElement does in other browsers.

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • I tested this code in Firefox 16, it is not working. But Firefox 3.0.19 doesn't work. Any solution for Firefox 16? – huahsin68 Nov 03 '12 at 09:18
  • @huahsin68 So it isn't working in either one? Because I'm using 16 and this works. http://jsfiddle.net/xacns/ – Asad Saeeduddin Nov 03 '12 at 09:44
  • I have 2 machines here, so I tested on both version. It is not working in Firefox 16.0.2, but working in Firefox 3.0.19. – huahsin68 Nov 03 '12 at 09:51
  • @huahsin68 That is very strange, because I'm using 16.0.2, and when I open that fiddle I get an alert. Don't you? – Asad Saeeduddin Nov 03 '12 at 09:54
  • yes, the alert is working but the `theBean.doWork`, click event din't get trigger. – huahsin68 Nov 03 '12 at 10:02
  • @huahsin68 What is `theBean.doWork`? This is not mentioned anywhere in your question. Your question was about adding a method to trigger click events, and I have provided a way to do this. – Asad Saeeduddin Nov 03 '12 at 10:04
  • Yah, you got the point. I though by adding you solution into my code, I can trigger the `doWork` because it is working fine in IE, thus I am making the assumtion that by activating the click event, the `doWork` will get trigger. Anyhow, the question has been resolved. Thanks a lot. – huahsin68 Nov 03 '12 at 10:10
0

You can try this using jQuery:

$("#theButton").click(function() {alert("Handler for .click() called.");});
Himanshu Kumar
  • 541
  • 5
  • 14
0

Missed semicolon - IE not like that

<script language="javascript" type="text/javascript">
  HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
  };

and yes, be sure to have HTMLElement patched

var HTMLElement =HTMLElement===undefined?Element:HTMLElement;

zb'
  • 8,071
  • 4
  • 41
  • 68
  • Are you actually sure about that? This is no different from skipping the semicolon at the end of other lines. I don't remember IE being that strict - browsers attempt to fill it in automatically. – Ian Nov 03 '12 at 06:05
  • And you should give credit to @Asad who actually proposed the `HTMLElement` patch – Ian Nov 03 '12 at 06:06
  • i not sure if it last line - ` – zb' Nov 03 '12 at 06:06
  • Yes, you **should**, but you don't have to. And I don't think IE is complaining about something like that. http://mislav.uniqpath.com/2010/05/semicolons/ – Ian Nov 03 '12 at 06:07
  • @lan http://jsfiddle.net/oceog/Dj7ak/ click jslint here, i don't know how it in case of last line, but in case of not last line, ie fail without semicolon – zb' Nov 03 '12 at 06:07
  • Really? jslint is not some almighty javascript god, and javascript doesn't have the most strict semantics. – Ian Nov 03 '12 at 06:10
  • do you have IE ? i don't but i got complains from IE users several times when ; was skipped. – zb' Nov 03 '12 at 06:11
  • @eicto When I started learning javascript I ran all my snippets in IE, and I nearly always forgot my semi colons. Trust me, it doesn't break your code. – Asad Saeeduddin Nov 03 '12 at 06:13
  • @Asad when I got the complains about IE test fail in most cases it was missing semicolon. – zb' Nov 03 '12 at 06:15
  • I'm not sure what version of IE you used...maybe 5.5? Shouldn't matter, they aren't required and wouldn't break. Now, it is important to use them when you are using `()` around inline code, as it can be interpreted as a function call. – Ian Nov 03 '12 at 06:15
  • I can't test now, as i have no IE near me, but i think it was at least IE7 last time – zb' Nov 03 '12 at 06:16
  • Well I highly doubt simply putting a semicolon in fixed your problem. Unless you didn't include one for a `do/while` loop (which requires one), or something messy with `return` statements that can be troublesome if you don't use them correctly. Something like a variable declaration is the lease of anyone's worries when it comes to semicolons (but again, it depends on what comes before and after the line) – Ian Nov 03 '12 at 06:27