53

Is it possible to trigger a Javascript script, when an input element or any other html element is rendered. This script should be triggered from within the html tag, so that we should be able to pass 'this' to the js function.

peSHIr
  • 6,279
  • 1
  • 34
  • 46
imdahmd
  • 737
  • 1
  • 6
  • 15

7 Answers7

40

No, there is no such event.

However, a <script> tag placed directly after the HTML element would have a similar effect: It would be executed directly after the element has been rendered:

<input type="text" id="input123" value="Hello World!">

<script>
alert("Input123 is now ready:"+document.getElementById("input123").value);
</script>

In most cases, however, it is best to use the document-wide load (or DOMReady, or jQuery's .ready()) to start any script operations. The DOM will be fully ready then.

John C
  • 3,052
  • 3
  • 34
  • 47
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
31

A way to simulate such an event is to create a custom data-* atttribute (HTML-5 valid) and use that as a selector. Then in the main javascript code, you can add a selector for anything which has this specific data-XXX attribute and evaluate the javascript code inside.

Example HTML code:

<div data-onload="sampleFunction('param1', 2)"></div>

Example Javascript code (using jQuery). It is also possible to use normal DOM to find elements with this attribute.

/* Find any element which has a 'data-onload' function and load that to simulate an onload. */
$('[data-onload]').each(function(){
    eval($(this).data('onload'));
});

This works well. I actually use it in production.

ChrisR
  • 966
  • 14
  • 20
  • 7
    It is, in general, considered bad practice to use eval and it should be avoided whenever possible. Eval can be quite insecure since it'll run whatever code is inside the data-onload attribute. You could use a generic callback and just pass in the arguments via `data-onload` like so http://codepen.io/kevingimbel/pen/0c9366e17a96288ee8a685d6d53a805f – Kevin G. Nov 13 '15 at 13:23
8

No. However, any script placed after the markup of the input element, will be run with the input element available because it is parsed before the script. So, if this was all in the body:

<input id="a">
<script>document.getElementById('a');</script>

That would all work anyway.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • the problem is the id is not known to me when the element is rendered. – imdahmd Sep 14 '10 at 12:40
  • 1
    Gareth, notice how I selected the element with id `a` in the example script. imdad, you can use other means of selecting the element, such as tag selection, or even class selection. – Delan Azabani Sep 14 '10 at 12:44
4

I have an input element that gets dynamically added to the document and needs to get initialized.

It's not perfect, but here's a way to initialize the widget the first time the input is used:

<input onfocus="initwidget(this)">
Collin Anderson
  • 14,787
  • 6
  • 68
  • 57
2

There is a trick. There are onload and onerror events for inputs have type="image" src="..." attributes. You can use onerror by passing empty or always wrong to src and change the type to proper one when onerror event triggred:

function func(input) {
    console.log("Input loaded");
    input.type = "text";
    input.value = "Worked!";
    input.removeAttribute("src");
    // ...
}
<input type="image" value="" onerror="func(this)" src=""/>
AHHP
  • 2,967
  • 3
  • 33
  • 41
0

No this is not possible. You could however use jQuery + $(document).ready(function) to modify any input field you want right after the page has finished loading.

halfdan
  • 33,545
  • 8
  • 78
  • 87
0

No, there is not. Just run your code from the document "ready" handler, or use something like jQuery to give you a way to run code at "ready" (which is when the DOM is complete but images may not have loaded).

Pointy
  • 405,095
  • 59
  • 585
  • 614