jQuery autoComplete doesn't work although jQuery-UI is included - javascript

I tried to research this subject but everything I found referred to the common error of not including the jquery-ui file into the header. I however do have jquery first and then jquery-ui. I host the files locally but I have also tried to copy the most updated cdn links from the official sites to be sure of not having made whatever weird typing error or host an outdated file.
It still doesn't work, I always get "Uncaught TypeError: $(...).autoComplete is not a function"
Do you have any idea what could be wrong apart from the missing jquery-ui file?
My header looks like this:
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/dataTables.tableTools.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="icon" href="images/favicon.ico">
The Jquery code part of the autocomplete looks as follows:
$(document).ready(function() {
$(function () {
$(".auto").autoComplete({
source: "soplogsave.php",
minLength: 3
});
});
and html:
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
I can post the php code aswell but I'm not sure it's relevant, as I have already tried using preconfigured variables in jquery and it still didn't work, i still got the "autocomplete is not a function" error.

I think, you have to write autocomplete not autoComplete.
$( "#tags" ).autocomplete({
source: availableTags
});

Related

jquery is thorwing error stating "idleTimeout is not a function"

I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.

troubles including Jquery library in HTML

I have trouble including Jquery in my HTML page. I'm trying to display a calendar clicking on a button, but the calendar is not showing up. The following error showed up : $(..)Datapicker is not a function. I've looked up on internet, and people said it was because of multiple including. But I'm pretty sure that I've only included Jquery once, because when I remove the Jquery include, it says that I do not include it. Here is the header:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<script src="https://use.fontawesome.com/6cd7c64e2b.js"></script>
<link rel="stylesheet" type="text/css" href="/static/app/css/control/style.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/control/ir-button.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/recorder/style.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/static/app/js/recorder/timer.js"></script>
Note that the js script is in the header because I wanted to test it as it was not working in an external file!
Thanks in advance!
You need to include jQuery (core) too. Actually you only added jQuery UI, witch is an extension for jQuery itself.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
And are you sure using such an old version of jQuery UI? Current version of jQuery UI is 1.12.0, working with all jQuery versions since 1.7.
Try to fix it by following order and version of jquery files. Check below code snippet.
$( function() {
$( "#datepicker" ).datepicker();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type=text id="datepicker"/>

Javascript html header strange behaviour

Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

datepicker is not a function

This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script
<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#shortcuts").load("shortcut.html");
$("#datepicker").datepicker();
alert('jQuery is working');
});
</script>
</head>
The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.
The problem is with your imported files.I think you have not placed them properly.
Try to import these files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
It is working for me.
see here for more information
Double check that there are no JQuery references after your JQuery-ui reference.
I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.
This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Jquery ui tabs ajax content issue

The project i'm working on contains plenty of jquery and jqueryui. In every page there is one or more jquery-ui tab and all of them working with built-in ajax. I got several problems.
First of all there are different jquery plugins in nearly every page i'm pulling through ajax and i'm including same jquery libraru over and over in every request which is also used in the index page which i'm showing tabs. Is there a way to include jquery once and use it on every ajax page i'm pulling. That problem also causes several different problems like if i click that tab after differet tabs js. is not working. I'm putting some codes below so you can understand my problem easily.
ajax/slider.php (This page gets id through $_GET and generates a slider which i could not make it work with jquery 1.6.2)
<link rel="stylesheet" type="text/css" href="ajax/advanced-slider.css" media="screen"/>
<script type="text/javascript" src="ajax/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="ajax/jquery.advancedSlider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').advancedSlider({
width:600,
height:228,
alignType: 'centerCenter',
hideTimer:true,
effectType:'height',
horizontalSlices:'10',
verticalSlices:'1',
slicePattern:'leftToRight',
slicePoint:'centerBottom',
sliceDuration:'500',
captionSize:'228',
showThumbnails: false,
navigationButtons: false,
navigationArrows: false,
slideshowControls: false });
});
</script>
ajax/gallery.php
<link rel="stylesheet" type="text/css" href="../js/fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$.noConflict(); // (that piece of code sometimes work sometimes doesn't and i have no idea why)
$('a.grouped_elements').fancybox({
titlePosition: 'inside'
});
});
</script>
ajax/g_maps.php
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.gmap-1.1.0-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.noConflict();
$("#maps").gMap({ markers: [{ latitude: <?php echo $maps_x; ?>,
longitude: <?php echo $maps_y; ?>,
html: "<?php echo $maps_adi.'<br />'.$maps_adres; ?>",
popup: true }],
zoom: 16 });
});
</script>
And also page i'm using tabs
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jqueryui-project-spesific.css" rel="stylesheet" />
<link type="text/css" href="js/countdown/jquery.countdown.css" rel="stylesheet" />
<link type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown-tr.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryui-tr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#tabs" ).tabs({
cache: true,
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Some error message");
}
}
});
});
</script>
I think you'll have some ideas about my problem. I'm very new to js so if you see any mistakes that i did unrelated to this question fire at will.
Sorry about my English if I have any errors.
Thanks.
EDIT : I kinda solved my problem with changing relative paths of js libs in ajax page to js/.. so i'm giving paths relative to page i'm calling ajax not the ajax page itself. But if you have any other tips that would be great.
you just need to include js on main page (where you have your tabs), content is loaded via ajax but it will be on the same page, so same js an css will apply.
I use to use it on my base page as it makes more sense, however, if you really need to have it on every page you can make the include server side giving it a key on header and check if js file haven't been included before adding it

Categories