ansaurus

Question

Issue with DOM manipulation (blockUI or alert()) during a onchange request - prevents other event from firing.

Answer 1

A:

There's only going to be one event loop going at any given time in the environment of a single page. If your ajax calls are synchronous, then while one event is being handled then that's all the will be going on. If the browser were to trigger another event loop, well, then it wouldn't be single-threaded. But it is, so it doesn't.

Pointy 2010-05-06 19:18:34

I removed the ajax call from the example and used an alert instead which produce the same result (the second event not firing). Your explanation make sense since the alert is waiting for user input hence blocking the thread...but shouldn't the next event be queued?

jfrobishow 2010-05-06 19:46:53

well that's up to the browser ...

Pointy 2010-05-07 02:49:17

Then wouldn't onfocus cause the same thing?, as you can see in my other post onfocus is fired.

jfrobishow 2010-05-18 16:00:26

Try changing the onclick handler from just `save()` to `save(); return false`

Pointy 2010-05-18 16:18:26

Same thing, the onclick doesn't appear to be triggered at all. I've also tried returning true in doSomething() and adding a return true; to the onchange handler...to no avail.

jfrobishow 2010-05-18 17:46:24

Well it works fine for me. Using your exact code, it works fine. Both the onchange and the onclick handler are called.

Pointy 2010-05-18 21:00:19

Which browser are you using? I tried this in Firefox 3.6.4 and the latest Chrome on XP. Weird!

jfrobishow 2010-05-20 12:26:14

OK now I see what you're saying - I had commented out the "alert()" in "doSomething" for some reason I don't remember. When I un-comment that, I see the following: type in a text field and tab out - doSomething is called. Type in a text field then click the `<a>` - doSomething is called, but the save() is not called.

Pointy 2010-05-20 13:50:03

Well I don't understand why it happens. It seems that an alert() call from the "change" event handler is just dropping the "click" event completely. I've copied my test version of your code out to http://gutfullofbeer.net/so.html so you can play with it. If the alert() is disabled, then both event handlers get called.

Pointy 2010-05-20 14:05:38

IE8, Chrome, and Firefox all behave exactly the same way, for whatever that's worth.

Pointy 2010-05-20 14:07:08

Thanks for the "live" example so that it's easier to play with for everyone. I've noticed the same, all browsers behave the same way as if it's expected behavior. Doesn't make any sense though, I would expect onfocus to work the same way and be dropped yet it isn't.

jfrobishow 2010-05-20 16:16:53

Answer 2

A:

The following "fixed it" using onfocus for the link and the event is triggered. With an onclick it isn't.

This work:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"&gt;&lt;/script&gt;
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onfocus="save()">save</a>
</body>
</html>

This doesn't, the only different is the onclick which isn't firing when the onchange precedes it.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"&gt;&lt;/script&gt;
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onclick="save()">save</a>
</body>
</html>

jfrobishow 2010-05-06 19:51:33

ansaurus

tags:

views:

answers:

Issue with DOM manipulation (blockUI or alert()) during a onchange request - prevents other event from firing.

related questions