Bootstrap Javascript not working on live website - javascript

I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!

You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH

You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html

In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)

Related

AngularJs 1.x not working with SemanticUI.js

When i try to use AngularJs with SemanticUI.js, the console says
Uncaught ReferenceError : jQuery is not defined
Here is my example of implementation :
<html>
<head>
<!-- I'm head of the document -->
</head>
<body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/semantic.min.js"></script>
<!-- My own script place right here -->
</body>
</html>
Am i doing the right way? I've tried to swap the script position, but my code still doesn't work.
I think the problem in the semantic.min.js, maybe the $ has been replaced by angular or something that i don't know, because when i try to remove the semantic.min.js, no one appears in the console.
I have also try another solution that i've found in stackoverflow, but yes, it still not works.
Only additional information :
AngularJs version 1.5.5
JQuery version 2.2.4
Semantic version 2.1.8
Can anyone give me a solution?
I think it's jQuery problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
Please take a look in here for more detail.
JQuery - $ is not defined
just add a slash
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/angular.min.js"></script>
<script src="/assets/js/semantic.min.js"></script>
Oops, sorry, my bad.
I found the problem, it's not the jQuery problem, it's Electron problem.
Because my project use Electron, so the solution is right here :
Electron : jQuery is not defined

Bootstrap JS script not working

So I have a webpage, and I have all of the js scripts in the footer of the webpage, yet it is not letting me use the js functions of bootstrap, like using drop downs. The
Can anyone help?
I can't put the code here because of the character limit, but here is a paste bin:
http://pastebin.com/fzy6e5CZ
I find that linking to scripts makes your page relatively slow. I would try using a CDN, here is the code to include the min. versions of those scripts through the CloudFlare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.3/holder.min.js"></script>
Use the following for Bootstrap CSS
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css">
I think you should update your jQuery and bootstrap .js file and check your file adding path is right. Your file destination exactly there where you trigger it?

Clashing jQuery Plugins

I'm building a website and I have used a jQuery widget plugin to display a certain div when a link is selected. However in order for this to work it requires the "jquery-1.2.6.min.js" plugin to work.
However the framework for the site is built using bootstrap and I also wanted to include a slick slider which both require "jquery-1.11.0.min.js" to work. These are obviously clashing and preventing each other from operating.
I'm not familiar with jQuery so I was wondering if there was a work around for this or a better solution to solve the issue or whether I need to find another widget plugin to display the divs.
If updating/replacing the older code isn't possible, you can run multiple versions of jQuery simultaneously using noConflict:
<!-- load jQuery 1.2.6 -->
<script type="text/javascript" src="http://example.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<!-- load jQuery 1.11.0 -->
<script type="text/javascript" src="http://example.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var jQuery_1_11_0 = $.noConflict(true);
</script>
...Then just pass in the particular version you want.

Off canvas when adding Zurb Foundation javascript files separately

When I link to foundation.js and foundation.offcanvas.js separately i stead of using the minified, combined version the off canvas menu is not working.
Do I have to call the offcanvas additionally to $().foundation(); ?
You only need to call the foundation() method once after all the Foundation scripts have been loaded.
Taken from their docs:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
If Foundation's Off Canvas still isn't working, it's more likely due to the markup being slightly incorrect than the JS being weird. Make sure you follow the examples exactly.

which version of jQuery is running on a website with multiple libraries loading?

I am working on a project where there's multiple libraries loading in the head. The CMS being used is WordPress.
Through the wp_head, there's an enqueued script for the latest version 1.7.1, but just below it there's a set of script files that begins with version 1.4.
Here's a simple visual flowchart:
<head>
<script jQuery 1.7.1>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
My understanding is that since jQuery 1.4 is below 1.7.1, that it is effectively the library being used.
Is it possible to rearrange the scripts so that those dependent on 1.4 can only be used by 1.4 then the rest by 1.7.1? For example:
<head>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
See how I moved 1.7.1 down? Will 1.7.1's placement in the head below the 1.4 scripts affect the 1.4 scripts?
Is there a way to detect which version of jQuery is being used throughout the page?
please define those in "those dependent on 1.4", It is never a good idea to work back versions just for one part of a website. If it is multiple websites running the same header you might want to try and load in a php (databased) field and set the library that needs to be used in there. My advice would be that if indeed a part of your code doesn't work with the new library, update that code. And always use the latest JQuery :)
This should work as jQuery.noConflict(true) allows you to assign jQuery to any global variable and remove the original jQuery variable from the global namespace.
<head>
<script jQuery 1.4>
<script type="text/javascript">
var jq14 = jQuery.noConflict(true);
</script>
[7 more scripts dependent on 1.4 here] // do a find and replace in all these, replacing $ and jQuery by jq14
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
It's hardly best practice to load two jQuery's on the same page, but if your client won't pay to upgrade the above shoudl hopefully provide at least a workable compromise.

Categories