0

I have gone through a number of examples on SO (including this one and this one) to try and resolve an issue I'm having.

Using the script below I am adding an overlay to the page with a 'spinning' image to indicate to the user that the system is busy processing after they clicked the button. 

ACME.global = ACME.global ? ACME.global : {
    init: function() {
        $(".ctaButton").bind("click", this.pageLoadingOverlay);
    },
    pageLoadingOverlay : function(event) {
        var body = document.getElementsByTagName("body");
        var pageOverlay = document.createElement("div");
        pageOverlay.id = "onClickPageOverlay";
        body[0].appendChild(pageOverlay);
        setTimeout(function() {
            $('#onClickPageOverlay').remove();
        }, 1000);
    }
}

If I leave out the timeout functionality

        setTimeout(function() {
            $('#onClickPageOverlay').remove();
        }, 30000);

The click event is properly bound to the button and the overlay is loaded. The problem is that the UI could then get stuck on the overlay display (the system rendering the page does not have a "refresh" or "back" button so the user can't reload the page).

However adding the full script it appears that the onClick event is no longer bound to the script.

I've tried various combinations of setTimeout and delay with no luck.

Any help greatly appreciated.

Community
  • 1
  • 1
radimpe
  • 3,197
  • 2
  • 27
  • 46
  • Are you seeing any errors in the JS console? And which browser are you using? – Jake Stoeffler Jul 20 '12 at 06:16
  • Your code is working just fine is jsbin (http://jsbin.com/etazav), I guess your problem is somewhere else. – ybo Jul 20 '12 at 06:23
  • Not seeing any errors in console. Been doing most of my testing in Firefox and Chrome (easier to use developer tools). – radimpe Jul 20 '12 at 06:26
  • @ybo: Thanks for pointing out the obvious! Turns out that I mistyped the style associated with `onClickPageOverlay` and thus, while it actually worked, I never saw the effects. When I 'removed' the timeout I did this with 'undo' which also undid my typing error. Please add your comment as an answer so I can accept it. – radimpe Jul 20 '12 at 06:56

2 Answers2

0

The timeout function isnt´t well build.

Try this:

var t=setTimeout("$('#onClickPageOverlay').remove()",30000);

Documentation:

setTimeout("javascript function",milliseconds);

The setTimeout() method will wait the specified number of milliseconds, and then execute the specified function.

The first parameter of setTimeout() should be a function.

The second parameter indicates how many milliseconds, from now, you want to execute the first parameter.

Sangar82
  • 5,070
  • 1
  • 35
  • 52
  • 1
    Doesn't this answer sort of contradict itself? You say that "The first parameter of setTimeout() should be a function," but in the example you give, the first parameter is actually a string. It's also not recommended to use setTimeout with a string, for reasons described here: http://stackoverflow.com/questions/6232574/is-it-bad-practice-to-pass-a-string-to-settimeout-if-yes-why – Jake Stoeffler Jul 20 '12 at 07:03
0

As I already stated in a comment, the code works just fine.

ybo
  • 16,967
  • 2
  • 28
  • 31
  • The code was indeed working fine. Turns out the problem was the style class added by the JavaScript was mis-typed. – radimpe Jul 23 '12 at 10:24