My HTML document has Bootstrap, but Bootstrap won't detect jQuery. Here is my <head> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" type="application/javascript"></script>
</head>
But it gives to me this error:
Uncaught Error: Bootstrap JavaScriopt requires jQuery
Use one of these 3 script tags, preferably 2nd one.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
**<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
Using jQuery.noConflict, you can make multiple versions of jQuery coexist on the same page. For instance
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
<script>
var jq1 = jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script>
var jq2= jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
var jq3 = jQuery.noConflict();
</script>
but as mention above use only one version of jquery.
Related
I have linked jQuery and jQuery mobile to my code. I got this error in the console:
TypeError: $.mobile is undefined
I have rechecked the URL and all are correct, I have update the files(jQuery, jQuery mobile) and the issue is still exists.
I have place the jquery.js before jquery.mobile.js
This is my code:
<script src="JS/jquery.js" type="text/javascript"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script src="JS/code.js" type="text/javascript"></script>
and it's on the end of the file.
the content of code.js: http://pastebin.com/3LTcxs9S
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-
1.3.1.min.js"></script>
try this by replacing your code
NOTE* put jquery mobile script at last after putting all jquery library scripts, im sure it will work
I have checked a lot of forums, but i did't find a solution.
site -> http://dszerszen.pl/domi/
and this code
<script type="text/javascript">
$(document).ready(function(){
$(".info").tytabs({
tabinit:"1",
fadespeed:"fast"
});
});
</script>
icon switcher dosent work
Simply rearrange your scripts in this order:
<script type="text/javascript" src="jquery.min.js"></script>
<script src="modernizr.custom.63321.js"></script>
<script type="text/javascript" src="tytabs.jquery.min.js"></script>
<script src="scrolltop.js" type="text/javascript"></script>
<script async src="analytics.js"></script>
The jQuery core library should be included first followed by the other plugin code.
You have defined scrollTop.js in two places.
One is at the top of css files. And jquery is not loaded before that. That's why you are getting error.
<title>Smykke Galleriet</title>
<link type="text/css" rel="stylesheet" href="stylesheet.1.css" />
<script src="scrolltop.js" type="text/javascript"></script>
Remove that line and it will work properly.
I have two jQuery files.
One is for calling datepicker and the other is for calling highchart files.
When I am trying to include both files, my highchart is working and datepicker is not working.
Here is the source code - code for datepicker:
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
Code for hichchart is:
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>
I have also tried to put the jQuery noconflict to any where of my code I got no result
<script type="text/javascript">$.noConflict();</script>
Any help will be appreciated.
Try to use only the jquery's and jquery ui's newer version,
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>
try something like this
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict( true );
//use jq for highchart
</script>
First call jquery
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
and Use following code after calling jquery
<script type="text/javascript">
var jqobj = jQuery.noConflict( true );
</script>
I am using the script shown below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
After adding this code in my blog, many other widgets like dropdown menu involving javascript stop functioning. The other codes I have used are shown below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'/>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>
Can anyone please tell me how to remove this conflict?
Edit:Okay, can you make it more clear? I am a noob here and can't understand what you guys are saying. Can you change my code and show me how it works?
After this script include:
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>
use this:
$.noConflict(true);
Also, those script tags are invalid, script tags must have both an opening tag and a closing tag, they can't be self closing.
Update for comment:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'></script>
<!-- any other scripts that depend on the above code goes here -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'></script>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'></script>
<!-- also any other scripts that depend on the above scripts go here -->
<script type="text/javascript">
$.noConflict(true);
</script>
You are loading JQuery 1.2.6 in the first script block and then JQuery 1.7.0 in the second. The second will not load as JQuery was already loaded. I am guessing the stuff that is failing needs the functionality added to the more recent JQuery version. So make the first block load the newer version and do not attempt to load it twice in the second.
I have a jQuery library code in jquery.xyz.js .
I have an html file which uses the function defined in jquery.xyz.js in this manner .
<html>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>
But the jQuery is not running, which I am assuming because I haven't loaded the jQuery properly onto the html page. So how do I do it?
<script type="text/javascript" src="jquery.js"></script>
See how jQuery works in the manual for the basics, and the download page to fetch the library (or to find out addresses for direct linking on a Content Delivery Network).
You just need to include the script files before using functions defined in them ($ is just a function), for example:
<html>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xyz.js"></script>
<script type="text/javascript">
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>
Be sure to include jQuery before plugins that rely on it, or you'll get some errors first thing.
<script>
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/xx.xx/jquery.min.js';
document.head.appendChild(script);
</script>
<script type="text/javascript" src="PATH TO YOUR JS FILE"></script>
Stick this above your jQuery code in the <head></head>
<script src="/js/jquery.js" type="text/javascript"></script>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</head>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>