How to add javascript dynamically to HTML and load it correctly?

Question

I'm trying this: If jQuery is not present, add jQuery dinamically and test it with alert. But this doesn't works, ¿what I'm doing wrong?

HMTL:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">               
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" id="crishk">

<head>
</head>

<body>
    Welcome to Javascript Loader</a>
    <div id="alertme">Alert me!</div>
<script type="text/javascript" language="javascript" src="dynamic.js"></script>
</body>

</html>

File dynamic.js

if (typeof jQuery == 'undefined') {
    alert('You need to install jQuery to proceed.!');

    var oHead = document.getElementsByTagName('head').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
    oHead.appendChild(oScript);

} else {
    alert('jQuery is present...');
}
$(document).ready(function () {
    alert($('#alertme').html());
});

But you should load jQuery in your html. The user doesn't need to load it. . . — Michael Peterson, Feb 09 '13 at 05:29
The load of the jquery API does not occur before the call to `$(document).ready(...)` which fails because `$` has not yet been defined. — Mike Samuel, Feb 09 '13 at 05:30
1. "load jquery dynamically" - put it to google (I'm wondered you didn't do that yourself) 2. How did you get the totally broken code? Haven't you checked each variable has the expected value? — zerkms, Feb 09 '13 at 05:31
Here are some suggestions on how to add javascript libraries dynamically: http://stackoverflow.com/questions/5751620/ways-to-add-javascript-files-dynamically-in-a-page — Anderson Green, Feb 09 '13 at 05:32
I have a PHP script that process the website before the client can see it, the idea is to set available the jquery library in any HTML. — CRISHK Corporation, Feb 09 '13 at 08:07

score 3 · Answer 1 · answered Feb 09 '13 at 05:41

Use onload event to fire functions when jquery being loaded in first if condition. Wrap all other function which require jquery in one function and call it onload of jquery.

this will work for you.

if (typeof jQuery == 'undefined') {
      alert( 'You need to install jQuery to proceed.!');

      var oHead = document.getElementsByTagName('head').item(0);
      var oScript= document.createElement("script");
      oScript.type = "text/javascript";
      oScript.src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
      oHead.appendChild( oScript);
        oScript.onload=onload; //on load handler
}
else {
  alert( 'jQuery is present...' );
  onload();
}
function onload(){

alert( $('#alertme').html() );    
};

check http://jsfiddle.net/WVtt9/

This works if the code is inside onload() but if you put the code outsite the onload, that doesn't works!! .. you can't use newest codes in other points ... — CRISHK Corporation, Feb 09 '13 at 08:05
the other option is to keep all other functions in one file and load they dynamically too.. so your jquery will be loaded first.. — Sudhanshu Yadav, Feb 09 '13 at 10:35

score 0 · Accepted Answer · answered Feb 18 '13 at 07:22

class OutputManager {

    public $output;
    public $dom;
    private $matches;

    function __construct( &$output )
    {
        $this->output = $output;        
        $this->dom = new DOMDocument();
        $this->dom->loadHTML( $this->output );
        $this->dom->normalizeDocument();
        $this->matches = array();
    }

    /**
    * put your comment there...
    * 
    * @param mixed $attr
    * @param mixed $val
    */
    public function elementExists( $tagName, $attr=NULL, $attr_val=NULL )
    {                
        if (count( $this->matches[$tagName] ) == 0) {
            $this->matches[$tagName] = $this->dom->getElementsByTagName( $tagName );
        }

        if ($attr == NULL && $attr_val == NULL) {            
            return $this->matches->length > 0;
        }
        else
        if ($attr != NULL && $attr_val == NULL) {            
            foreach ($this->matches[$tagName] as $match) {
                if ($this->match->hasAttribute($attr))
                    return true;
            }
        }
        else
        if ($attr != NULL && $attr_val != NULL) {
            foreach ($this->matches[$tagName] as $match) {
                if (trim( $match->getAttribute($attr), "/" ) == trim( $attr_val, "/" ))
                    return true;
            }
        }
        return false;
    }

    public function addScript( $src, $at="head" )
    {
        if (!$this->elementExists( "script", "src", $src )) {        

            $result = $this->dom->getElementsByTagName($at);


            $new_script = $this->dom->createElement( "script" );
            $attribute_src = $this->dom->createAttribute( "src" );
            $attribute_src->value = $src;
            $new_script->appendChild( $attribute_src );

            $attribute_type = $this->dom->createAttribute( "type" );
            $attribute_type->value = "text/javascript";
            $new_script->appendChild( $attribute_type );



            $result->item(0)->appendChild( $new_script );

        }
    }

    public function addStylesheet( $href )
    {
        if (!$this->elementExists( "link", "href", $href )) {
            $result = $this->dom->getElementsByTagName($at);

            $new_stylesheet = $this->dom->createElement( "link" );
            $attribute_href = $this->dom->createAttribute( "href" );
            $attribute_href->value = $href;
            $new_stylesheet->appendChild( $attribute_href );

            $attribute_type = $this->dom->createAttribute( "type" );
            $attribute_type->value = "text/css";
            $new_stylesheet->appendChild( $attribute_type );

            $attribute_rel = $this->dom->createAttribute( "rel" );
            $attribute_rel->value = "stylesheet";
            $new_stylesheet->appendChild( $attribute_rel );

            $result->item(0)->appendChild( $new_stylesheet );
        }
    }

    /**
    * Returns the final output.
    * 
    */
    public function getOutput()
    {
        return $this->dom->saveHTML();
    }

    public function getStyles()
    {
        return $matches['link'];
    }

}

How to add javascript dynamically to HTML and load it correctly?

2 Answers2