I'm trying to add a custom jquery plugin. But I get the error jQuery(...).termifier is not a function.... I'm pretty sure that there are no mistakes in code
For just test I have tried to copy the code from learn.jquery.com
(function($) {
$.fn.greenify = function() {
this.css("color", "green");
return this;
};
}(jQuery));
and then
jQuery('..').greenify();
which returns me error jQuery('..').greenify is not a function
What is going on??? Does anyone know the reason of that?
EDIT
the more code. This greenify thing was just to show that it is not working on the standard example....
the actual plugin... It is placed currently just in the same file where later it is called on ellements, so no problem with file not found..
(function($) {
$.fn.termifier = function(options) {
options = $.extend({
lookupResource: 'getTerm',
flyoutClass: 'lookerUpperFlyout'
},options||{});
this.attr('title','Click me for my definition!');
return this.click(function(event){
$.ajax({
url: options.lookupResource,
type: 'get',
data: {term: this.innerHTML},
dataType: 'html',
success: function(data) {
$('<div></div>')
.css({
position: 'absolute',
left: event.pageX,
top: event.pageY,
cursor: 'pointer',
display: 'none'
})
.html(data)
.addClass(options.flyoutClass)
.click(function(){
$(this).fadeOut(1500,function(){$(this).remove();});
})
.appendTo('body')
.fadeIn();
}
});
return false;
});
};
}(jQuery));
jQuery(document).ready(function(){
...
jQuery('abbr').termifier({
lookupResource: 'some.php'
});
});
I'm pretty clueless...
Firstly, ensure you're importing jQuery using Joomla's API, like so:
<?php
JHtml::_('jquery.framework');
?>
This will ensure only 1 instance of jQuery is imported, and in noConflict mode too.
Once done, you should use the jQuery global scope and $ as an alias (optional):
jQuery(document).ready(function($){
$.fn.greenify = function() {
this.css("color", "green");
return this;
};
});
Hope this helps
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments