Why this odd behavior?
An error in javascript inside a script tag prevented the javascript included with a 2nd script tag from working. Commenting the bad lines allowed the 2nd, included script to work.
My question is, why does it behave this way? Shouldn't a second, included script be unaffected by any kind of errors in a separate, unrelated script element?
It took me awhile to fix this, because although I saw errors in the console, they weren't in my included script and therefore seemed irrelevant.
Here is the console error:
jquery.table.addrow.js:26 Uncaught TypeError: $(...).live is not a function
at ExpandableTable.live (jquery.table.addrow.js:26)
at init.$.fn.btnAddRow.$.fn.tableAutoAddRow (jquery.table.addrow.js:299)
at HTMLDocument.<anonymous> (?c=cf&v=sis&sf=cs&n=63:28)
at fire (jquery.js:3048)
at Object.fireWith [as resolveWith] (jquery.js:3160)
at Function.ready (jquery.js:433)
at HTMLDocument.completed (jquery.js:104)
And here is the code that caused the error. After I comment the offending code in the first <script> element, the 2nd <script> element works perfectly:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" href="/includes/js/jquery-ui/jquery-ui.min.css">
<script src="/includes/js/jquery-ui/external/jquery/jquery.js"></script>
<script src="/includes/js/jquery-ui/jquery-ui.min.js"></script>
<script type='text/javascript' src='/includes/js/jquery.tablesorter.min.js'></script>
<script type='text/javascript' src='/includes/js/jquery.jeditable.mini.js'></script>
<script type='text/javascript' src='/includes/js/jquery.table.addrow.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// THESE ARE THE BAD LINES
$('.appendRow').btnAddRow({rowNumColumn:'rowNumber'});
$('.delRow').btnDelRow();
});
</script>
<script type="text/javascript" src="asdf.js"></script>
Nothing inside of asdf.js works unless I comment the 2 "bad lines" in the first script. E.g.
asdf.js:
$(document).ready(function() {
alert('hahaha'); // no output. document is never ready?
});
Now if I comment the "bad lines" in script one like so:
//$('.appendRow').btnAddRow({rowNumColumn:'rowNumber'});
//$('.delRow').btnDelRow();
Then script 2 works! So I don't think the issue can be with jQuery not being loaded. Otherwise, script 2 still wouldn't work after commenting the "bad lines" in script 1.
Related
My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?
First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.
You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">
I have my jQuery linked in the html file before the js file, and I've ensured that it is loading properly in the browser window. The jQuery code actually WORKS, so I have no idea why sublime thinks it cant understand the sytax. I've tried just about every suggestion in this post (JQuery - $ is not defined) which there was a ton. Also, i dont currently have sublimeLinter installed, currently using a console that i set up with this (http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text).
This code:
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body> </body>
</html>
with this js:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("body").text("Hello world!");
});
leads to this error message:
Add an ignore comment to the top of your document. What is happening is that your linter is not seeing jQuery as it is not part of the current document. This will force your linter to ignore the jQuery keyword while linting.
/*globals $:false, jQuery:false*/
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.
I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.
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.