JavaScript click function not triggering JSF action method immediately on IE

Question

I've recognized that when a click is done via JavaScript it won't trigger the action method immediately on IE, instead the browser wait's until the code has gone through the function where click is made and after that triggers the action method.

On Chrome the action method is triggered immediately when the click is done.

Here is an example xhtml code:

<h:form>
    <ace:pushButton id="button1" action="#{someBean.someFunction1}" label="Button1" />
</h:form>
<h:form>
    <ace:pushButton id="button2" action="#{someBean.someFunction2}" label="Button2" />
</h:form>
<h:form>
    <ace:pushButton id="button3" action="#{someBean.someFunction3}" label="Button3" />
</h:form>
<h:form>
    <ace:pushButton id="button4" action="#{someBean.someFunction4}" label="Button4" />
</h:form>

And here is an example javaScript code:

function setTestButtonsOnclickFunctions() {
    var button1 = document.querySelector('[id*="button1_button"]');
    var button2 = document.querySelector('[id*="button2_button"]');
    var button3 = document.querySelector('[id*="button3_button"]');
    var button4 = document.querySelector('[id*="button4_button"]');

    button1.onclick = function() {
        button2.click();
        var someRandomVariable = 10;
    };

    button2.onclick = function() {
        var someRandomVariable = 10;
    };
    button3.onclick = function() {
        button4.click();
        alert("Button 4 clicked in JavaScript");
        var someRandomVariable = 10;
    };

    button4.onclick = function() {
        var someRandomVariable = 10;
    };
}

(function($) {
    $(document).ready(setTestButtonsOnclickFunctions);
})(jQuery);

Note:

As you can see there is an alert in the button3 onclick function.
It is there because I recognized that when the alert is triggered the action method is triggered.
But without it, the action method is triggered after the onclick function has finished.

There is also the someRandomVariable to show that when the code has passed the click() method the action method isn't triggered on IE, but is triggered on Chrome. This makes it easy to debug.

Why there is two buttons is because it is an easy way to test the click() method.

Questions:

1. Why doesn't the action method trigger on IE immediately?
2. Why doesn't the click() method trigger the action method on IE as it does on Chrome?
3. Is there a way to trigger the action method immediately on IE when the click() method is runned, without using an alert?

For the last question you might wonder why somebody would even want that.

Well I have a scenario where I would want to run a action method when the window closes.
I use the beforeunload method in JavaScript but the action method is never triggered on IE because of the things I mentioned above.

Another question:

Is there a way to trigger an action method inside a beforeunload event on IE?

Miscue

wouldn't that code cause an infinite loop of clicks? btn1 calls 2 and btn2 calls one, they would just keep calling each other.... – Arbitral

@Arbitral true, but whats wierd is that it didn't. But I will change the question because of your point. – Miscue

And you added beforeunload which changes the dynamic of the original question since browsers kill things with beforeunload since they are trying to make the page unload fast. So no, there is no way to guarantee that a call will be made on unload of a page. – Arbitral

@Arbitral it does not change the dynamic of the questions because it works in the same way if there is a beforeunload or not. – Miscue

@Arbitral I flagged your comment because it can mislead others to understand the question. – Miscue

Answer 1

// Try this

(function($) {   

setTestButtonsOnclickFunctions()

})(jQuery);

Dou

This answer this just throw an error. Maybe ';' is missing? And I don't think this is the cause of why IE behave in a different way. – Miscue

So you removed document ready? why.... Does not make any sense how it would make a difference. – Arbitral