Question

I’ve got some banner zones set up on advertisespace.com – I’m trying to load the script tags using jquery so they load after the page has loaded. However its not working. Here is my code to do this.

Here is the function I use to include the script tag:

function jsinclude(file, dom) {
   if (document.createElement && document.getElementsByTagName) {
     if(dom=='undefined')
        var dom = document.getElementsByTagName('head')[0];

     var script = document.createElement('script');
     script.setAttribute('type', 'text/javascript');
     script.setAttribute('src', file);

     script.setAttribute('charset',"utf-8");

     dom.appendChild(script);
   } else {
     alert('Your browser can\'t deal with the DOM standard. That means it\'s old. Go fix it!');
   }
 }

ANd here is how I am calling the function:

$(function(){
jsinclude('http://ads.advertisespace.com/somethingsomething.js', document.getElementById('location-of-banner-1'));


jsinclude('http://ads.advertisespace.com/somethingsomething.js', document.getElementById('location-of-banner-2'));

})

The result is that the script tag is inserted in the correct place but the banners doesn’t show i.e the code in the script file referred to is never executed. How can I fix this.

Answer 1

You tagged your question with jquery so why not make use of its advantages.

The dom is not the head element, and doing dom == 'undefined' checks whether the variable dom is equal to the string 'undefined'. You must have set that explicitly and that’s probably not the case. Anyway, there is one head element so it’s not necessary to pass it to the function – the function can handle that itself.

Also, checking for DOM functions is not applicable these days. We live in 2011, all browsers have these functions included.

function jsinclude(file) {
     var script = $("<script>", { type:    'text/javascript',
                                  src:     file,
                                  charset: 'utf-8' });
     $('head').append(script);
}