Bootstrap's javascript requires jquery error in our client side login - javascript

So we are currently building a client side CEF login for a game server. It works but we still keep getting this annoying error on launch client side:
"Bootstrap's javascript requires jquery. jquery must be included
before bootstrap's javascript"
I have checked everywhere and everything seems to be in the correct order though I'm likely very wrong! Here is the order we have it in the head tag:
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tether.min.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
Thanks for your help so far!

Have you tried using the google or microsoft CDN? I would check
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It doesn't hurt to try and see if that works!

Related

Bootstrap Modal not displaying without internet access

I have a modal for preview before submitting which works properly with any of my browsers that are connected with the internet. However, my modal is not displaying on the computers which have no access to certain websites. I tried checking the browser's versions. I've also downloaded every bootstrap and jquery script and included in my file but still doesn't work.
Here's what I've included in my code
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script src="jquery-3.4..min.js"></script>
Here's the exact code I used and for reference
Display form input in Bootstrap MODAL
You have used cdn which will require internet access while the page loads to download scripts and css.
In case you want to use it without internet download bootstrap and place it in your directory & use it.

One part of my web app shows only sometimes

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>

Chrome - "Trying to load script from unauthenticated sources"

I'm having some issues with my website. It runs and renders just fine, but I get the blocked scripts icon at the top right of the address bar. I don't want users to see this pop up when visiting the site. I can press "load unsafe scripts", which will make it go away but then my site is no longer https. I've tried rearranging the lines and tried other things as well in my html but I can't seem to find a solution.
The site uses bootstrap as well as 2 of my own CSS files and 1 JavaScript file.
Below is HTML head tag. And below that are the errors that Chrome is showing. Does anyone understand why this is happening?
<head>
<meta charset="utf-8">
<meta name="keywords" content="NASA,JPL,near,earth,objects,asteroid,meteor,neo,neowise,api,opendata">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearing Earth</title>
<!-- Lines necessary for Bootstrap-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--My files-->
<link rel="stylesheet" href="neoRules.css">
<link rel="stylesheet" src="neoStyles.css">
<link rel="icon" type="image/ico" href="favicon.ico"/>
<script src="https://nearingearth.com/neoFunctions.js" type="text/JavaScript"></script>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js" type="text/javascript"></script>
<script src="/js/respond.min.js" type="text/javascript"></script>
<![endif]-->
</head>
Error 1:
Mixed Content: The page at 'https://nearingearth.com/' was loaded over
HTTPS, but requested an insecure script
'http://code.jquery.com/jquery-latest.min.js'. This request has been
blocked; the content must be served over HTTPS.
Error 2:
Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
neoFunctions.js is loading jquery without SSL. It's nothing to do with your HTML. I'd maybe recommend downloading neoFunctions.js and modifying the script to replace instances of http:// with https:// and host it on your own server.

How can I delete the awful debugging 'Loading'?

Good evening!
I'm writing an application on the mobile platform 'Steroids'. I don't know why, but on each screen of my app the awful debugging 'Loading'. I can't understand, where is it added, it is absent in html DOM (if to check it in google chrome). I also tried to turn off some scripts which are included by he default, but anyway, I could find the reason. Please, share your ideas. The list of scripts, which are added:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="vendor/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>

Jquery doesn't have an effect on my elements

For whatever reason my jQuery isn't working, yet it seems to work when I put it in JSFiddle. That being said, I assumed the library wasn't importing correctly so i double checked it and everything seemed alright. Here is the JSFiddle example. I included all of the code, including the links that I have in my index file. It works perfectly in JSFiddle, but when I try it on my host it doesn't work. I've tried a few browsers but that didn't seem to change anything.
<head>
<title>Artanes Development</title>
</head>
<link rel="icon" type="image/png" href="/img/favicon.ico">
<!--Links-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300|Abril+Fatface|Vollkorn:400italic,400|Open+Sans:800|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='script.js'></script>
Here are all the links i have at the top of my page.
You have uploaded the Project to Web hosting FTP.
You should be using:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and not:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Categories

Resources