JQuery plugins: Function using $(this) inside the plugin's options
Date : March 29 2020, 07:55 AM
will be helpful for those in need Within the setInterval function, this is the global object, not the current element DOMElement like in the blink function. A solution to that is to save a reference of this and use this saved reference in the setInterval: blink: function ( ){
// save a reference of 'this'
var that = this;
setInterval(function() {
// use the saved reference instead of 'this'
button.options["blinkShow"].call(that);
}, button.options["interval"]);
}
|
jQuery Plugins: If I want to call something like $('selector').plugin.group.method(), how can I achieve this?
Date : March 29 2020, 07:55 AM
like below fixes the issue The way farhan Ahmad did it was pretty much right... it just needs deeper levels to suit your needs your implementation would look like this: jQuery.fn.plugin = function(){
//"community" (global to local methods) vars here.
var selectedObjects = this; //-- save scope so you can use it later
// return the objects so you can call them as necessary
return {
popup: { //plugin.popup
login: function(){ //plugin.popup.login
//selectedObjects contains the original scope
console.log(selectedObjects);
},
product: function(){} //plugin.popup.product
},
element: { //plugin.element
shoppingCart: function() {}, //plugin.element.shoppingCart
loginStatus: function() {} //plugin.element.loginStatus
}
}
}
|
jQuery: If-condition within external plugin call options
Date : March 29 2020, 07:55 AM
To fix this issue You can use the ternary operator for this new Pikaday({
field: document.getElementById(identification),
minDate: condition === true ? new Date(moment().format("YYYY, MM, DD")) : undefined
});
|
Booleans in jquery plugins options
Date : March 29 2020, 07:55 AM
like below fixes the issue You need to read documentation of each plugin. Different plugins offer different configuration options. For bootstrap-table plugin, you need to define columns. checkbox and clickToSelect are options available for column configuration. This way you can use them: $('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, {
field: 'select',
title: 'Select item',
checkbox: true,
clickToSelect: true
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
|
jQuery Plugins - Call plugin method on a variable
Date : March 29 2020, 07:55 AM
I hope this helps . Try, I already tested: JSFiddle: https://jsfiddle.net/pvviana/42jcdzz4/$.fn.formatCommas = function(str){
return parseFloat(str).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
var number = 1000000;
//attempt 1
var formatted = $.fn.formatCommas(number);
console.log('formatted number: ' + formatted);
$('#number').val(number);
$('#formatted').val(formatted);
|