So to initialize autocomplete for a textbox, you do this $('#textbox').autocomplete({...});
I have a custom widget declared:
$.widget( "custom.catcomplete", jQuery.ui.autocomplete, {
......
});
In this case the widget's name is catcomplete, so to initialize a custom autocomplete, you can do this: $('#textbox').catcomplete({...});
Now comes the tricky part. I'm trying to call $('#textbox').catcomplete({...}); using a variable name, in this way:
var w = 'catcomplete';
//this is where i try to call the widget
$('#textbox').{w}({...}); // <-- this is obviously wrong
While the example is obviously wrong, but I hope it gives a generally good idea of what I'm trying to do. By the way the widget cannot be modified (legacy issues).
Thanks in advanced!
This simple code works to call jQuery.find method (get the first div inside the body):
$('body')['find']('div:first')
So, the solution for you should be something like this:
$('body')[yourVariable]({...})
Related
I would like to add a function call including parameters to a HTML button via javascript. I know there are plenty of questions to this subject but none of the answers i found did work for me.
Note: My HTML and JS are in separate files which are correctly linked (the JS code works)
Problem:
I can add the function call like this:
var $add = $("#add");
$add.click(myFunction);
However $add.click(myFunction(i)); does not work.(Did also try with specific integer)
I have also tried it the following way:
document.getElementById('add').onclick = function() {myFunction(i);};
But like that the function does not even get applied to the button.
My function is defined in the JS file like this:
function myFunction(length) {
//do stuff with length I would notice
}
You can use some thing like function bind or do it using handler:
$add.click(function(e){
myFunction(i);
});
I am trying to implement jquery mobile autocomplete plugin. The sample usage as mentioned below.
I want to set a Javascript function for the source parameter, and want to make some database queries in that and return information to the page.
How can I do that? Or is there any other way that I can achieve what I want?
$("#searchField").autocomplete({
target: $('#suggestions'),
//Source is either
source: 'data.cfc?method=search&returnformat=json&data=simple'
//or a js object
//autocompleteData = $.parseJSON('[{"value":"1.0","label":"Alabama"},{"value":"2.0","label":"Alaska"}]');
source: autocompleteData
});
You can just pass a function to the source. Though it appears to not be documented, digging through the source code (around line 100) you can see that they can take a function for the source option.
They have a quick example in the comments of the source:
source:function(text,callback) { mydata = [1,2]; callback(mydata); }
It appears to work almost exactly the same as the regular jQuery autocomplete, where the first parameter is the text in the box and you call the second parameter and pass it your filtered data.
I'm following this tutorial on building a widget
IN that tutorial, he's testing whether jquery exists on the page and, if not, loading it.
I've recreated his code in this fiddle
I've added another object, CssLoader, but I'm unable to use jquery inside that object. You can see that my alert is not working.
How should I ensure jquery is available in CssLoader and any other objects I create?
I've just tweaked your code
var CssLoader = (function(){
var $=''; //the global $ inside CssLoader
function init($, cssPathArray){ // Receive the jquery in the first argument
$=jq; // assign jQuery to global $, so it'll be available inside CssLoader
alert( $('body') );
}
return {
init : init
};
})();
And inside function main call CssLoader.init as follows
CssLoader.init($, ['cssPath1', 'cssPath2']); // Pass the jquery in the first argument
DEMO.
At the first, you are localizing jQuery and then try to call it from another anonymous function. Why are you trying to do this?
However, these docs should help: http://docs.jquery.com/Plugins/Authoring
I have searched but have not been able to find any information. I know this isn't typical of jQuery however I need to appease our structure that we have for PHP and make that into the jQuery plugin per my boss.
Is there any way to extend the $.fn to add another name? For example
$.MyTools.useTool('piece of wood','cut');
or
$('#wood').MyTools.useTool('cut');
I guess MyTools would be the class and useTool would be the function. However I have done this in a plugin. We are wanting to have our plugin called MyTools and whenever you use a function in it you need to call MyTools.
Would it be better to do away with the plugin and just create a class?
Yeah, when I want to make a namespace (sort of) like that I do this for all my plugins:
(function( $ ){
if(!$.fn.MyTools) {
$.fn.MyTools = {};
}
$.fn.MyTools.useTool = function() {
// do stuff
};
})( jQuery );
It appears that is no way to do this, so I had to take a different approach and take the official plugin way method by doing $.GLCFormattingCurrency('remove', data);
I fear this question may be extremely newbie level, but I am just drawing a blank.
Within the $(document).ready function I have some DatePicker code...
$('#date-view1').datePicker({
selectWeek: true,
inline: true,
startDate: '01/01/1996'
}).bind('dateSelected', function (e, selectedDate, $td) {
$('#date1').val(selectedDate.asString());
var pfb = selectedDate.asString();
});
The part I am struggling with is the var pfb = selectedDate.asString();
I want to use the variable pfb further down my page in a different function called showProjects().
How can I do this? I have tried declaring the variable inside and outside of the $(document).ready function without luck.
Thanks
Declare var pfb before your document ready block. That'll make it available elsewhere on the page. In the document ready you'll be SETTING an already DECLARED variable.
In Javascript you can use global variables to store values which are accessible from anywhere in the page. Of the many ways of doing this is
setting the value using window.pfb = selectedDate.asString();
and accessing it later anywhere with window.pfb
I'm not sure if this is a problem area, but I wouldn't have tried passing pfb as a param in that onclick event - I think that may re-initialise pfb, or create a new var.
If you're creating it globally (not ideal but should work) then you shouldn't need to pass pfb as a param anyway.
Also, it's good practice not to attach events on the elements like that. Ideally - and jQuery makes this very easy - you should have something in your $(document).ready like this:
$(document).ready(function() {
$("#myButton").click(function() {
showProjects();
});
});
Or even shorten this to
$(document).ready(function() {
$("#myButton").click(showProjects());
});
if you know that showProjects() is the only call that you want to make.
It should work if you just drop the word var
Declaring variables without var makes them global.
It would probably be better form to declare it before the ready block as Dan Ray suggested, but you said you had a hard time with this? Not sure why you would.