Reputation: 51
hi experts im a new guy and i have a program that builds a dynamic script inside a existing script
<html>
<head>
<title>Depot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="localfiles/css/pignose.layerslider.css" rel="stylesheet" type="text/css" media="all" />
<link href="localfiles/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="localfiles/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="localfiles/js/pagebuilder.js"></script>
</head>
<body onload="BuildHome()">
<div id="header_content"></div>
</body>
function BuildHome(){
var bannergrid = document.createElement("div");
bannergrid.className = "banner-grid";
var visual = document.createElement("div");
visual.id = "visual";
ba nnergrid.appendChild(visual);
var slide_visual = document.createElement("div");
slide_visual.className = "slide-visual";
visual.appendChild(slide_visual);
var banner_ul = document.createElement("ul");
banner_ul.className = "slide-group";
slide_visual.appendChild(banner_ul);
var slide_script_pignose = document.createElement("script");
slide_script_pignose.src="localfiles/js/pignose.layerslider.js";
slide_script_pignose.type="text/javascript";
var slide_script = document.createElement("script");
slide_script.type="text/javascript";
var slide_script_text = document.createTextNode("$(window).load(function() { $('#visual').pignoseLayerSlider({ play : '.btn-play', pause : '.btn-pause', next : '.btn-next', prev : '.btn-prev' }); });");
slide_script.appendChild(slide_script_text);
bannergrid.appendChild(slide_script_pignose);
bannergrid.appendChild(slide_script);
banner_ul.appendChild(slide_li);
document.getElementById("header_content").appendChild(bannergrid);}
when it runs it doesn't show error but the script that has been added dynamically is not working for example: FIY: this is a slider image
<div id="visual">
was created dynamically and it must have a class that has been also dynamically added from
pignose.layerslider.js
and it must be like this:
<div id="visual" class="pignose-layer">
but it's not displaying the class. i need to dynamically add the class inside the pignose.layerslider.js bacause of its funtionality. My analysis is that the script that has been added dynamically is not working/executing please help if thier is a way to run/execute script that has been added inside a script or something that can help!
thank you in advance! sorry for my language not good in english :)
Upvotes: 3
Views: 894
Reputation: 7266
Following is the working code. Try running it. You could update your code to follow the same pattern.
You will need to create a script
element. Trigger your method from external script inside onload
method of this dynamically loaded script.
var headEL = document.getElementsByTagName('head')[0];
var scriptEL = document.createElement('script');
scriptEL.type = 'text/javascript';
scriptEL.src = 'https://rawgit.com/adikari/07690f28bcbe751d0694215d83cff30f/raw/4f045b95c7b3971ef0c7bf917ef9362635cea200/hello.js';
scriptEL.onload = function() {
sayHelloFromExternalScript();
};
headEL.appendChild(scriptEL);
Upvotes: 1
Reputation: 447
Are you sure that you loaded jQuery?
Try adding this line after your <meta>
tags:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Also, see https://stackoverflow.com/a/13122011/5298002
Maybe it's because you didn't add the script to the head of the file.
Upvotes: 1