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>
Related
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 ?
I am building a Phonegap application for android. I am trying to load jQuery and it gets loaded fine in Google Chrome both on my PC and mobile but not in the Phonegap Preview app. My jQuery version is 1.9.1.
Here's how I include jQuery:
This is at the end:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/scripts.js"></script>
Please help. Thanks.
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 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>