Question

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, <input type='hidden'> 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:

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”):

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;

The SetFieldValue is a little function I wrote to allow setting DOM elements regardless of what type it was. The code is follows:

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']) >= 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;
}

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:

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.

The first thing I do is test the reference to “targetElement” and the first thing the debugger console give me is an empty array:

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):

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?!?

I’m at a complete loss. Any help would be greatly appreciated.

Ken

p.s. I will note that other people have suggested using .prop instead of .attr both seem to behave precisely the same.

Answer 1

I know I didn’t provide enough context for people to really dig into this problem but I have in the end solved it. What was the issue? It was silly really … isn’t always? Anyway it was just a case of the DOM element in questions ‘id’ not beging unique. Grrr. It’s always the obvious things that you then go onto overlook that get you in trouble.

Anyway, thanks for your patience and help.