jquery calling null element that actually exists

Question

My code works on localhost, but when I implement it on my site, it doesnt. The error log says it's calling for an element that doesn't exist. I've reach to the conclusion that it can't see the element because the element is loaded dynamically.

The element is the class .newsitem_text, it's a div that contains a blog post. I believe that the jquery is calling for the class before the class is being loaded by the page.

Here is one example fiddle: http://jsfiddle.net/ku6L240c

The error: Uncaught TypeError: Cannot read property 'html' of null 47-ganhe-dinheiro-atraves-de-downloads:1093 Uncaught SyntaxError: Unexpected token ILLEGAL

The code:

<javascript>
            var wordList = $(".newsitem_text").html().split(' ');
            var newHtml = '';

            $.each(wordList, function(index, word){
              newHtml += ' ' + word;
              if (index == 50) {
                newHtml += '<div>Some HTML</div>'     
              }        
            })
            ;

            $(".newsitem_text").html(newHtml);


</javascript>

How can I make the script wait until the class is loaded by the page, then it gets executed or something?

Answer 1

You can try to execute this function at window load or at document ready

just put ur function inside this:

$(window).load(function(){
    //your function here
});

or here

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

Answer 2

Seems you are doing dynamic HTML within JS code and immediately trying to get the just added tags. If that is the case, your code will have to wait and keep checking until browser rendered your new HTML and add the nodes to DOM, then you can query them or do something about.

The only way I found works is usint setTimeOut and keep checking then execute your last statement. I create a function below that checks wait and check for certain condition then execute a call back function.

//A function to wait until either times up, or until a pass in "funct" returns "true", which ever occured first.
//funct - callback function, to be returned true or false.
//done - an optional callback function for notify when waiting is over.
//timeout - the amount of time in million-second to wait.
//caller - optional string of caller for monitoring if multiple waiting session.
function waitToSync(funct, done, timeout, caller) {
  //This is  a hack synchronize to wait until funct() returns true or timeout becomes < 0.
  caller = caller || '';
  if ((funct === undefined) || typeof (funct) != 'function') return;
  function waiting() {
    if (!funct()) {
      var dt = new Date();
      console.log(caller + " waiting: " + dt.format('yyyy-mm-dd h:MM:ss'));
      if ((timeout - 1000) > 0)
        setTimeout(waiting, 1000); //1 second.
      else {

        console.log(caller + ': waitToSync timed out!!!');
        document.body.style.cursor = 'default';
      }
      timeout -= 1000;
    }
    else {
      if (done !== undefined && (typeof done === 'function'))
        done();
    }
  }
  waiting();
}

Do all you dynamic or anything to want to wait. Then call the WaitToSync

 $.each(wordList, function(index, word){
     newHtml += ' ' + word;
     if (index == 50) {
        newHtml += '<div>Some HTML</div>'     
     }        
  });

  waitToSync(
     function wait() { return document.getElementsByClassName("newsitem_text").length > 0; }, 
     function dosomething() { $(".newsitem_text").html(newHtml); },
     10000, //wait up to 10 seconds.
     'dynamic add HTML');

Answer 3

It is way to better to put the code in the end of the body tag after all your content so javascript can run after everything is loaded !