I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).
I'm using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()
Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete({source:fakedata});
If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo, it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.
(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup)
If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:
$('.autocomplete').devbridgeAutocomplete({ ... });
This solve the problem with jQuery UI collision
As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.
Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.
Solution:
options.autocompleteOptions.source = false;
Search at the end of jquery.autocomplete.js the following section:
Create chainable jQuery plugin:
$.fn.devbridgeAutocomplete = function (options, args) {....
This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:
if (!$.fn.autocomplete) {
$.fn.autocomplete = $.fn.devbridgeAutocomplete;
}
So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete
in my case I had a second import of jquery which I didn't realize.
Something like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
// More code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
So be sure to import the autocomplete script after you initialized jquery.
Related
I have gridview that is populated by jquery. Below is part of my code thats giving the above error:
var codes = $(this).find("Code").text();
$("td", row).eq(6).html($(this).find("oTotal").text());
if ($(this).find("Stock").text() == 'Y') {
$("td", row).eq(7).html('Y');
$('#' + codes).live('click', function () {
$('#' + codes).tooltip();
});
}
else {
$("td", row).eq(7).html($(this).find("Stock").text());
}
I am getting an error on $('#'+ codes).tooltip(); I have jquery.ui/1.8.22 and jquery/1.8.3.
I think tooltip wasn't part of the file you are pulling in. Are you able to update your CDN reference to jQuery UI to:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
I solved this problem by moving all my Javascript tags above:
< jdoc:include type="head" />
Hope it works for you too.
Try re-arranging your script includes so jQuery is first, jQuery UI is second, then along through the rest.
tooltip() is not a function!!!
I solved the problem by using below steps in angular 4.
install jquery using, npm install jquery command.
add the following code in the path src/typings.d.ts file.
declare var jquery:any;
interface jquery
{
tooltip(options?:any):any;
}
It solved the tooltip() issue.
The tooltip is the part of Bootstrap so including bootstrap should solve the problem.
Quick links to check with bootstrap, you may remove https: from the beginning of the bootstrap links.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
tooltip() has not always existed in jQuery UI. It was added in version 1.9, so it'll work in any version after 1.9. Proof:
version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)
If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().
This is why the accepted answer works: it simply links to version 1.10.3. Ideally, you should be using the most modern version of jQuery UI available (in fact, this rule applies typically to all packages).
on my page I'm trying to apply jquery ui tooltip on a specific element:
<script>
$(function() {
$('.aticker').tooltip(); //works perfectly
});
</script>
but no options are working at all, so:
$('.aticker').tooltip({track: true}); // not working
$(document).tooltip(); //not working ( i have to use selector and not document)
$('.aticker').tooltip({tooltipClass:'rd'}); // not working
not sure what is wrong with it.
I found out that there was a confliction between bootstrap.js and jquery.js tooltip.
known issue
Tooltip conflict with jQuery UI #6303
I am not allowed to comment because of a lack of reputation, so I will post this as an answer. I created a jsfiddle based on your information. For me it seems to work perfectly well.
I used the links to the javascript files from your post and $('.aticker').tooltip({track: true}); works.
Could you please provide further information such as any errors shown in the javascript console?
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
I am working in a large site that has 2 conflicting jquery plugins included for doing autocmplete.
1) jquery.autocomplete.js (not part of jquery ui) that does :
$.fn.extend({
autocomplete: function ...
2) jquery.ui.autocomplete.js (from the latest jquery ui library), that also uses the autocomplete keyword.
$.widget( "ui.autocomplete", { ...
Is there a way to specify that i am using only the second, jquery.ui widget
when calling
$( "#tags" ).autocomplete ...
without changing the 2 files?
As the second autocomplete is using the $.Widget method of registering itself with jQuery it'll be easiest to change the behaviour of the in-house one.
You won't be able to load both of them without making some sort of change to the jQuery object between the two script loads because they'll just conflict with (or overwrite) each other.
I would try this:
<script src="jquery.autocomplete.js"> </script>
<script>
// rename the local copy of $.fn.autocomplete
$.fn.ourautocomplete = $.fn.autocomplete;
delete $.fn.autocomplete;
</script>
<script src="jquery-ui.autocomplete.js"> </script>
Which will then make:
$().autocomplete()
use the jQuery UI version, and
$().ourautocomplete()
use your local version.
I tried to do it with the tabs function of jQuery UI, it should work the same for you.
A function is technically a js object, so you could simply rename it :
$.fn.tabs2 = $.fn.tabs;
delete $.fn.tabs;
$("#tabz").tabs2({});
Hope that helps!
Edit
Like Alnitak suggested, you also need to delete the previous function's name.
Also, I think .fn is required.
on my site I am using a few of the newish JQuery UI controls like the datepicker and dialog.
I recently found a cool project online showing how to make the google dashboard, which is also used on the bbc.co.uk website.
This allows the user to have widgets that move around nicely when selected.
I created a test solution, it worked.
When I integrated it into my exisitng solution with currect Jquery controls and versions it causes a number of errors shown in firebug.
These are:
$("#menu").mouseleave is not a function
$('#menu').mouseleave(function() {
for this piece of code:
$('#menu').mouseleave(function() {
setSubItemVisibility();
});
for the datepicker JQuery ui control:
$(".startdate").datepicker is not a function
$(".startdate").datepicker({ dateFormat: 'dd/mm/yy' });
for the dialog:
$("#inputupdatecontrol").dialog is not a function
position: 'top center'
These all work fine until I put in the inettuts with cookies dashobard solution in found here: http://james.padolsey.com/javascript/inettuts-with-cookies/
This includes the following JQuery versions and files:
jquery-1.2.6.min.js
jquery-ui-personalized-1.6rc2.min.js
cookie.jquery.js
inettuts.js
Is there any way I can seperate the functionality that comes with these files from my existing JQuery versions?
I am currently using the latest Jquery version out and have no problems, its only when i add this functionality from the old versions that I face problems.
I am only using this old version of Jquery on one page, but ofcourse the new versions are needed to.
Cheers
Okay here is the full pattern, put the following in:
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
jq131 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
The variables jq13 and jq131 would
each be used for the version-specific
features you require.
Jquery in the command above returns a reference to its self essentially 'boxing' it in another variable.
So to call a function on 1.3 you would call
jq13('#'+ myId).bind('onclick',function(){});
NOTE : You must load the first version of javascript that was developed last.
Yes you can use jQuery.noConflict.