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>
Related
ok so I decided to post another question (separate from my other one/edited it. this one is more on ordering of scripts).
So my problem is this: I have this at the header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
then at the bottom I got:
<script src="assets/js/app.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
</form>
Problem is I don't know where to correctly place the scripts/proper ordering placing signalR at the very bottom removes my Navbar/animations/transitions which is in scripts.js,
placing the signalR above it will fix the Navbar issue but the signalR will stop working.
First thing I see is that you have 2 different versions of jQuery loaded.
At the top -
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
At the bottom -
<script src="Scripts/jquery-1.10.2.min.js" ></script>
You should only have 1 version. This is probably causing most of your issues. You may have some other conflicts running both bootstrap and jquery-ui (not validated) if similar js/css is applied between both. You may want to search for conflicts and see what impacts you.
As far as order goes load:
jQuery-x.x.x.min.js
bootstrap.min.js
jquery-ui.js
signalR-2.1.2.min.js
signalr/hubs
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
When I include my script like this - loading bootstrap.min.js from a local file on disk, it does not execute my browser code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" </script>
I know it can find the file, because if I introduce a misspelling in the file name, Chrome complains, but otherwise not. Same behavior from IE-Edge by the way.
However if I include from the cdn network like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Everything works fine. The setup was suggested in a Coursera course on bootstrap and seems to work for most people, but not all. I am kind of puzzled. Is there a browser/internet setting that is preventing me from executing bootstrap from the disk or something that I am missing?
just change
<script src="js/bootstrap.min.js" </body>
To
<script src="js/bootstrap.min.js"></script>
You probably have not closed your code
Here
<script src="js/bootstrap.min.js" </body>
should be
<script src="js/bootstrap.min.js"></script>
I'm still learning Angular and Google Map API, and I'm having a sort of road block. I'm trying to fetch the map language using angular variable, like this way
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
When the page finish loading, I can see that the &language=xx is printed fine on the script source, though the map is still in English :(
I think google map loads, just before the language parameter get's printed. Is there any other way to solve this?
Additional: All of my script files are located at the bottom of my page
<body>
.
..
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<script type="text/javascript" src="localize.js"></script>
<script type="text/javascript" src="route-planner-widget.js"></script>
</body>
I have thought that maybe, I should call the google map script after my angular script (route-planner-widget.js) finish loading first, but it seems, it's not working either.
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>