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>
Related
I want to integrate a webplayer on my website to play my m3u streaming file.
I found this javascript file on github and tried to get it running. Unfortunately without success.
https://github.com/aitorciki/jquery-playlist
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
the proxy.php file:
$url = file_get_contents($_GET["url"]);
echo $url;
Or is there a completely different solution?
Thanks
it seems the playlist plugin works with jQuery v3, not jQuery v1. After I modify your code to use jQuery v3, it works for me
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
I have this script installed on my website:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>
When I try to add another element with following script, it refuses to show up any responce -
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
$('.flexslider').flexslider({
});
});
});
</script>
What could be the issue and how to resolve that?
You can do without the window.load event.
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.flexslider').flexslider({});
});
</script>
remove the below script
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
you have already loaded the jquery using below line
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
Please check on browser console, you should see some error or more information on error.
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.
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.