1

My application's session management will redirect a user to a page where the user is told their session has timed out and please <a href="path/to/page.html" id="manual_link">sign in</a>.

I'm trying to program the following behavior:

  1. If JavaScript is off (or otherwise not available), the user will have to click on the "sign in" link (POHTML; no problem).

  2. If JavaScript is running:

    a). progressively-enhance the link to instead submit the hidden form with an id of "security_redirect" (document.getElementById('manual_link').onclick = "javascript:submit_security_redirect(); return false;";)

    b) if the user does not click the link first, auto-submit the form after a 4 second delay (assume remaining_time to be 4000):

        setTimeout(function () {
        submit_security_redirect();
    }, remaining_time);

The four-second-delay-then-submit is happening, but I can't seem to get the link to intercept if the user doesn't want to wait four seconds. In other words, if the user clicks the link after one second...nothing happens until the four seconds are up.

I suspect I need to kill the setTimeout on link click, but don't know how (my fumbling attempts at clearTimeout were so disappointing I don't even include them in the example JSFiddle). And/or I need to prevent the a's default behavior (though I thought return false squares that away).

What modifications are necessary to achieve the desired functionality?

Jeromy French
  • 11,812
  • 19
  • 76
  • 129

1 Answers1

2

You can't set onclick like that in the same way that you would set the onclick attribute in HTML -- you need to set it to a function, e.g.:

document.getElementById('manual_link').onclick = function() {
    submit_security_redirect(); return false;
};

When adding event handlers via Javascript, calling addEventListener is actually better than setting onclick, but unfortunately doesn't work in IE versions 8 and below, which is one of the reasons why cross-platform libraries like jQuery are great for event handling.

BTW, arguments.callee is deprecated (see Arguments.callee is deprecated - what should be used instead?).

Community
  • 1
  • 1
Matt Browne
  • 12,169
  • 4
  • 59
  • 75
  • 1
    IE9+ supports `addEventListener`; as an alternative `attachEvent`. If you use the event calling mechanism, `event.preventDefault` should be used. – Explosion Pills Feb 25 '13 at 01:14
  • Thanks for pointing that out...I updated my answer to say IE "versions 8 and below". – Matt Browne Feb 25 '13 at 01:16
  • 1
    Aaaaaaaaahhhh. stupid computer syntax – Jeromy French Feb 25 '13 at 01:19
  • If I go the jQuery route, I'd probably have the PE swap out the link for a submit button styled (via Bootstrap) as a link. Then I wouldn't have to set the `onclick` or `.click()` because I could just use the submit's native behavior. I'm trying to keep the page weight down, for some reason (especially weird since I'm loading jQuery via CDN). I should rethink that... – Jeromy French Feb 25 '13 at 02:13
  • Whether you use jQuery's `click()` on a link or a regular form submit button is likely to make very little practical difference in terms of page load time. – Matt Browne Feb 25 '13 at 02:16
  • Glanced at this again, and noticed something else: `javascript:` shouldn't even be used in an HTML `onclick` attribute...you only need to prefix the JS with `javascript:` for the `href` of `` tags. – Matt Browne Feb 27 '13 at 03:08