We Keep Coding

add javascript file from server in localStorage

I need to add a Javascript file from the server to the LocalStorage and site header.
i try this code but some things wrong??
var s = document.createElement("script");
s.type = "text/javascript";
s.src = localStorage.theImage;
s.title = "myJavaScript";
$("head").append(s);
function addScript() {
var csvRequest = new Request({
url: "splitNumber.js",
onSuccess: function (response) {
var responseFile = response;
var file = responseFile;
var reader = new FileReader();
reader.onload = function (e) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = reader.result;
localStorage.theImage = reader.result;
$("head").append(s);
}
reader.readAsDataURL(file);//attempts to read the file in question.
});
}
}
Thanks.

Make sure these files are loaded before it run any other script

Hi I have a stylesheet and JavaScript function which loads in all the required files for that template.
However I am having a bit of an issue due to when the other script tags run within the template file (plan js code) it does not wait for the required files to load.
So what you have happening is scripts not recognizing functions and other JS functions.
JS Code
<script type="text/javascript">
var uid = '{$smarty.session.ipet_user}';
function stylesheet(url) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.async = false;
s.href = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
function script(url) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
(function () {
script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');
script('https://apis.google.com/js/api:client.js');
script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI');
script('./templates/main/user-theme/javascript/google.js');
script('plugins/getmdlselect/getmdl-select.min.js');
script('./templates/main/user-theme/javascript/facebook.js');
script('./templates/main/user-theme/javascript/newprofile.js');
script('./templates/main/javascript/zipcode.js');
stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
stylesheet('https://fonts.googleapis.com/css?family=Roboto');
stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
stylesheet('./templates/main/user-theme/tpl-files/material.act.css');
stylesheet('plugins/dropzone/dropzone.css');
stylesheet('plugins/stepper/stepper.min.css');
stylesheet('./templates/main/user-theme/tpl-files/style.css');
stylesheet('./templates/main/style/newprofile.css');
stylesheet('plugins/getmdlselect/getmdl-select.min.css');
})();
</script>

You can use load event of <script> and <link> element, Promise constructor and Promise.all() to return a resolved Promise once all requested resources have loaded by passing an array of URL's to request to Array.prototype.map() where each array of URL's is concatenated to a single array where each function is called which returns a Promise
function stylesheet_(url) {
return new Promise(function(resolve, reject) {
var s = document.createElement('link');
s.rel = 'stylesheet';
// s.async = false;
s.href = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
s.onload = resolve;
s.onerror = reject;
})
}
function script(url) {
return new Promise(function(resolve, reject) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
s.onload = resolve;
s.onerror = reject
})
}
function loadStylesAndScripts(styleList = Array(), scriptList = Array()) {
return Promise.all(
styleList.map(stylesheet_)
.concat(scriptList.map(script))
)
}
let requests = loadStylesAndScripts();
requests.then(function() {
console.log("styles and scripts loaded")
})
.catch(function(err) {
console.log("an error occurred requesting styles and scripts")
})

Append javascript function to div

I need to add the following code to the footer of my page, but I have to do it using javascript code.
Code I need to add:
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter39519115 = new Ya.Metrika({
id:39519115,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
What I tried to add:
$('#footer').append('<script type="text/javascript">' + (function (d, w,.... + '</script>');
However, this does not work for me.

Place your javascript in a separate .js file and then you need to use the document.createElement method to add/append your script to your footer block.
Try the below snippet.
var scriptSource = document.createElement('script');
var scriptURL = 'your_script_file_url_goes_here';
scriptSource.type = 'text/javascript';
scriptSource.src = scriptURL ;
$("#footer").append(scriptSource);
Hope this helps!.

I'm trying to load a js and a css file from within a javascript

I'm trying to load a js and a css file from within a javascript in chrome I can see that both files are loaded, the mofo alert is triggered, and then the test alert, but not the test2 alert.
Why is that, is there an error in the javascript I can't see?
function loadScript(url, callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
document.getElementsByTagName('script')[0].appendChild(script);
}
function loadCss(url, callback){
var elem = document.createElement('link');
elem.href = url;
elem.type = 'text/css';
elem.rel = 'stylesheet';
elem.media = 'all';
document.getElementsByTagName('script')[0].appendChild(elem);
}
var coptaJQStart = function() {
var jQuery_1_11_3 = $.noConflict(true);
alert('test');
};
var coptaCssStart = function() {
alert('test2');
};
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', coptaJQStart);
loadCss('http://www.tffan.com/copta.css', coptaCssStart);
alert('mofo');

You have to attach call back function in loadCss
elem.onreadystatechange = callback;
elem.onload = callback;
function loadScript(url, callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
document.getElementsByTagName('script')[0].appendChild(script);
}
function loadCss(url, callback){
var elem = document.createElement('link');
elem.href = url;
elem.type = 'text/css';
elem.rel = 'stylesheet';
elem.onreadystatechange = callback;
elem.onload = callback;
elem.media = 'all';
document.getElementsByTagName('script')[0].appendChild(elem);
}
var coptaJQStart = function() {
var jQuery_1_11_3 = $.noConflict(true);
alert('test');
};
var coptaCssStart = function() {
alert('test2');
};
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', coptaJQStart);
loadCss('http://www.tffan.com/copta.css', coptaCssStart);
alert('mofo');

javascript weirdness in IE8, document.write issue

Any idea why putting google plus code this way wont work in IE8 or any other version I guess? Works just fine in firefox though.
live demo: http://jsfiddle.net/9zqsZ/
<script>
var socialString = '<g:plusone size="tall"></g:plusone>';
document.write(socialString);
//google plus share button
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I am just trying to put it in external file. The weird thing is it just does not work with document.write and works if is placed directly in html. How to implement it in that case?

You could do something like:
<script>
if (navigator.appVersion.indexOf("MSIE") != -1) {
var socialString = '<g:plusone size="tall"></g:plusone>';
var newEle = document.createElement(socialString);
document.body.appendChild(newEle);
}
else {
var socialString = '<g:plusone size="tall"></g:plusone>';
document.write(socialString);
}
//google plus share button
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>