So I have a static HTML page that I cannot edit and I need to add jQuery to it and then do some div manipulation (height) on document ready. I found this post which describes how to insert it into a page, which works great. I added that to my javascript file and it inserts it into the page. The problem is that I need to perform some actions on $(document).ready() on that same page, but it says that $ is undefined.
What I would like to do is something like this:
var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function() {
// Resize my div's to the browser window
});
But I can't seem to get it to work. Is this possible? How?
var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
script.onload = resize; //most browsers
script.onreadystatechange = function() { //ie
if (this.readyState == 'complete') {
resize();
}
}
document.getElementsByTagName('head')[0].appendChild(script);
function resize() {
//code goes here
}
This is due to the ready event firing before the JS jQuery file has loaded. Here is a good tutorial on how to do it.
http://www.ejeliot.com/blog/109
This isn't going to help your page performance though to load your jQuery like this. You should really try to minimize your JS and use as few requests as possible for the best user experience.
Also, you don't need to write
$(document).ready(function() { });
You can just write
$(function() { });
Related
I am trying to write a small check that will test for jQuery, and if not present, dynamically load a copy so that a script can be run by it. It sets to no conflict in case anything else is present that also uses $, and then runs the script - a small menu.
However, upon actually testing this jQuery is loaded from the script, but fails to execute: "jQuery is not defined."
I know that jQuery has to come first before any functions that use it, but is there any way to fix this when it is dynamically installed?
(function() {
console.log("Loaded");
if(!window.jQuery) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
jQuery.noConflict();
}
})();
You're not waiting until the script has loaded.
script.onload = function(){
// do whatever
};
Is it possible to call the below script on button click?
<script type="text/javascript" src="https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&e=false"> </script>
I want to use a custom button.
It depends on the logic in script but basically yes you can. See example code below. Then you have to add click event to your button with this function.
function addscript() {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script);
}
It appears you are using the Paga Service api. If you plan on submitting with your custom button, then after the script is loaded, you need to trigger $('#__paga_btn').click() which is can be found from Using the chrome dev tools to inspect element and get the id of the link. #__paga_btn, NB, the script is required to be loaded after the form element. Something like this would suffice for your case
function addscript() {
var head = document.getElementsByClassName("pagalink")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxxxxxxxxxxxxxx&e=false&layout=V";
head.appendChild(script); //Figure out a way to detect when script has loaded.
$('#__paga_btn').click(); // needs to be called after the script as loaded to submit the form.
}
the pagalink node need to be placed below the form element on the page. Since that is where you would actually put the script. The script isn't really customizable since it modifies the dom on load.
I have script (myscript.js) which create div and animate div in any HTML page. my script is using Jquery animation function
I am currently using following code (it's sample snippet)
<script src="jquery.js"><script>
<script src="myscript.js"><script>
But is this possible to use only following code which can automatically add JQuery library also?
<script src="myscript.js"><script>
Insert this on top of your myscript.js
var h=document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';
h.appendChild(s);
but you will have to wait until script loaded using waitforload function
function w4l(){
if (typeof jQuery != "function"){
setTimeout("w4l()", 1000);
return;
}else{
//Do Jquery thing
}
}
w4l();
or just simply copy all jquery.js code file into your myscript.js, AKA merge 2 file into one
To make sure that the rest of myscript.js doesn't get executed before jQuery is loaded, use something like this:
function dostuff() {
//animate elements, etc.
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'jquery.js';
script.onreadystatechange = dostuff;
script.onload = dostuff;
head.appendChild(script);
Note: it's a bit unclear why you wouldn't want to explicitly add the jQuery part in your head.
I'm using joomla site, and Forced to use extra java script.
My Question is:
How to force loading the javascript ONLY after page complete
I dont mean DELAY them, But make them in Queue till the page complete loading.
I tried many of links tutorial but nothing helps me.
Please,
Would you provide correct example in order to make me understand.
Example to JS file I inserted to buttom of my page:
<script src="/js/easing.js" type="text/javascript"></script>
Can you provide Jquery code to force all those script to wait till the page load complete?
Thank you
Tariq
Ales Kotnik answer's in great, and also if you want to do it in your own specifiec time, you can do something like that:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
this will load a script only when you call it, and then you activate it like this:
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
Use <script src="..." async="async"/>. In modern browsers (HTML5)it will spawn fetching javascript files separately and won't delay loading of your HTML. You can just put script tags at the end of your <body>.
I would like to know if there is a way to dynamically load some JS files before "$(document).ready" gets called. These JS files should be loaded and available in the ready event handler.
Does jquery provide a way to do this?
The issue here (as you might expect) is the ability to load a specific localized version of my JS files depending on whichever locale/language is selected.
Thanks
If you want in pure javascript you can try this.
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () {
if (this.readyState == 'complete'){
//Your can write your code here
};
}
script.src= 'script.js';
head.appendChild(script);
Alertnatively you can use jQuery's getScript method
$.getScript("script.js", function(){
//Your can write your code here
});
Try this:
jQuery.getScript("url here")
http://api.jquery.com/jQuery.getScript/