I'm using the Semantic-UI framework, trying to build a website.
I have the following components into my attributes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/visibility.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/dropdown.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/accordion.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/sidebar.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/rating.min.js" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/transition.min.js" type="text/javascript"></script>
My issue: When I try to implement defer / async for the jquery, I think some js files load before it, and since they depend on the jQuery to function, I get console errors and the elements on my page won't function.
I want to know whether there is a method to make this work (functional at least in the latest Chrome / Firefox / Safari ) browsers.
Also, as a second question, is there any way to implement async for google fonts and other external resources ?
Related
I'm using this CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
and in parallel two others cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" type="text/javascript"></script>
If one is working and another not working how can I implement these two or more cdn.
Above both paths are for jquery library so You can not insert jquery library twice in single page, otherwise it will not work.
Include jquery library only once.
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>
I added 3 files to my HTML code:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Without jQuery mobile my main.js script works properly but when included jquery mobile file script doesn't work. There is way to deal with this?
Have jQuery mobile and jQuery (basic) some conflicts? (I'm concerned about js only)
Load your main javascript <script src="js/main.js"></script> only after all his dependencies so:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/main.js"></script>
If the issue persist try to use $.noConflict()
<script>
$.noConflict();
</script>
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>