I want to overwrite a function of a jQuery plugin. I instantiate the plugin in this way:
new jQuery.NameOfPlugin('someId') and the plugin is declared as
$.NameOfPlugin= function() {
var create=function() {
...
}
}
I would like to overwrite, for example, the var create and use an other function, without modify the original plugin.
How I can do this?
Related
In our application we have more than 100 grids and we need to display help button on Title bar of grid, for that I have created a plugin using
$.jgrid.extend({
EnableHelpButton: function(value) {
var $t = this;
...............;
}
});
Currently, I go to each .html page of grid and need to call the EnableHelpButton as shown in below code.
-----------------Index1.html-------------------------
$("#TestGrid1").bind("jqGridInitGrid", function () {
$(this).EnableHelpButton(true);
});
-----------------Index2.html-------------------------
$("#TestGrid2").bind("jqGridInitGrid", function () {
$(this).EnableHelpButton(true);
});
How I can create a generic way to call this EnableHelpButton on jqGridInitGrid events of each grid. It should write once on single place and it should work for each grid.
You have to have some specific call of your custom function on every page. One way will be to define you plugin so
$.jgrid.extend({
EnableHelpButton: function(value) {
var $t = this;
...............;
},
myInit: function () {
return this.each(function () {
$(this).bind("jqGridInitGrid", function ({
$(this).EnableHelpButton(true);
});
});
}
});
Even in the case you need to include .jqGrid("myInit") call on every page. You can make the call of myInit before the <table> is converted to grid. For example instead of
$("#grid").jqGrid({
... // parameter used to create jqGrid
});
you will be use now
$("#grid").jqGrid("myInit").jqGrid({
... // parameter used to create jqGrid
});
Only if you never use onInitGrid callback in any your grids you can use the callback instead of jqGridInitGrid. In the case you need just define the callback in some JavaScript code which you included in every your page:
$.extend(true, $.jgrid.defaults, {
onInitGrid: function () {
$(this).EnableHelpButton(true);
}
});
In the way you will set default implementation of onInitGrid for every grid.
Thus the definition of common initialization inside of onInitGrid callback produces the shortest implementation, but have restriction that you shouldn't use the callback in no of your grids. Alternatively you defines the method myInit which makes all bindings add you can add .jqGrid("myInit") on every your grids. The last approach will work for every jqGrid.
I'd love to get my hands on a templates data context.
Can I do something like this?
'click .newContext': function(event, template) {
var template_parent = template.parent();
var parent_data = template_parent.data;
}
You can use Template.parentData(0), the argument defines how deep you want to go, if you pass none, 0 is the default. Check the documentation on this: http://docs.meteor.com/#/full/template_currentdata
Yeah, if you're trying to get the parent's data context you should be able to use the parentData() method on the Template instance. You probably don't even need that second template parameter.
'click .newContext': function(event) {
var parent_data = Template.parentData();
}
I am learning how to write a jQuery plugin. I have this code below, my question is what does this stand for in the code below?
$.fn.myNewPlugin = function() {
return this.each(function() {
// Do something to each element here.
});
};
When you write a plugin you are extending the jQuery object, and because the jQuery object is a sequence, when you use return this.each(function () { }); then your plugin is executed for each item of the sequence.
I created a custom directive attribute that will turn an ordinary select box into a ChosenJS (http://harvesthq.github.com/chosen/) select box. To make the code cleaner, I want to load the external chosen.js plugin file asynchronously with HeadJS. Here is my AngularJS directive:
myApp.module.directive('chosen-select', function() {
head.js(myApp.pathTo.plugin.chosen);
head.ready(function() {
var linker = function(scope, element, attr) {
element.chosen();
}
return {
restrict: 'A',
link: linker
}
})
});
The problem I'm having is that it seems that because I am loading it asynchronously, Angular doesn't know it exists and the directive is not working. Is there a way to programmatically inject a dynamically loaded module directive so that Angular knows about it and can update the view accordingly?
In your example, directive function isn't returning a config object for the directive that's why it is failing.
Try this:
var myApp = angular.module('myApp', []);
myApp.directive('chosenSelect', function() {
var el;
// load chosen file
head.js(myApp.pathTo.plugin.chosen);
head.ready(function() {
jQuery(el).chosen();
});
return {
restrict: 'A',
link: function(scope, element, attr) {
// set el via closure, so that head ready callback has access to it
el = element;
}
};
});
I'd like to write a plugin that can be used in the following manner:
var img = $('#someImage').Image();
or perhaps:
var img = $.Image({id: 'someImage', src: '/...'});
and then be able to do image-related functions:
img.highlight();
img.showAlter();
et cetera. However, I don't want to do:
$.fn.highlight = function() {}
since that would apply to all jQuery objects and i want my method to apply only to those objects I've called .Image() on.
is what I'm asking for possible? how?
You'd need to place your Image function on the prototype (fn), but then have the Image plugin assign the highlight and showAfter functions to that specific jQuery object on which .Image() is called.
(function( $ ) {
$.fn.Image = function( props ) {
this.highlight = function(){
this.each(function() {
$(this).css('border', "5px dashed yellow");
});
};
this.showAfter = function(){};
return this;
};
})( jQuery );
var img = $('img').Image();
img.highlight();
EDIT:
To clarify, this in the Image function is a reference to the jQuery object against which Image() was invoked.
this does not reference the Image function in any way.
Example: http://jsfiddle.net/saYLm/
$.fn.image.highlight = function() {}
assuming you have written a plugin named image this would prototype the highlight function to that object