showing jQuery is not defined even though jQuery file loaded - javascript

I am working on angular.js application in that I have loaded jQuery file still it shows error message
Error
Uncaught ReferenceError: jQuery is not defined(anonymous function) # popup.js:1
Files loaded
<script type="text/javascript"src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
<script type="text/javascript" src="js/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/appCtrl.js"></script>
I am not getting when is this popup.js is from.
Can anyone suggest me how to get rid of this error?

Move the jquery js reference to head tag or above the popup.js reference.

If you are working in laravel then add your CSS and Javascript file in index instead header and footer

Related

jquery loading after script that is included below it

I have a page where I have something like this at the end of the page:
<script src="jquery.js"></script>
<script src="onload-test.js"></script>
</body>
</html>
In my network tab it shows everything being loaded using h2 (http/2) and onload-test.js is loaded before jquery.js causing an error
"Uncaught ReferenceError: $ is not defined"
as I am using $(document).ready() in my script. The network tab shows jquery.js being queued for ~200ms.
Under what circumstances can this happen? and how can it be prevented?
use asycn while loading
<script async src="jquery.js"></script>
<script async src="onload-test.js"></script>
You can add jquery reference inside "<head></head>" section for best practice.
Body must contain only body specific js references.
jquery is a kind of global library which should be loaded in the <head></head> section.
You can refer: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

index.HTML does not recognize script in folder (chrome)

I am creating a browser based game with phaser, which involves linking to an external javascript file with my own code in it. For some reason when I use either
<script type="text/javascript" src="/js/main.js"></script> or
<script type="text/javascript" src="js/main.js"></script>
to link the javascript to the HTML, no 404 is thrown but the script does not run. However, if I move main.js to the root directory and put
<script type="text/javascript" src="main.js"></script>
in the exact same spot, the script runs fine. Any theories as to why this is? I am using chrome version 57.0.2987.133. Thanks in advance!
It should be:
<script src="./js/main.js"></script>
You had a simple scoping error and forgot the script's src.

ajaxQueue throws error on localhost but not on domain/server

Problem
I have the following problem that I can't fully understand what is happening and why.
One specific page is attempting to use $.fn.ajaxQueue .
When I load this page on my locally (using localhost:8080) I get the error:
TypeError: $.fn.ajaxQueue is not a function[Learn More]
When I load the deployed page (same code), I don't get the error but I get a warning:
jquery-1.7.1.min.js:4 Synchronous XMLHttpRequest on the main thread
is deprecated because of its detrimental effects to the end user's
experience. For more help, check https://xhr.spec.whatwg.org/.
Series of Imports
The series of <script> statements is the same on both local and deployed.
I am noticing that the JQuery <script> tag is not firstt. Shouldn't JQuery be the first thing that is imported???
<link href='scripts/jquery/src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/utils/jquery.tablednd.js"></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
<script src='scripts/jquery/jquery/jqueryBeforeTooltip.js' type='text/javascript'></script>
<script src='scripts/jquery/jquery/jqueryAfterTooltip.js' type='text/javascript'></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery/src/jquery.dynatree.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.css"/>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
Questions
Why would the error/warnings be different depending on if the server
is localhost or another domain? Is there a logical reason or is it a
configuration difference?
Is the list of imports correct? Shouldn't JQuery be first?
Can I add a try/catch to the statement trying to use $.fn.ajaxQueue and if it is undefined, dynamically load it and try again?
It turns out, that there were javascript imports on a specific page that was breaking the page. After we deleted the duplicate imports, everything worked fine:
<script src='js/jqueryFileupload/jquery.ui.widget.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.iframe-transport.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.fileupload.js'
type='text/javascript'></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>

Issue with jquery when using is.js

My jquery throws a bunch of errors, when using the library is.js in my HTML. Which thus brings up problems with bootstrap. is.js has browser detection features I need to make this update compatible with all browsers. My code it formatted correctly so I dont need to share that. But here are screenshots
Without is.js included in HTML:
With is.js included:
See the difference is that it does not show up when is.js is included. But I need it to be compatible with all browsers.
Errors it causes Jquery to throw
jquery.js:2090 Uncaught TypeError: matchExpr[type].exec is not a function
jquery.js:5932 Uncaught TypeError: value.call is not a function (Recently called after I moved the location of the library above Jquery - void for now)
New order of scripts
<script type="text/javascript" src="js/is.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
(Tosses that new error)
Old order of scripts
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/is.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Tosses only the first error

"Ext is not defined" issue in ExtJS 4

I came across a "Ext is not defined" issue in ExtJS 4.
I am actually testing the example here to starting learning ExtJS 4.
I have my example script file included:
<script type="text/javascript" src="orderRead.js"></script>
<script type="text/javascript" src="order.js"></script>
as well as these ExtJS script files:
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
but the problem is still there. Attached is the error message from Firebug:
Put the script tags for the Ext library before the script tags for your example files, so that they are loaded when your code runs.
You should include the ext-base.js and ext-all.js files in following order.
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

Categories

Resources