Calling a javascript function on element load

Question

So I am working with a ckEditor implementation in my project, and I want to provide autocomplete functionality for one of its dialog boxes. I implement the autocomplete functionality by calling a javascript function on a specific input field. However, I am not completely sure on how to obtain the specific input element, as it only appears after I hit a button in ckeditor, so it is no obtainable on document load.

Is there anyway to fire a javascript function upon the loading of a specific div/element? I am trying to use Jquery's $().load function, but it does not seem to be firing. Here is a short example

$(".cke_reset_all cke_1 cke_editor_documentBody_dialog").on("load",function(){
console.log("Successful firing")

//some code here
});

I am not seeing any text in my console, but div with that class name is appearing.

Everytime the dialog box containing the input loads , the following div is created

<div class="cke_reset_all cke_1 cke_editor_documentBody_dialog " lang="en" aria-labelledby="cke_dialog_title_113" role="dialog" dir="ltr">

so I am trying to run my autoComplete script after the loading on this div is done, as the input field I want is nested within it. Any ideas?

You could use setTimeout wrapping the function you want to fire. Then check within the function if the element exists before executing any other code. Not ideal, but might do what you're after. — logic-unit
– logic-unit, Commented Jul 1, 2014 at 18:41

PulseLab · Accepted Answer · 2014-07-01 18:38:29Z

1

The load method in jQuery is an AJAX shorthand method, so it's not what you're after here.

If you want to bind to the load event, you need to use the on method (or bind in earlier versions of jQuery).

Details here: http://api.jquery.com/on/

answered Jul 1, 2014 at 18:38

PulseLab

1,57911 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shrivar R Over a year ago

Ah, I was looking at http://api.jquery.com/load-event/ and did not seem to see that it was deprecated. I have edited my question above, to show what I have it changed to, the handler is still not firing however

Christophe · Accepted Answer · 2014-07-01 19:12:37Z

0

The load event only applies to some elements, like body, iframe, img, input, script.

In your case, to detect if the input element is present in the page you'll probably have to rely on polling with a setTimeout or setInterval loop. Within the loop, the code will look like:

var inputs=$("div.cke_editor_documentBody_dialog input");
if (inputs.length==1) // do something

Note that the way you wrote the selector in your question is incorrect.

answered Jul 1, 2014 at 19:12

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

2 Comments

Shrivar R Over a year ago

Are the performance implications severe if I am polling twice a second?Or pretty negligable. It is a pretty basic webpage, just basic text fields and ckeditor, and I clear the Interval as soon as my function is executed.

Christophe Over a year ago

A 500 ms interval should not be a problem, especially as your loop is just a selector. Using setTimeout in a loop would be safer than setInterval to prevent loops from piling up. I often use this with 200 ms or even 99 ms intervals.

jorblume · Accepted Answer · 2014-07-01 18:52:51Z

0

Bind the On method to the parent div, then look for the id/class and carry out your logic/call a function.

 $(function () {

    $('#parentDiv').on('click' ,'yourselectorhere',  function() {

          console.log('working');

        });

   });

answered Jul 1, 2014 at 18:52

jorblume

6077 silver badges20 bronze badges

Collectives™ on Stack Overflow

Calling a javascript function on element load

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related