How to check if the document is ready in JavaScript?

Question

I am developing a simulator to simulate user actions in a Web page. In a special case, there are a few number of buttons in a page clicking on each changes the content of the page. I programmatically click on each button and then want to extract the new content added to the page. If you have a look at:

http://www.elementbars.com/Build-a-Bar-Service.aspx#

you can find an example.

My code is something like this:

for (var int i=0; i< buttonArray.length; i++){ // buttonArray is the array of buttons
    triggerClickEvent(buttonArray[i]);
    extractNewContent();
}

function triggerClickEvent (clickableElement) {
   jQuery(clickableElement).trigger('click');
}

Both triggerClickEvent and extractNewContent are properly working, but the problem is that after triggering the click event, the JavaScript engine should wait for a while to make sure that the new content is added, but it does not behave as expected. For example, I noticed that all the buttons are clicked, but extractNewContent extracts content for the first button, meaning the these two functions are not working synchronously. I used the setTimeout function, but since it does not block the execution, so could not resolve the problem. I also used functions checking the state of the document, but not working as well.

I would be grateful if you could please help me.

Thanks.

Duplicate, http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — maximkou, Jul 25 '13 at 13:10
@maximkou I don't think it's a duplicate because OP wants to wait for changes triggered by other JavaScript, but made after the document load. — Danubian Sailor, Jul 25 '13 at 13:16
Without seeing the code for the two methods it's hard to say what's happening exactly. Could you re-organize a bit to pass the second method as a callback? — Andrew Walters, Jul 25 '13 at 13:26
You need to bind to the event not just follow it with extractNewContent(). Read up on threads, asynchronous processing, and jQuery events. http://api.jquery.com/category/events — Will, Jul 25 '13 at 13:42
I added the code for the triggerClickEvent function. The extractNewContent does not do anything special, it just extracts the string values of the children text elements of a given HTML element. Because of the implementation strategy I used, these functions are executed separately, and so the second function cannot be used as a callback in the first one. — user1777220, Jul 25 '13 at 13:44

score 0 · Answer 1 · answered Jul 25 '13 at 13:50

The easiest way to do it is with a toolkit like jQuery. Something like this:

jQuery(document).ready(function() {
...
});

or the more concise

jQuery(function() {

});

Part of the problem is that "ready" is not standardized across browsers. Toolkits like jQuery make up for that.

score 0 · Answer 2 · answered Jul 25 '13 at 14:25

0

You can pass parameters to trigger function one of them would be a callBack function extractNewContent in our case. And call this function after all modifications are done in click event handler. So the handler would be

$(clickableElement).on('click', function(event, callback){
                       ...
                       all DOM modifications goes here
                       ...
                       if(typeof callback === "function")
                           callback();
                       }

and then trigger it with extractNewContent as parameter

$(clickableElement).trigger('click',extractNewContent);

answered Jul 25 '13 at 14:25

Moti Korets

3,458
2
23
33

extractNewContent is not fired. – user1777220 Jul 25 '13 at 14:48
One thing i noticed you work with old version of jquery my example works with jquery 1.7 + maybe you should upgrade if you have no good reason for wotking with an old version. – Moti Korets Jul 25 '13 at 14:54
For example, if I add an alert statement between two functions it works. – user1777220 Jul 25 '13 at 14:56
Tried with the new version, but still having the problem. – user1777220 Jul 25 '13 at 15:10
I think i lost you here betwen which two functions ? Maybe it's better to post a new question with updated code.. – Moti Korets Jul 25 '13 at 15:12

score 0 · Answer 3 · answered Jul 25 '13 at 15:21

0

The following code works:

for (var int i=0; i< buttonArray.length; i++){ // buttonArray is the array of buttons
  triggerClickEvent(buttonArray[i]);
  alert('balalalala'); // if you remove this, it won't work.
  extractNewContent();
}

function triggerClickEvent (clickableElement) {
 jQuery(clickableElement).trigger('click');
}

answered Jul 25 '13 at 15:21

user1777220

123
1
1
6

Doesn't make sense at all. You completely missing the point of my answer please look at the fiddle i added. Notice you should pass a parameter to trigger function. – Moti Korets Jul 25 '13 at 16:18
@Moti: I followed your code and passed extractNewContent as the second parameter in the trigger function, but got it not working. The difference between my case and your code is that in your code the user triggers the click event while mine is done programmatically. In addition, triggerClickEvent calls an ajax request and, therefore extractNewContent should wait until the page is completely loaded.And finally, I execute my code in a Firebug extension. – user1777220 Jul 25 '13 at 18:37

How to check if the document is ready in JavaScript?

3 Answers3