On our webpage we've got a few external scripts to load things like Axios and Vue. Then much further down the page we've got inline scripts using those.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
... 100 + lines of html later ...
<script type="text/javascript">
'use strict';
$(document).ready(function() {
axios.defaults.baseURL = 'blahblah';
var app = new Vue({
...
});
});
</script>
We're getting axios is undefined errors from a small number of users. We've tried to simulate their OS/Browser setup but we can't reproduce the error ourselves.
It was our understanding the external scripts should load first and the browser only runs the inline ones after all external ones have finished?
Any ideas?
jQuery 1.7 is loaded in the head tag long before this code. Move the external scripts into the head before jQuery doesn't seem to help.
Related
I have 4 JS scripts and 1 JQuery script src at the bottom of my HTML page. When I include the JQuery script, though, the code in JS script delayed.js only works for a second, then stops. All the other JS scripts work. How can I fix this?
I have tried:
changing the order of the scripts on the HTML page
changing the JS code in delayed.js into JQuery
moving the JS code in delayed.js into another JS script in which JS is working
Changing the JQuery reference (e.g. from Google APIs)
Here's the code at the bottom of my HTML page:
<script defer src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script defer src="assets/js/skel.min.js"></script>
<script defer src="assets/js/util.js"></script>
<script defer src="assets/js/main.js"></script>
<script defer src="assets/js/delayed.js"></script>
Here's the code in delayed.js. It's for changing the style of the nav item according to the specific page you're on, so as a user the page you're currently on is always clear.
if (document.body.classList.contains('index')){
document.getElementById('nav-wwd').classList.add('selected');
}
if (document.body.classList.contains('approach')){
document.getElementById('nav-oa').classList.add('selected');
}
if (document.body.classList.contains('about')){
document.getElementById('nav-wwa').classList.add('selected');
}
if (document.body.classList.contains('insights')){
document.getElementById('nav-oi').classList.add('selected');
}
if (document.body.classList.contains('contactus')){
document.getElementById('nav-c').classList.add('selected');
}
Thanks in advance for any advice you can give.
I offen heard that loading jquery as last element is a good idea because this way a web page loads faster. At the same time I have a script in the header which shows error:
$(document).ready(function () {// Uncaught ReferenceError: $ is not defined
...
}
Should I move jquery loader before the script or I need to change this script some way?
Your concrete issue stems from the fact that you execute statements that use jQuery (i.e. they execute $, which is a function in the jQuery library, also called "the jQuery function" because jQuery is an alias) before it is loaded.
True, it is typically recommended to load scripts last, but that still means the scripts have to be loaded in the correct order, with usually jQuery before your own scripts using jQuery.
If you really want to load your own scripts before jQuery for some reason, you need to defer its execution and have a third helper script to run it, e.g.:
// script.js
(function() {
function myLibraryMainFn() {
$('div').text('simulating work, utilizing jQuery');
}
window.myNamespace = {
run: function() {
myLibraryMainFn()
}
};
}());
<!DOCTYPE html>
<html>
<body>
<div></div>
<script src="script.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
// Run your script now:
window.myNamespace.run();
</script>
</body>
</html>
Always refer library file first(in your case jQuery), then use it next..For page load and performance add it before body end tags of your HTML
I have a website that I want to work online and offline. I want to decrease load time, so I minified the slow loading scripts. It didn't work enough. Locally, some of the scripts are taking 4-6 seconds to load.
I know that linking scripts externally speeds it up drastically. I have tried it and it works. But some of the users will not have internet access. Is there a way to link a group of scripts to an external site, and locally if they do not have internet access?
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="ui/jquery-ui.min.js" type="text/javascript"></script>
You can do something similar to this answer. Basically, the idea is that you attempt to load the Internet based script for jQuery. Afterward, you do a normal script where you check if jQuery === undefined. If it does, you want to load the local copy.
Basically, an example of what you want to do:
<script src="[jQueryURL]" type="text/javascript"></script>
<script src="[dataTablesURL]" type="text/javascript"></script>
<script src="[jQueryUIURL]" type="text/javascript"></script>
<script type="text/javascript">
if(jQuery === undefined) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/jquery-1.9.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
//repeat for other two scripts here
}
</script>
What will happen is that it will attempt to load the scripts in question, and afterward it will check if jQuery is defined. If it's not, that means the scripts didn't load, so you want to load the local versions and append them to your header.
Ensure that the script declares a global variable you can test for. Then generate a local script loading element if the external script fails to load (which you can determine by testing for that variable).
<script src="http://example.com/example.js"></script>
<script>
if !(window.Example) {
document.write('<script src="../scripts/example.js"><\/script>');
}
</script>
<script type="text/javascript">
if(navigator.onLine)
{
alert("Connected");
}
else
{
alert("Not Connected");
}
</script>
First Check if internet connection exist then load external file other wise load internal file
I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.
I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.
You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>
Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.