How do I dynamically add javascript to HTML and load it correctly?
I'm trying: If jQuery is not there, add jQuery dynamically and test it with a warning. But it doesn't work, what am I 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>
Dynamic.js file
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());
});
+3
source to share
2 answers
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'];
}
}
0
source to share
Use onload event to trigger functions on jquery load on first if condition. Wrap all other function that requires jquery in one function and will call it when jquery is loaded.
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 out http://jsfiddle.net/WVtt9/
+3
source to share