SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to load js file dynamically using js

    Hi,

    I'm trying to load a js file dynamically when a page load. Below i given the code what i'm using.

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '../../Scripts/ChatMessage.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    //alert('');

    HEre the problem is the script file is not loading. After the alert message (which i commented on above code )it is working fine. I tried to given wait time more than 10 second even though its not loading.

    But after giving the alert box, its working.

    Can anybody say the reason why its happening like this.

    Thanks,
    S. Ramkumar

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the script inside the HEAD of your page? Could you be trying to add the script to an element which hasn't yet been closed? If so, it probably can't be referenced via the DOM. I suspect the HEAD is still loading while the ALERT is sat on the screen, so it gives it the delay it needs to complete.

    Here's some JS I used to add jQuery to a page if it didn't exist before running another script which relied on it being loaded. It keeps checking (after a slight delay) for jQuery to be defined before continuing.
    Code:
    // Add jQuery
        if (typeof jQuery == 'undefined') {  
          var FB_JQ = document.createElement('script');
            FB_JQ.src = '/core/js/jquery.js';
            FB_JQ.type = 'text/javascript';
          document.getElementsByTagName('head')[0].appendChild(FB_JQ);
        }
    
    // Check if jQuery's loaded
        function FB_wait() {
          if (typeof jQuery == 'undefined') {  
            window.setTimeout(FB_wait,100);
          }
          // If jQuery is loaded
          else {
            // Make sure body is loaded
            jQuery('document').ready(function () {
              var t=setTimeout("FB_addBadge()",3000);
            });
          }
        }
        
        FB_wait();
    Hope it helps!
    Last edited by awestmoreland; Aug 9, 2010 at 21:46. Reason: Removed unrelated comment in code for clarity
    From the English nation to a US location.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by madarasi View Post
    Can anybody say the reason why its happening like this.

    Thanks,
    S. Ramkumar
    Where in the page do you have the script?

    In order for that script to work the head element must have already fully loaded and so that code will work if placed anywhere in the body of the page but will fail if you try to run it directly in the head.

    You do then need to wait for long enough after requesting to load the script for it to actually load before you can run anything in it so the best place to put whatever you want to run using the script that you are loading is inside of that file. If you can't do that then you need to set up a loop to test for something created at the end of that file existing before you try to run anything.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you all for the response.

    my problem solved. I given time delay and i moved the code below after adding script dynamically to separate function and i called that method using "setTimeOut(fnName(),100);

    Its works.

    Thanks again to you all.

    S. Ramkumar


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •