I am trying to call a function that, on the load of the script above it, will run some JavaScript.
<script src="../Layout/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="helperscript.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var itemid = '1';
if(itemid)
{
idselect(itemid);
}
})
</script>
helperscript.js contains the function idselect.
When I load the page I get an error saying that 'idselect is undefined', even though it is in the above file. I suspect that this is due to helperscript not being fully loaded yet, but that is just a hunch.
Can anyone help me?
Scripts load in order and are blocking.
There must be a problem with the loading of the script, not the timing.
Most likely you have either a mistake in the URL (resulting in a 404) or a JavaScript error (which would show up on the error console)
I don't think your hunch is right, because this script tag:
<script type="text/javascript" language="javascript" src="helperscript.js"></script>
should block any other javascript from executing until helperscript.js is downloaded and executed.
Use jQuery.getScript() and register a success function. It will be safe to use idselect on or after the success function is executed.
http://api.jquery.com/jQuery.getScript/
Make sure your path to the script to the .js file is correct.
Also cut the language="javascript" part.
Related
I'm working on a spring mvc application, and my javascript is directly in my html files. For whatever reason, this code is never executed. I even have a coded in breakpoint and it's never hit. No errors or anything are thrown from the chrome debugger. It seems like nothing runs at all, even when I write jibberish. I've tried explicitly defining jquery in case there were any conflicts, but there is nothing. This is the code on the bottom of my page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(document).ready(function(e){
debugger;
alert( "ready!" );
});
</script>
You should not use any script inside the script tag which is used to link a js file. Create another script tag and paste your code in it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("ready!");
});
</script>
I have an external JavaScript src which I want to add a loading animation until it's finish loading:
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
I'm currently using jQuery (window).load, but its waiting until all page is fully loaded, I want to wait only for that specific code:
<script>$(window).load(function(){$(".loadingif").hide();});</script>
Update:
This is my code as you have suggested, it's is not working, what I'm doing wrong---
some text.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script>hideLoading();</script>
some text.....
<script>function hideLoading(){$(".loading-gif").hide();}</script>
Hopefully this works:
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">
hideLoadingThingy();
</script>
The second script should run after the first one finishes loading. This is because it is included after the first one, so the first one is loaded first.
Unless the methods in xxx.js are called asynchronously, your browser will only execute one task at a time. Read more about that here
Update:
Use this:
some text 2.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">$(".loading-gif").hide();</script>
some text 2.....
You could key off of the expected javascript object that will be loaded into global scope:
(function checkValue(){
if (libraryValue === undefined){
setTimeout(checkValue, 100);
} else {
$(".loadingif").hide();
}
})();
I would use Feathercrown's solution unless you choose to load that library asynchronously.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
functionFromAJS();
</script>
</body>
</html>
this works OK most of the time, but on production server, its not 100%. It says that functionFromAJS() doesnt exists, which is ok, if the .js is not gets loaded in time. But then what to do?
EDIT: Using the window.onload function should not do any difference as long as the script you're embedding is loaded before the function call. Then the a.js file will be loaded before <script>functionFromAJS();</script> anyway and you should be able to execute the function if it exists.
Try using:
<script>
window.onload = function() {
functionFromAJS();
};
</script>
So that the function is not called before the document is fully loaded.
Or if you're using jQuery you can use:
<script>
$(document).ready(function() {
functionFromAJS();
});
</script>
If the function doesn't exist, then it's not a matter of the file not being loaded in time, then the file isn't loaded at all.
When the browser encounters a script tag for loading a file, then it will stop the parsing of the page until the file has been loaded, or until the file fails to load. The functionFromAJS will never be called before the browser has completed the attempt to load the file.
If the file fails to load, then there isn't much you can do. You can check if the function exists before you call it to avoid the error. You could even try to load the script again, but if it failed the first time then it's likely that it will still fail.
I have a script being loaded on my index.html page. It has dependencies on jQuery, bootstrap.js, & metisMenu.js all of which are being loaded before it. I can't figure out why this script is not being immediately executed.
If I open the chrome console and run the code, it works just fine, I'm also not seeing any errors in console.
index.html
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.js"></script>
<script src="scripts/custom/sb-admin.js"></script> //This is the script I'm referring to
</body>
sb-admin.js
$(function() {
$('#side-menu').metisMenu();
});
What am I missing here? I'm almost positive $(function() {...}); is shorthand for document ready in jquery, yes?
This script is for the nav.html view, and on index.html, because I was using <div ng-include="'views/nav.html'"></div> the page had technically loaded and executed my script, even though Angular still was loading the ng-include view.
I moved the script into nav.html and now it seems to be working just fine. Thanks to #zerkms for reminding me to use debugger; which I should have done in the first place O_o
try instead
$(document).ready(function() {
});
;-)
and if you try to do an IIFE (look on google)
do
(function() {
})();
On my index.html I am doing the following:
<script src="jquery/jquery.js"></script>
<script src="managment.js"></script>
<script src="jquery/jquery.mobile-1.1.0.js"></script>
After doing some calculation, I have the need of using a function from the managment.js file:
$.getScript("managment.js", function(){
alert("Script loaded and executed.");
login();
});
}
And finally the managment.js file:
<script type="text/javascript">
function login(){
alert("asdasdasdasdasdasd");
}
</script>
My issue, is that the login() function is never called. Actually the alert I have inside getScriptfunction is not called either, but the strange thing is that if I check if the jquery.js file is loaded the alert is called. More, if I try to call login() without doing getScriptnothing happens has expected. My files structure is the following:
(note: you can see that I am using 2 managment.js files. I tried both approaches to see if the problem was with the path of the file.)
What am I missing here? For relevance, I am using PhoneGap, but this isn't working on the browser as well.
The management.js file should not contain the <script type="text/javascript"> tag. It should be:
function login(){
alert("asdasdasdasdasdasd");
}
Hope it helps! :)