How do I use (install?) jQuery autocomplete plugin? - javascript

My understanding is that to use the plugin I need to insert this code into the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
I did that and then I put the form in the html:
self.response.out.write("""
API Reference: <input id="example" /> (try "C" or "E") """)
but nothing is happenning. What am I missing?

I'd recommend using the newer jQueryUI Autocomplete via the Google CDN.
To include it in your application, use something like this
<!-- in your <head> section -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
The smoothness string in the URL refers to the jQueryUI theme. You can change this to whatever you want. See http://jqueryui.com/themeroller/#themeGallery
<!-- just before the closing </body> tag -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var data = [
"Core",
"Selectors",
"Attributes",
"Traversing",
"Manipulation",
"CSS",
"Events",
"Effects",
"Ajax",
"Utilities"
];
$("#example").autocomplete({
source: data
});
});
</script>
The 1 references in these URLs refer to the version number. Just using 1 means use the latest version from the 1 branch

Related

Datepicker and Image Slider conflict

Could you please help me sort the issue out.
After inserting datepicker code, now my imageslider does not appear. All i see is a white space.
I think some javascripts are conflicting ?
But cannot find out which one.
Please help me.
<script type="text/javascript" src="js/jquery.min.js" ></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
};
</script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : 'layerslider/skins/',
skin : 'florida',
navStartStop : false,
thumbnailNavigation : 'hover',
hoverPrevNext : true,
responsive : true,
responsiveUnder : 1200,
thumbnailNavigation : false,
sublayerContainer : 1200
});
});
</script>
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
<script defer src="js/jquery.flexslider-min.js"></script>
First of all, write some neat code and check it.
script type="text/javascript" src="js/doubletaptogo.js" ></script>
Should be:
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
Then, when i look at your HTML, it looks like you are loading jQuery twice? And always load your stylesheets first, you can read this topic why: Is the recommendation to include CSS before JavaScript invalid?
Also, check if the plugins you are using, are compatible with jQuery 1.4.2 it is possible they are using some things that jQuery 1.4.2 doesn't offer.

Jquery TypeError - "$(...).whatever is not a function" when loading two libraries

Please, I need some help with this.
This is the code piece that is failing
<!-- Begin Photofolio library -->
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="scripts/jquery-coin-slider.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#portfolioslider').coinslider({
width: 480,
height: 280,
navigation: false,
links: false,
hoverPause: true
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<!-- End Photofolio -->
<!-- Begin REDX -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
And when I load the page, it shows me this error:
TypeError: $(...).coinslider is not a function
I have tried to use "jQuery" identifier, but it didn't work. I don't know if I did ir right, since I just replaced all "$" with "jQuery" and didn't do more than that.
What is wrong in my code?
Regards
When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict api.jquery.com/jQuery.noConflict/
I would suggest to check your src="scripts/jquery-coin-slider.min.js" to check what function makes it work. Maybe .coinslider is not inside that js file.

fancybox and jquery overlapping

I'm using this basic template with a slider in the home but when I add a simple fancybox script for a single image, the fancybox doesn't work.
What of these js is overlapping fancybox?
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mp-slider').cycle({
pager: '#mp-pags',
timeout:7000,
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(index, slide) {
var titles = []
titles[0] = $("#mp-pags-cont li:eq(0)").text()
titles[1] = $("#mp-pags-cont li:eq(1)").text()
titles[2] = $("#mp-pags-cont li:eq(2)").text()
return '<li>'+(titles[index])+'</li>';
};
$(document).ready(function() {
$(".fancybox").fancybox();
});
});
</script>
Best way to find out with something like this is to comment out one script at a time until you find the one causing the issue. Then you can look more closely at that script and figure out where the conflict is.
pagerAnchorBuilder: pagerFactory
may be problematic. don't you want to call:
pagerAnchorBuilder: pagerFactory(a,b)
with parameters?

How to include mootools js files?

I have a website with a huge part of js functions I wnat to add a login form from mootools.
I added the form and the needed files it works but the other site is stop I know it is javascript conflict this is my header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="tr" >
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script language="javascript" type="text/ecmascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
</head>
The script is for the mootools and the needed files are commented.
I get this error when I run the site:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
and:
Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;} has no method 'ajax'
Do anybody could help me to know if I should change the order of the JS files or is there anything I could do to stop conflict??
P.S: When I change the place of the mootools file in the header I get different messages.
Replace $ with jQuery
For example, instead of using
$("div p").hide() use jQuery("div p").hide(); instead
http://api.jquery.com/jQuery.noConflict/
Aslo try this
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Try to replace order your mootool js and jquery scripts and check again?
Example
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
Try using this, Your codes
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!--///// MOOTOOLS /////-->
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
<!--///// JQUERY /////-->
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
// jquery scripts
});
</script>

Adding multiple js files in the header

I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try

Categories