I've got a strange problem. I'm coding a website and inlcuding jQuery and some plugins, that are stored in 'js' folder. When I try to open it through a browser jQuery, plugins and all my custom scripts aren't working. Maybe it's somehing with my code, but don't think so. Of course when I inlude jQuery externally (Google API's) it works, but got some plugins and scripts which aren't hosted elsewhere. Here's my 'head' tag.
<title>TOMTRANS - International Transport</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- S3Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/s3slider.css" media="screen" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!-- jQuery Effects -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- S3Slider -->
<script type="text/javascript" src="js/s3Slider.js"></script>
<!-- S3Slider Init -->
<script type="text/javascript">
$(function() {
$('#s3slider').s3Slider({
timeOut : 3000,
});
});
</script>
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
By locally do you mean a local web server (i.e. http://localhost:12345/) or the file system (i.e. file:///C:/Users/John/Desktop/hello.htm)? If it's the latter, then it's probably the security settings. Some browsers block scripts from the file system by default.
Try to do
"./js/..."
I think it will work as with external jquery.
Thanks
Ok I have solved my problem. It's my IDE fault - Aptana Studio 3. This bug occured because I didn't upload hidden .project file, while I copied it through default file browser (Ubuntu's Nautilus). When I used built-in AS3 ftp manager it also copied .project file, and now it works.
I know this thread is old, but I have't found the answer to this very annoying problem so I am adding my solution.
If your physical folder path includes an underscore, it will fail.
So, if you dropped your website to lets say C:\MyRoot\MyFolder_2\WebSite1\ then it won't work. however, if you remove the underscore and it becomes C:\MyRoot\MyFolder2\WebSite1\ it will suddenly work and jQuery will suddenly be loaded.
Related
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/
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>
My toggle javascript buttons worked initially - however I have now found that my toggle button including navbar collapsing toggle and accordion panels.
I have included my header and footer. From what I have researched I cant see why it has stopped working.
Any help would be appreciated.
Header:
WEBSITE TITLE
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Footer:
<footer>
<div class="container">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I guess you just copied what was said on the bootstrap side for example:
<script src="../../dist/js/bootstrap.min.js"></script>
If you have the js bootstrap file in one of your folders in the root, you might want to make sure it is the path is right. For example if your html file is in the same directory as your bootstrap.min.js it should be
<script src="bootstrap.min.js"></script>.
The quick fix you just did which is simply changing it to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Might solve the problem now but it will render your local bootstrap file useless which you can make useful by using a bootstrap cdn fallback.
Which is basically loading your local bootstap files if you fail to load remote bootstrap files. This is how to make a bootstrap cdn callback
If you are using bootstap 3.x then you need at least jquery 1.9.1 version library.First download the jquery library and bootstrap js and include in your application and then register both in your application page.First register the jquery library and then bootsrap js as mentioned below.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
So, i did faced this problem and there are 2 main steps in this,
Number1: You need to include 3 files or links, 1 for Bootstrap CSS, 1 for bootstrap js and 1 for jquery.
You can include like this:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Number 2: Now make sure that when you include these files, you include them in this order, First CSS, then JQUERY, then JS.
This is because css is loaded first, then jquery and jquery is needed to be loaded before JS, this is because the JS used in bootstrap is written in Jquery so we need to load Jquery before JS.
And you will be good to go. Thanks
I changed the javascript tag displayed in my footer example from:
<script src="../../dist/js/bootstrap.min.js"></script>
to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
This has resolved the problem.
if you check the console of the page, it should show a notice that jquery is not seen by javascript. so, you can solve this by downloading the jquery source code from the jquery site and then you can add the following line of code before the end of your footer:
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
I am using bootstrap in my asp.net form application. I have all the required files in the project:
bootstrap.min.js
jquery-2.0.3.min.js
bootstrap.min.css
When I add a content page in the root directory , the site work perfectly; all the bootstrap features work correctly. But the problem is, when I place content in another folder (eg. webapp/content/default.aspx), the site does not work in IE. On other browsers it displays the content but the features of bootstrap don't work at all.
My scripts:
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
JQuery 2.0.x is not compatable with some of the older browsers.
Use the latest 1.9.x
See http://www.sitepoint.com/jquery-2-support-ie6-ie7-ie8/
**Try using the files:**
ie8-responsive-file-warning.js,
html5shiv.js and
respond.min.js.
Make the Downloads and place the files in js folder.
**Use the paths**
"#Url.Content("~/patch/file.js")"
****Example****
<head>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="#Url.Content("~/js/ie8-responsive-file-warning.js")"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="#Url.Content("~/js/html5shiv.js")"></script>
<script src="#Url.Content("~/js/respond.min.js")"></script>
<![endif]-->
<script src="#Url.Content("~/js/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/js/bootstrap.min.js")"></script>
</head>
You need a /
as in
<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
To be more complete
starting with a slash makes it relative to the root website directory
Two periods ../ would make it go up one directory (so ../../ makes it go up two directories ...)
~/ takes you to the root of your project directory.
otherwise it is relative to the directory the current file is in. (so js/jquery-2.0.3.min.js is looking for the file in a js subfolder of your current dir.)
I'm going through some beginners tutorials on ExtJS and when I try to load a .html file with some HTML code it doesn't work
here's the test.html with the ExtJS code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../ext-3.2.1/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('div1').load({
url : 'htmlFragment.html',
scripts : true
});
});
</script>
</head>
<body>
<div id='div1'></div>
</body>
</html>
and the htmlFragment.html is just as it says, a fragment of HTML code
<div>Hello there! This is an HTML fragment.</div>
both the file with the ExtJS code and the htmlFragment.html are in the same folder and I really see no reason for this not to work but it doesn't :(
all the other ExtJS examples I tried, DOM manipulation and other basic stuff worked just fine
I'm trying this on a Windows machine, and it doesn't work in any browser(FF, Opera, IE, Chrome)
Have you set your example in a Web Server?
Even though many examples work just directly open its local file on your browser (i.e. file:///C:/directory/example.html) many others require an actual web server to run properly (i.e.: http://localhost/path/example.html).
And I think local files won't work in this example as it has to performs an AJAX call to get the htmlFragment.html file.
Are you using any of the following (or any other) web server?
Apache HTTP Server
lighttpd
Apache Tomcat
Internet Information Server
Visual Studio Built-in Web Server
Do u have firebug enabled on your machine? If so, do you get any exceptions on the firebug console? It could be that the ext library path is incorrect. Also check firebug to see if your ext library files are being loaded.