title: Delayed response from jQuery (with some other odd artefacts)
body: <p>I'm getting a mind-boggling response from jQuery that I'm hoping someone can help me with. I have a simple problem ... I'm setting the "value" of a HTML form's hidden field (aka, <code>&lt;input type='hidden'&gt;</code> when the form loads. I have a form with three hidden fields and two are working just fine. The third ... well here's the problem:</p>
  
  <p>Once the form has completed loading (and yes it has loaded and is visible ... as indirect proof the previous two hidden fields have loaded and successfully been set by jQuery), I run the following code (just showing relevant snippet as this final field is a date set to "today"):</p>
  
  <pre><code>case "today":
      SetFieldValue (targetElement , Date.today().toString("yyyy-MM-dd HH:mm:ss") );
      console.log ('Setting ' + jQuery(targetElement).attr('id') + ' to "today": ' + Date.today().toString("yyyy-MM-dd HH:mm:ss") );
      break;
  </code></pre>
  
  <p>The SetFieldValue is a little function I wrote to allow setting DOM elements regardless of what type it was. The code is follows:</p>
  
  <pre><code>function SetFieldValue ( domObject, value ) {
    // as a safety function, check if a string representation of the domObject was passed in and convert it to a jQuery object if it was
    if ( jQuery.type(domObject) === "string") {
      domObject = jQuery(domObject);
    }
  
    if ( jQuery.inArray (domObject.prop('tagName').toLowerCase(),['input' , 'select' , 'textarea']) &gt;= 0 ) {
      console.log ("setting to value attribute: " + value);
      domObject.attr('value',value);
      console.log ("now set to: " + domObject.attr('value') + "(" + domObject.attr('id') + ")" );
    } else {
      console.log ("setting to html attribute");
      domObject.html( value );
    }
    return domObject;
  }
  </code></pre>
  
  <p>Please note the console.log messages as this is important in understanding the craziness of the problem. When I run this, here's what I get on the console:</p>
  
  <p><img src="https://i.stack.imgur.com/wU0j2.png" alt="enter image description here"></p>
  
  <p>Now I set a breakpoint at the last line of the "today" case statement (aka, on the "break;" line). Based on the console messages all is well. It appears the DOM element #activity-start_time has been set. Well here's where it gets weird. </p>
  
  <p>The first thing I do is test the reference to "targetElement" and the first thing the debugger console give me is an empty array:</p>
  
  <p><img src="https://i.stack.imgur.com/i1j1d.png" alt="empty set"></p>
  
  <p>What? That's pretty odd. While I'm pondering that a few seconds pass and all of sudden it resolves itself to what I'd expect (I don't retype it into the console it simply changes from the empty set to what you see below):</p>
  
  <p><img src="https://i.stack.imgur.com/MSaPg.png" alt="and now for something completely different"></p>
  
  <p>Now that the targetElement is exactly as I'd expect I do a simple check with jQuery that the DOM element of #activity-start_time is reporting the same value. You can see the result above. It's precisely the same as targetElement except it HAS NOT got a value. What?!?</p>
  
  <p>I'm at a complete loss. Any help would be greatly appreciated. </p>
  
  <p>Ken</p>
  
  <p>p.s. I will note that other people have suggested using .prop instead of .attr both seem to behave precisely the same.</p>