Best way to modify an element that is not yet created

Question

Hello,

I have an <input> field in my web page, and I want to add a particular method on it, let say fooBar().

Here is what I do:

<input id="xxx" .../>
<script type="text/javascript">
    $("xxx").fooBar = function() { ... };
</script>

This works well. However, for some reasons I will not detail here (in fact the HTML is generated by JSF components), the <script> will be declared before the <input> tag.

So in others words, I will have that in my HTML:

<script type="text/javascript">
    $("xxx").fooBar = function() { ... };
</script>
<input id="xxx" .../>

So of course this code will not work correctly, as the script will try to get ($("xxx")) and modify an element that does not exist yet.

If I want to stick on the exact order of these two tags, what is the best way to accomplish what I want?

Edit

In my case, $ refers to prototype, but I am also using jQuery in my application. And I must be compatible with IE6 :o(

Answer 1

Try putting your code in load event:

$(window).load(function(){
  $("#xxx").fooBar = function() { ... };
});

Answer 2

You need to run your script after the document is loaded. With jQuery you'd do that with:

$(document).ready(function () {
    //do stuff here
});

I can't tell which library you're using here, but they all have an equivalent of jQuery's document ready.

Here's the prototype equivalent:

document.observe("dom:loaded", function() {
  // do stuff
});

Answer 3

If the code has to be directly before the input, you can check if it has loaded after a certain period of time.

<script type="text/javascript">
    //Sets up a function to execute once the input is loaded
    f = function () 
        {
        //Checks if 'xxx' exists (may vary between frameworks)
        if ($("xxx") !== undefined) 
            {
            $("xxx").fooBar = function() { ... };
            //Escapes the timer function, preventing it from running again
            return true;
            }
        //If still not loaded check again in half a second (0.5s or 500ms)
        setTimeout(f,500);
        return false;
        }
    f();//Initialize the timer function
</script>
<input id="xxx" .../>

Answer 4

Instead of adding a method to the dom node, why not make it a separate function, so instead of

$("xxx").fooBar = function() {
  doStuff(this); 
}; 

you would have something like

function xxx_fooBar () {
  var me = document.getElementById('xxx');
  doStuff(me);
};

---

Another suggestion: If you can add attributes to the <input> element, you could do something like this...

<script>
function xxx_init (e) {
  e.fooBar = function () {
    doStuff(this); 
  };
} 
</script>
<input onload="xxx_init(this)" id="xxx" .../>

---

Or you could do as others suggest and attach the scripts to the window.onload event.