Question

HTML:

<div id="fields">
    <input type="text" name="someField" />
    <!-- NOTE: There are some more fields here -->
</div>
<!-- NOTE: There are some more fields here -->

First JS File:

jQuery(document).ready(function($) {
    alert($('#fields input[type="text"]').val());
});

Second JS File:

jQuery(document).ready(function($) {
    $('#fields input[type="text"]').val('someValue');
});

Notes:

1. The JS files are located within the head tag.
2. I am forced to set the input value in the Second JS File.
3. It works on Firefox, Opera, Chrome, Safari.
4. IE7 and IE8 returns an empty value.

Any help is appreciated! Thank you!

Answer 1

Instead of assuming that the value will have been set in your first “ready” handler, make it handle a custom event, and then trigger that event from the second file.

First file:

jQuery(function($) {

   $('#fields input[type="text"]').on('value-ready', function() {
      alert(this.value);
   });

});

Second file:

jQuery(function($) {
  $('#fields input[type="text"]').val("whatever").trigger('value-ready');
});

wait a sec … this has the same problem 🙂 hold on and I’ll fix it … and stop upvoting me until I do 🙂

OK assuming I’m right, that the issue is a dependency on the order of evaluation of “ready” handlers (and that’s essentially a “code smell” guess; there might be some other problem), the change I made won’t really help. If the second block runs first, then the event handler will not have been set up!

I think that the only real way to impose an ordering is to either set up some kind of “promise” system, or else simply use a marker on the element, as well as a handler. That way, the code in the first block can check to see whether the value assignment has already happened. It’s a little clunky but at least it’s explicit:

jQuery(function($) {
  var input = $('#fields input[type="text"]');
  if (input.data('value-ready'))
    alert("value already set: " + input.val());
  else
    input.on('value-ready', function() {
      alert("value is now set: " + input.val());
    });
});

and then in the second file:

jQuery(function($) {
  $('#fields input[type="text"]').val("whatever")
    .data("value-ready", true)
    .trigger("value-ready");
});