i have python app that passes html to page as part of a json payload. what i am trying to do in that page is to decode the html and dynamically add it to the DOM. the html markup is for a Div element with child script elements. this is my code, which prints out the decoded HTML fine, but does not actually execute the script:
<div id="parentDiv">
<script src=".1.1.min.js"></script>
<script type='text/javascript'>
var child_div = "<div id='testDiv'>\n <script src=".v3.min.js"></script>\n <script>\n d3.select("#testDiv") \n .data([4, 8, 15, 16, 23, 42])\n .enter().append("p")\n .text(function(d) { return "I'm number " + d + "!";\n });\n </script>\n </div>";
decoded = $('<div />').html(child_div).text();
console.log(decoded);
$("#parentDiv").append(decoded);
</script>
</div>
If however i take that html that is logged in the above code and create a page out of it, it works fine with the script executing as it should. this is what the decoded html looks like and what i am hoping to dynamically add to the parent div:
<div id="parentDiv">
<script src=".1.1.min.js"></script>
<div id='testDiv'>
<script src=".v3.min.js"></script>
<script>
d3.select("#testDiv")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; });
</script>
</div>
</div>
What am i doing wrong here?
i have python app that passes html to page as part of a json payload. what i am trying to do in that page is to decode the html and dynamically add it to the DOM. the html markup is for a Div element with child script elements. this is my code, which prints out the decoded HTML fine, but does not actually execute the script:
<div id="parentDiv">
<script src="http://code.jquery./jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
var child_div = "<div id='testDiv'>\n <script src="http://d3js/d3.v3.min.js"></script>\n <script>\n d3.select("#testDiv") \n .data([4, 8, 15, 16, 23, 42])\n .enter().append("p")\n .text(function(d) { return "I'm number " + d + "!";\n });\n </script>\n </div>";
decoded = $('<div />').html(child_div).text();
console.log(decoded);
$("#parentDiv").append(decoded);
</script>
</div>
If however i take that html that is logged in the above code and create a page out of it, it works fine with the script executing as it should. this is what the decoded html looks like and what i am hoping to dynamically add to the parent div:
<div id="parentDiv">
<script src="http://code.jquery./jquery-2.1.1.min.js"></script>
<div id='testDiv'>
<script src="http://d3js/d3.v3.min.js"></script>
<script>
d3.select("#testDiv")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; });
</script>
</div>
</div>
What am i doing wrong here?
Share Improve this question edited Sep 16, 2014 at 2:41 mike01010 asked Sep 16, 2014 at 2:27 mike01010mike01010 6,0886 gold badges55 silver badges93 bronze badges 6- Aint u missing a semicolon?? – Abhi Commented Sep 16, 2014 at 2:30
- i was, but that doesn't solve my issue. – mike01010 Commented Sep 16, 2014 at 2:33
-
Can't you include d3js directly on the page ? added: i meant the
<script src="http://d3js/d3.v3.min.js"></script>part.just like jQuery – Himal Commented Sep 16, 2014 at 4:04 - I'd prefer keep such that the div element being injected into the page knows about all it's references/includes rather than having the page 'owner' have to make modifications to support my snippet. – mike01010 Commented Sep 16, 2014 at 5:34
- $(decoded).appendTo("#parentDiv"); – Teo Commented Sep 16, 2014 at 8:12
6 Answers
Reset to default 5 +50Once you have appended your elements do the DOM they do exist in the DOM however the script has not been initialized.
You can access the script tags with something like this:
function getScriptsAsText() {
var div = document.createElement('div');
var scripts = [];
var scriptNodes = document.getElementsByTagName('script');
for (var i = 0, iLen = scriptNodes.length; i < iLen; i++) {
div.appendChild(scriptNodes[i].cloneNode(true));
scripts.push(div.innerHTML);
div.removeChild(div.firstChild);
}
return scripts;
};
This function will return the scripts in an array. Filter through the array until you find the script you are after and then eval it.
var scripts = getScriptsAsText();
eval(scripts[0])
or simple you can use http://www.dustindiaz./scriptjs :) simple
$script('http://d3js/d3.v3.min.js', function(){
d3.select("#testDiv")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; });
});
Problem is you are executing d3.js codes before loading the d3js file.you might wanna look into jQuery.getScript
Something like,
$.getScript('http://d3js/d3.v3.min.js', function(){
//d3.js stuff here
});
Added:
Also your current script probably won't even load the d3.js file.you have to use something like,
<script>
var scref=document.createElement('script');
scref.setAttribute("type","text/javascript")
scref.setAttribute("src", 'http://d3js/d3.v3.min.js');
document.getElementById("parentDiv").appendChild(scref);
</script>
The script is being loaded asynchronously, which essentially means that the JavaScript below it is executing before the functions and variables in the d3.v3.min.js exist. Standard JQuery contains a function called $.getScript() which prevents execution of a script until the dependency specified as the first parameter pletes loading. You will have to change the server generated code to look something like below:
<div id='testDiv'>
<script>
$.getScript('http://d3js/d3.v3.min.js', function(){
d3.select("#testDiv")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d){
return "I'm number " + d + "!";
});
});
</script>
</div>
Lastly as per your example, using the following to execute it:
var child_div = **ABOVE MENTIONED ENCODED VERSION**;
var decoded = $('<div />').html(child_div).text();
$("#parentDiv").append(decoded);
Hope this helps
Try adjusting piece at OP
<div id="parentDiv">
<script src="http://code.jquery./jquery-2.1.1.min.js"></script>
<!-- added
`<script src="http://d3js/d3.v3.min.js"></script>`
-->
<script src="http://d3js/d3.v3.min.js"></script>
<script type='text/javascript'>
// removed
// `<script src="http://d3js/d3.v3.min.js"></script>\n`
var child_div = "<div id='testDiv'>\n <script>\n d3.select("#testDiv") \n .data([4, 8, 15, 16, 23, 42])\n .enter().append("p")\n .text(function(d) { return "I'm number " + d + "!";\n });\n </script>\n </div>";
decoded = $('<div />').html(child_div).text();
console.log(decoded);
$("#parentDiv").append(decoded);
</script>
</div>I tried the below and it worked. I converted your code to a function where you render the script first and then calling the function.
<html><head></head><body>
<div id="parentDiv">
<script src="http://code.jquery./jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
function f1() {
var child_div = "<div id='testDiv'>\n <script src="http://d3js/d3.v3.min.js"></script>\n <script>\n d3.select("#testDiv") \n .data([4, 8, 15, 16, 23, 42])\n .enter().append("p")\n .text(function(d) { return "I'm number " + d + "!";\n });\n </script>\n </div>";
decoded = $('<div />').html(child_div).text();
alert(decoded);
console.log(decoded);
$("#parentDiv").append(decoded);
}
f1();
</script>
</div></body></html>