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
Related
I am developing my first web app for learning purposes. It consists on a calendar wher you can add tasks, edit, and remove them asynchronously. Simple.
Everything seemed to work fine but once I uploaded it to my hosting, one friend reported me he can´t see the calendar, only the header and the footer... he says it happens on all browsers, but that on the smartphone it works fine... I checked myself and I can see it fine on all my browsers (that´s why I have not noticed), but happens the same bug on smartphone! It is just the same problem my friend had, but on the opposite device.
I contacted the hosting, and changed the PHP version to the most similar I had on the XAMPP I used to develop it... (5.6.32 on xampp and 5.6.35 on the hosting), but the problem still goes on.
I also tried to update bootstrap version. Calendar is done with bootstrap, JS (with some ES6 features like importing-exporting modules) and jquery returning data through PHP from a database... nothing special.
Do you know what could be happening? To see the calendar you must be logged.
If you want to log and see it, use these fake credentials:
email: test#gmail.com
pass: 12345678
and this is the link
http://myreminder.avanzartewebs.com/
I will put the head tag of the problematic file to see if it can give you a hint
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous" defer></script>
<link rel="stylesheet" type="text/css" href="../assets/css/styles.css">
<script src="getAndPrintDate.js" defer></script>
<!--<script src="assets/js/crearCalendario.js" defer></script>-->
<script src="view_crearAnioCompleto.js" type="module"></script>
<!--<script src="assets/js/buildList.js" defer></script>-->
<!--the scripts with type=module (which work with modules using the imports) are defer by default-->
<script src="../controls/clickOnCell.js" type ="module" ></script>
<script src="../controls/taskSubmit.js" type ="module" ></script>
<script src="../controls/listButtonsClick.js" defer ></script>
<script src="../controls/editTaskSubmit.js" type="module" ></script>
<script src="../assets/js/fontawesome-all.js" defer ></script>
</head>
Try downloading those instead of having them linked from their site and try that. My the host is blocking it. Thats something i would try just to see.
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous" defer></script>
I've been trying to install Bootstrap into a project that I'm working on, but I'm being hit with Uncaught Error: Bootstrap's JavaScript requires jQuery. I've installed both through Bower, so I'm not sure whether that's related, but it's not having issues finding the files, so I don't think it is. Upon Googling the issue, I realized that the order in which I reference the script files matters, so I changed it to reflect what I had read, but that didn't fix the issue. When I looked into the directories in the file explorer, I saw a file called core.js, but including that didn't help either. I fairly certain that it's something to do with the way I reference files, so I'll provide that code, but feel free to ask if anything more is required.
index.html (root folder, following text is in body):
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
I think you might have confused jQuery with angular. You are not including jQuery, but you are including angular (including angular-material, which is a competing framework to bootstrap).
If you want to use bootstrap with angular, you probably want to use ng-bootstrap instead of the standard Bootstrap JS, since it allows you to interact with Bootstrap components from inside your angular components. If you do this via the "standard" (non ng-bootstrap) JavaScript, things will start falling apart as soon as the Bootstrap JS mutates the DOM. You would also be unable to infer the view state from your component state (since you would need to call the functions of the bootstrap JS instead of data binding), which is pretty much the whole idea of angular.
You need jquery to remove the error
bower install jquery
I don't see you referencing jQuery in the code you provided. You've installed it via Bower, but you will still need to add a reference to it.
<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
Import jQuery script before, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
...
Bootstrap needs jQuery to work properly
Here is how you should include them both
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
<link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Your content goes here -->
<script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
<script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
<script src="js/main.js"></script> <!--Your custom javascript file-->
</body>
</html>
I think you have made a mistake while referencing JQuery.
It should be like :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
and also make sure that you have included it before any other script file.
The correct way to include JQuery is also given on bower.io under Use Packages https://bower.io/
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 just wrote a simple signup page, and validated it with pure javascript and jquery. I also used font-awesome icons to show status of the input value. It worked fine with all the user agents(I tested it with a chrome extension). but after putting the files to a server it is not working with any of the user agents.
issues :
Some user agents not showing font awesome icons, but the scripts are working.
In some user agents the icons as well as the scripts both are not working.
I don't no where the issue is.
<head>
<title>TicketIsle Login</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="js/get_post.js"></script>
</head>
the above is how I put the scripts and style files.
if your page is in secure (https) some browsers dont allow you explicitly to download scripts or styles from non-secure (http) pages.
This syntax should be used to avoid this protocol issue:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is protocol agnostic i.e. it will work with both http and https.
I will suggest you to us downloaded file rather using CDN.
You should put all the script tag bottom of your page and put all CSS file on top of page in head tag.
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome CSS -->
<link href="fonts/font-awesome.css" rel="stylesheet">
</head>
<main>
<body>
</body>
</main>
<!-- ------------------------------------- -->
<!-- Javascript Includes -->
<!-- ----------------------`enter code here`--------------- -->
<script type="text/javascript" src="jquery.js"></script>
</html>
Im fairly new to JavaScript so finding it hard to understand. But Im making a homepage and I want an image slide show and Lightbox together, and I guess there a conflict between the different Js libraries. I also have read things like the No.Conflict script on the jQuery website but I have no idea on how to implement on to my HTML. Heres the code.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
If some one can help me out that would be amazing. and put it in the simplest form would be super as well, as like I said Im quite new.
Thanks
remove the first script library from google and add only the .js jQuery file with your site