title: Can I control the order in which javascript / jQuery events fire?
body: <p><strong>Background</strong></p>
  
  <p>I've got asp.net webform with a grid, and when users update textboxes in that grid, the onchange event kicks off a WebMethod call and updates the rest of the changed row. Nothing is saved at that time -- we're just updating the UI.</p>
  
  <p>To commit the changes, you click the save button. </p>
  
  <p>This actually works reliably in almost every scenario. However, there is one very persistant one that it feels like I should be able to solve, but it's time to call in the specialists.</p>
  
  <p><strong>The Problem Scenario</strong></p>
  
  <p>I'm using jQuery to capture the enter key, and unfortunately that event fires first, causing the page to submit before the callback completes. The row is not updated correctly. Stale and bewildering data is saved. </p>
  
  <p><strong>Update</strong></p>
  
  <p>I don't think you can make the enter behavior depend on the callback, because you could save without changing a row. In that case, if you didn't change a row, it would never save. </p>
  
  <p>Now if there was some way to inspect javascript's internal list of things to do, or maybe create my own and then manage it somehow, that would work. But that's some heavy lifting for something that should be easy. So unless an expert tells me otheriwse, I have to assume that's wrong. </p>
  
  <p><strong>Attempts</strong></p>
  
  <p>Right now I'm using the built-in jQuery events and I've got this elaborate setTimeout persisting the fact that a save was attempted, pausing long enough for the WebMethod to at least get called, and relying on the callback to do the submit. But it turns out javascript ansychrony doesn't work the way I hoped, and the onchange event doesn't even fire until that chunk of code completes. That was surprising. </p>
  
  <p>I was thinking I could use my own little object to queue up these events in the right order and find a clever way to trigger that, etc. </p>
  
  <p>This all seems like the wrong direction. Surely this is insane overkill, this is a common problem and I'm overlooking a simple solution because I don't work in javascript 24/7. </p>
  
  <p>Right?</p>
  
  <p><strong>Code</strong></p>
  
  <p>Here's what I've got right this minute. This obviously doesn't work -- I was trying to take advantage of the async nature of jquery, but all of this apparently has to conclude before the row's onchange event event fires:</p>
  
  <pre><code>$(document).bind("keypress", function (e) {
      if (e.keyCode == 13) {
          handleEnter();
          return false; //apparently I should be using e.preventDefault() here. 
      }
  });
  
  
  function handleEnter() {
      setTimeout(function () {
          if (recalculatingRow) { //recalculatingRow is a bit managed by the onchange code.
              alert('recalculating...');
              return true; //recur
          }
  
          //$('input[id$="ButtonSave"]').click();
          alert('no longer recalculating. click!');
          return false;
      }, 1000);
  }
  </code></pre>
  
  <p>And then a typical row looks like this. Note that I'm not using jquery to bind this:</p>
  
  <pre><code> &lt;input name="ctl00$MainContent$GridOrderItems$ctl02$TextOrderItemDose" type="text" value="200.00" maxlength="7" id="ctl00_MainContent_GridOrderItems_ctl02_TextOrderItemDose" onchange="recalculateOrderItemRow(this);" style="width:50px;" /&gt;
  </code></pre>
  
  <p>I could post the code for recalculateOrderItemRow, but it's really long and right now the problem is that it doens't fire until the after keypress event concludes.</p>
  
  <p><strong>Update Dos</strong>
  According to <a href="http://fitzgeraldnick.com/weblog/35/" rel="nofollow">Nick Fitzgerald</a> (and man is that a cool article) the use of setTimeout should cause this to become async. Digging further into interactions between setTimeout and jQuery, as well as interactions between normal javascript events and jQuery events. </p>