Hello i need to use JavaScript to load a script tag in the head of my document. The problem is i create the script element fine, but this source is not loaded once the rest of the javascript executes. Is there a better way to load the script before the rest of the JS executes?
<script>
var jQ = document.createElement('script');
jQ.src = '../EmergencyBroadcastScripts/source/jquery-1.10.1.min.js';
jQ.type = 'text/javascript';
document.head.appendChild(jQ);
$.noConflict();
jQuery(document).ready(function () {
jQuery('.fancybox').fancybox();
});
</script>
This code will produce the error "$.noConflict is not a function" because its not loading the JQ script source before it executes my code. This is my problem. Any ideas??
Try:
jQ.onload = function () {
$.noConflict();
jQuery(document).ready(function () {
jQuery('.fancybox').fancybox();
});
}
I don't know if it will work in this scenario but it works with images on a canvas.
Related
I have a question I don't understand, is this kind of bug or not, I have a jquery script that makes preloader disappears, but when I refreshing page after some 2 or more times, it bugs out and doesn't disappears when it should. Then I refresh the page again preloader disappears how it should.
Why I think its a bug because I have also script that doesn`t let website scroll, and it works perfectly and it uses almost the same script.
My code in main.js (I linked to html):
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'JS/jquery-3.6.1.min.js';
newScript.onload = function () {
alert("Script is ready!");
$(document).ready(function () {
aler("JQuery is ready!");
});
};
var head = document.getElementsByTagName("head")[0];
head.appendChild(newScript);
newScript.onload = function () {
$(".loader-wrapper", 'body').fadeOut("slow");
};
I changed a bit code because it started not loading everytime when I wanted to add more script. so I used this code, I hope that I helped someone :)
Jquery:
$(document).ready(function () {
$(".loader-wrapper", 'body').fadeOut("slow");
});
Help me please! Why this code not work? It does not show alert.
var jqueryScript = document.createElement('script');
jqueryScript.src =
'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
jqueryScript.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jqueryScript);
$(function() {
$("#main").click(function() {
alert("asdasd");
});
});
Thank you in advance!
Probably because jQuery lib is not loaded as it loads asynchronously made that way, and no one can guarantee you when it will load on time, which is not that way if you load it by <script> tag, so $(function() { ... }); won't work as $ which represents $.jQuery( is not initialized yet. If you execute the script second time without reloading the page, it will work, as jQuery will be loaded from the first execution, even its made in wrong time.
A client is using Sharetribe which allows you add custom JS via admin, but only in the head. I want my script to load after jQuery, but jQuery is loaded at the end of the body. How can I write vanilla JS that adds my main script to the end once the doc loads?
I tried this:
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://cdn...";
document.body.appendChild(script);
var script2 = document.createElement("script");
script2.type = "text/javascript";
script2.text = "$(SOME.CODE.HERE);"
document.body.appendChild(script2);
</script>
But it gets executed before the document is finished loading (and in particular, before jQuery is available). The only thing I can think of is to set a timer, but that seems buggy.
Any advice?
Use DOMContentLoaded event:
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM fully loaded and parsed");
// Your code here
});
DOMContentLoaded is same as ready event of jQuery.
Documentation
Tell your code to wait for the DOM to finish loading:
window.onload = function() {
var script = document.createElement("script");
script.type = "text/javascript";
//....
}
Or using jQuery:
$(document).ready(function() {
var script = document.createElement("script");
script.type = "text/javascript";
//....
});
As you're waiting for jQuery to load, you can simply wrap your code within jQuery's $(document).ready() method:
$(document).ready(function() {
// Your code here.
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
I realise that you've mentioned that you want this in "vanilla" JS, but as you're waiting for jQuery to load anyway this seems a bit redundant.
When the browser run your code in <head>, the <body> element didn't existed yet. So, document.body was null.
To create a script a the <body> element, use 'load' event of document, for example:
.............
document.addEventListener('load', function(event){
var script = document.createElement('script');
...............
document.body.appendChild(script);
}, false);
............
$(document).ready(){} is executed when your dom element render successfully.
Instead of copy/pasting the code below from browser update on every page, I'd like to include it in a scripts.js file.
My question is: do I need to wrap the code into something, for instance $(function() { since I will remove the <script> tags?
Thanks
<script type="text/javascript">
var $buoop = {};
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "//browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
That code is horrible :-/ It simply dynamically loads the http://browser-update.org/update.js script in a window.onload handler.
If you want to load it as an external script, you can just directly load it:
<script type="text/javascript" src="//browser-update.org/update.js" async></script>
Do I need to wrap the code into something, for instance $(function() {, since I will remove the <script> tags?
No, you don't. However, if you have jQuery available, then you might simply use
$(function() {
$.getScript("//browser-update.org/update.js");
});
I am loading javascript file dynamically to speed up performance of my page. The code is
<head>
<script type="text/javascript">
function includeJS(){
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = "script/TestScript.js";
document.getElementsByTagName('head')[0].appendChild(scriptElement);
testFunction();
}
</script>
</head>
The testFunction() is present inside the TestScript.js. So it is throwing an error like 'testFunction() is undefined' as the JavaScript file is not completely loaded. So I tried with setTimeout function to fix it. The code is
setTimeOut('testFunction()',1000);
Its working fine now. But I can not put the delay time 1000 in server as the JavaScript file loading is depends on the internet speed and file size. So is there any other way to fix it.