I've added the jQuery version of 1.10 to my project and the selectmenu widget and I cannot get the change event to fire.
The selectmenu was working fine before i upgraded to the 1.10.
What do I need to do to get this working?
var getProjectInfo=function(){
}
--I've tried this way
var sel = helper.selectMaker.makeSelect(data);
sel.change = getProjectInfo;
$('#projsPH').appendChild(data);
$(sel).selectmenu();
--And this way
**This way throws an error of selectmenu widget does not have a method change.
var sel = helper.selectMaker.makeSelect(data);
$('#projsPH').appendChild(data);
$(sel).selectmenu('change', getProjectInfo);
------------Update
I've got it to work like
$(sel).selectmenu({change:getProjectInfo});
But the selection will not collapse
Got the styles from Google
http://code.google.com/p/jquery-ui/source/browse/branches/labs/selectmenu/ui.selectmenu.css?r=2776
You're using very outdated files. And I guess you are talking about jQuery UI 1.10.
Try the older but updated version: https://github.com/fnagel/jquery-ui/
Not sure of this version will work without problems with UI 1.10, not tested yet
Or, better, use the official but yet unreleased version: https://github.com/jquery/jquery-ui/tree/selectmenu
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).
I was using jQuery 1.8.3 and had this piece of script :
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../Images/minus.gif");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../Images/plus-sign.png");
$(this).closest("tr").next().remove();
});
After upgrading to jQuery 2.1.4, this no longer works.
I get it that some functions like live is not supported anymore but I am unable to convert this piece to make it work.
When upgrading jQuery you should use jQuery migrate.
This is offically recommended way in finding out what has been deprecated in jQuery.
If you’re upgrading from a version before 1.9, we recommend that you
use the jQuery Migrate plugin and read the jQuery 1.9 Upgrade Guide,
since there have been a lot of changes. It’s easy to use the plugin,
just include it in your HTML file after jQuery and open your browser
console to see the messages it generates:
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
You should also look into the jQuery upgrade guide.
live is deprecated. Use on instead.
I have a very annoying problem with watch() method from Dojo toolkit. I have a loop, that connects every input/widget in settings view (TweetView) with corresponding object. Connecting in my case is setting input to value from object and watch it for changes.
My problem is, that it works great for slider, but doesn't trigger handler for switch at all. Any ideas what could be wrong? I tried to debug it, but still no results. Here is a fiddle and the code:
var widget = registry.byId(namespace + "." + el);
widget.watch("value", handlers[root[el].type]);
widget.set("value", root[el].value);
http://jsfiddle.net/Em8GE/1/
Thanks in advice,
Dracco
this is unfortunately a known issue in dojo 1.9.0 and 1.9.1: https://bugs.dojotoolkit.org/ticket/17295
This is already fixed on dojox main branch and will be released in 1.9.2. The fix is detailed here: https://github.com/dojo/dojox/commit/43af4ba56f7b589f2afffb9161e21cc2cad40ad8
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.
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.