title: Javascript: How to temporarily disable all actions on the page?
body: <p>On a page with Ajax event, I want to disable all actions until the Ajax call returns (to prevent issues with double-submit etc.)</p>
  
  <p>I tried this by prepending <code>return false;</code> to the current onclick events when "locking" the page, and removing this later on when "unlocking" the page. However, the actions are not active any more after they are "unlocked" -- you just can't trigger them. </p>
  
  <p>Why is this not working? See example page below. Any other idea to achieve my goal?</p>
  
  <p><strong>Example code:</strong><br>
  both the link and the button are showing a JS alert; when pressing lock, then unlock the event handler is the same as it was before, but doesn't work...?!?<br>
  The code is meant to work with Trinidad in the end, but should work outside as well.</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
  
  &lt;script type="text/javascript"&gt;
  function lockPage()
  {
    document.body.style.cursor = 'wait';
    lockElements(document.getElementsByTagName("a"));
    lockElements(document.getElementsByTagName("input"));
  
    if (typeof TrPage != "undefined")
    {
      TrPage.getInstance().getRequestQueue().addStateChangeListener(unlockPage);
    }
  }
  
  function lockElements(el)
  {
    for (var i=0; i&lt;el.length; i++)
    {
      el[i].style.cursor = 'wait';
      if (el[i].onclick)
      {
        var newEvent = 'return false;' + el[i].onclick;
        alert(el[i].onclick + "\n\nlock --&gt;\n\n" + newEvent);
        el[i].onclick = newEvent;
      }
    }
  }
  
  function unlockPage(state)
  {
    if (typeof TrRequestQueue == "undefined" || state == TrRequestQueue.STATE_READY)
    {
      //alert("unlocking for state: " + state);
      document.body.style.cursor = 'auto';
      unlockElements(document.getElementsByTagName("a"));
      unlockElements(document.getElementsByTagName("input"));
    }
  }
  
  function unlockElements(el)
  {
    for (var i=0; i&lt;el.length; i++)
    {
      el[i].style.cursor = 'auto';
      if (el[i].onclick &amp;&amp; el[i].onclick.search(/^return false;/)==0)
      {
        var newEvent = el[i].onclick.substring(13);
        alert(el[i].onclick + "\n\nunlock --&gt;\n\n" + newEvent);
        el[i].onclick = newEvent;
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;Page lock/unlock test&lt;/h1&gt;
  
  &lt;p&gt;Use these actions to lock or unlock active elements on the page:
  &lt;a href="javascript:lockPage()"&gt;lock&lt;/a&gt;,
  &lt;a href="javascript:unlockPage()"&gt;unlock&lt;/a&gt;.&lt;/p&gt;
  
  &lt;p&gt;And now some elements:&lt;/p&gt;
  
  &lt;a onclick="alert('This is the action!');return false;" href="#"&gt;link action&lt;/a&gt; &amp;nbsp;
  &lt;input type="button" value="button action" onclick="alert('This is another action!')"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Thanks guys for your ideas and answers.  </p>
  
  <p>Now I see that I have mixed up Strings and functions, which obviously can't work ;(</p>
  
  <p>I should have made clear that we use some Web FW and tag libraries (Trinidad) which create the event handling (and Ajax) code, hence I can't edit that directly or use synchronous Ajax etc.</p>
  
  <p>Moreover, Ajax is only one scenario where this code should be executed. It's purpose is to prevent the user to double-submit a page/action, which is also relevant for non-Ajax pages where you could kind of doulbe-click on a button. I know that this is not really safe, and it's only meant to be a "convenience" thingy to avoid getting the navigation error page too often (we have server-side protection, of course).</p>
  
  <p>So, will try the div overlay, probably.</p>
  
  <p>Thanks again,<br>
  Christoph.</p>