We Keep Coding

Reloading a dynamically loaded script

I am loading the mathJax javascript library over their CDN dynamically their CDN dynamically. This is so I can apply it to a html partial page I am loading at the same time.
As it stands, the scripts will load once but not reload when the html partial page changes. I have tried using a timestamp on the CDN URL and removing the scripts from the DOM, among other things. I have been trying to solve this all afternoon with no success. There are no errors appearing.
So, is there anything else I can try to get the scripts to reload with each new html snippet? Thanks a ton for any suggestions. Here is my code:
$scope.getLesson = function (x)
{
$scope.lessonMenu = false;
$scope.hiddenMenuLink = true;
x = x.replace(/[\s]/g, '');
$scope.parse = $parse(x)($scope);
var i = 0;
$.get("Lessons/" + x + ".html", function (data) {
// send the current html to view
$scope.currentLessonHTML = data.toString();
// destroy mathjax if existing
if (i > 1 && script1.parentNode != null) {
script1.parentNode.removeChild(script1);
script2.parentNode.removeChild(script2);
i = 0;
}
// loading the MathJax dynamically
var head = document.getElementsByTagName("head")[0];
var script1 = document.createElement("script");
var script2 = document.createElement("script");
var responsibleSibling = document.createElement("script");
var mathJax = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" + "?nocache=" + new Date().getTime();
var mathJaxConfig = 'MathJax.Hub.Config({extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [ ["$","$"], ["\\\\(","\\\\)"] ],displayMath: [ ["$$","$$"], ["\\[","\\]"] ],processEscapes: true},"HTML-CSS": { availableFonts: ["TeX"] }});';
script1.type = "text/x-mathjax-config";
script1[(window.opera ? "innerHTML" : "text")] = mathJaxConfig;
head.appendChild(script1);
script2.type = "text/javascript";
script2.src = mathJax;
head.appendChild(script2);
i++;
// apply new lesson
$scope.showLesson = true;
$scope.$apply();
});
}

I finally figured this out. The script was being reloaded, but it was not applying the typeset specific to the Mathjax library. The solution is a built-in function to queue the typeset to async operations, like such:
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
http://docs.mathjax.org/en/latest/typeset.html
Thanks for feedback.

How to inject jquery to any webpage [duplicate]

This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 8 years ago.
Is there any way to inject jQuery into any page as we do with javascript(from url).
with javascript we do this
javascript:alert("b");
I tried this but I don't know why it dosen't work
javascript:var x = document.getElementsByTagName("head")[0];
var y = document.createElement("script");
y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
x.appendChild(y);
var a = document.getElementsByTagName("body")[0];
var b = document.createElement("script");
b.innerHTML = "$('p').css('border','3px solid red')"
a.appendChild(b);

This is a bookmarklet code to inject jquery in any webpage:
javascript: (function (){
function l(u, i) {
var d = document;
if (!d.getElementById(i)) {
var s = d.createElement('script');
s.src = u;
s.id = i;
d.body.appendChild(s);
}
} l('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', 'jquery')
})();
Update:
I removed the http: part from the URL per #Monkpit comment, which is very important and saves a lot of problems.

Since you are loading jQuery asynchronously, the jQuery variable is not available immediately. This means you cannot use jQuery on the next line; you need to wait until the browser loads jQuery and executes it.
The solution is to use one of the following techniques:
use delay (assume that the script loads after x seconds)
use polling (check typeof jQuery === "function" every x milliseconds)
use callback parameter (append query string such as ?callback=scriptloaded, requires server- side support)
use script element's onload event as described below
function injectScriptAndUse() {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
script.onload = function() {
$("p").css("border", "3px solid red");
};
head.appendChild(script);
}
<p>Paragraph</p>
<button onclick="injectScriptAndUse();">Click to load jQuery and change style of the paragraph</button>

You forgot a semicolon in row 8. This is the code without errors:
javascript:var x = document.getElementsByTagName("head")[0];
var y = document.createElement("script");
y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
x.appendChild(y);
var a = document.getElementsByTagName("body")[0];
var b = document.createElement("script");
b.innerHTML = "$('p').css('border','3px solid red')";
a.appendChild(b);
You can inject jQuery in Chrome by putting it as a bookmark. Just copy the code above, create a new bookmark of a random website. Right click on the bookmark and choose 'Edit', paste the code in the URL box and choose 'Save'. When you click on the bookmark the jQuery script will be injected.
-Lucas

Loading scripts with document.write in an extension's content script

If a script contains:
document.write("<iframe>ads here</iframe>");
If it's included in the html before the page is requested for load, it might look something like this:
<html>
<!-- stuff !-->
<div><script src="document_write.js" type="text/javascript"></script></div>
<body>
</html>
Loading an html page with the code similar to above will result in the <iframe> being placed in the <div> tag which housed the script. If the document.write() is called after the page load, it will overwrite the whole page.
Chrome extensions' content scripts will also overwrite a page with document.write, or crash it - depending on when in the lifecycle of a page it was called.
Is there a way to insert scripts containing document.write() in Chrome's content scripts?

I had faced the same problem when I was working with some conversion tracking scripts on my ajax site. I ended up overriding document.write, which fixed the problem.
$(document).ready(function() {
document.write = function(str) {
var moz = !window.opera && !/Apple/.test(navigator.vendor);
if (str.match(/^<\//))
return;
if (!window.opera)
str = str.replace(/&(?![#a-z0-9]+;)/g, "&");
str = str.replace(/<([a-z]+)(.*[^\/])>$/, "<$1$2></$1>");
if (!moz)
str = str.replace(/(<[a-z]+)/g, "$1 xmlns='http://www.w3.org/1999/xhtml'");
var div = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
div.innerHTML = str;
var pos;
if (!moz) {
pos = document.getElementsByTagName("*");
pos = pos[pos.length - 1];
} else {
pos = document;
while (pos.lastChild && pos.lastChild.nodeType == 1)
pos = pos.lastChild;
}
var nodes = div.childNodes;
while (nodes.length)
pos.parentNode.appendChild(nodes[0]);
};
});

Dynamically Add js file at the end of the page using javascript?

I want to add one js file at the bottom of the page before </body> tag.
I am trying one format. But its not working properly.
My code
var url = 'sample.js';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
But its not working.
Now i check
var x = document.getElementsByTagName('body');
alert(x.length);
its shows 0
How can i add this js file into my bottom of the page. Please advise

See this code
var body = document.body;
alert("Body when page loading: " + body);
document.addEventListener("DOMContentLoaded", function() {
var bodyLoaded = document.body;
alert("Body when page loaded: " + bodyLoaded);
var url = "http://code.jquery.com/jquery-1.10.2.min.js";
var script = document.createElement('script');
script.type = "text/javascript";
script.src = url;
script.onload = function(){
var testP = $("<p></p>");
testP.html("JQuery worked");
$(document.body).append(testP);
}
bodyLoaded.appendChild(script);
});
If first alert you get null. But in second (when body loaded) you get HTMLBodyElement. This is your mistake if you try to append element to body in head before body loaded.

You are writing your this code in the head section and at the time this executes body element is not yet created. This is the only reason for error. Keep this code after body element is created.

Serve alternate external Javascript file depending on if elements are defined or not in the page

Ok, here goes my first question on here.
Setup: We use a javascript based tool to A/B test our landing page designs. I need version A (control) to link to one external javascript file, and version B (variation) to link to an alternate javascript file.
Goal: to have an internal js script at the bottom of the control that looks to see if the tool is in fact serving A or B, and if true, which one was served. The result indicates which external script should be linked.
Issue: regardless of if the tool is in fact serving A or B, the original script is linked first, then if the tool is detected, the appropriate script is linked after that.
Here is my code (I apologize in advance for any newbie mistakes):
//script at bottom of original or tool-served control html page template
<script type="text/javascript">
valForTool = function () {
var variationId = _tool_exp[_tool_exp_ids[0]].combination_chosen;
if (variationId == 1) {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'js/scripts.js';
document.body.appendChild(newScript);
};
}
originalValidation = function () {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'js/scripts.js';
document.body.appendChild(newScript);
}
$(function(){
if (typeof _tool_exp_ids !== 'undefined' && typeof _tool_exp_ids[0] !== 'undefined') {
valForTool();
} else {
originalValidation();
};
});
</script>
//end script on control or original template
//script on tool-served variation html template - will run after the above script
<script type="text/javascript">
$(function() {
$('#project_info input[type=submit]').removeAttr('disabled');
$('#project_info').unbind();
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'js/scripts2.js';
document.body.appendChild(newScript);
$('.input_text').parent().addClass('contact_field');
});
</script>
// end script on variation template
Any ideas as to what I'm doing wrong? Did I provide enough information? Thanks! I love this site as a reference for my questions, but this is my first time actually posting one.

Shortening it down a bit, it seems like your just doing this:
<script type="text/javascript">
$(function(){
if (typeof _tool_exp_ids !== 'undefined' && typeof _tool_exp_ids[0] !== 'undefined') {
var variationId = _tool_exp[_tool_exp_ids[0]].combination_chosen;
if (variationId == 1) {
$.getScript('js/scripts.js', function() {runSecond();});
}
}else{
$.getScript('js/scripts.js', function() {runSecond();});
}
function runSecond() {
$('#project_info input[type=submit]').removeAttr('disabled').unbind();
$.getScript('js/scripts2.js');
$('.input_text').parent().addClass('contact_field');
}
});
</script>
Now looking at that, it's obvious that both scripts are running no matter what conditions are met in those if/else statements, and I don't really get what it is your trying to do, but the first thing i would do, is to add some console.logs to see if those if/else statements are working like they are supposed to, and then figure what scripts should be loaded under which conditions etc ?