The following jQuery plugin has an API where you can add your own methods.
Here is a simple example.
In the example on that page, how would I call the function your_method?
They don't show this. All I want to do is put a button on the page and then when that button is clicked, trigger off my own custom method.
This worked for me:
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.myPlugin = function() {
return {
init: function() {
},
myMethod: function() {
alert ("method");
}
};
};
$("#redactor").redactor({
plugins: ['myPlugin']
});
$("#redactor").redactor("myPlugin.myMethod");
or you can add it to a click event on something else
$(".selector").on("click", function(e) {
$("#redactor").redactor("myPlugin.myMethod");
});
you create an init method in which you can create a button on a toolbar and bind your custom plugin method to it:
RedactorPlugins.myPlugin = {
init: function() {
this.addBtn('myMethod', 'MyMethod', function(obj) {
obj.myMethod();
});
},
myMethod: function() {
// do stuff
}
}
hope it helps
Related
I'm working with jQuery, making a WordPress website, and ran into issues because Wordpress doesn't seem to work with the $(window).load(...) event listener, due to which I had to change the code.
Here's the original code in jQuery:
$(window).load(function(){
...
}).resize(function() {
...
});
Hers's what I'd changed it to:
window.addEventListener('load', function() {
...
}).resize(function() {
...
});
However, I get an error in console TypeError: windowAddEventListener is undefined. How can I solve this?
You have two issues:
addEventListener return undefined so you can't do anything after it
in vanilla JavaScript there are no resize function this is only in jQuery.
You will need this:
window.addEventListener('load', function() {
...
});
window.addEventListener('resize', function() {
...
});
and if you want chaining you will need:
const x = {
load: function(fn) {
window.addEventListener('load', fn);
return this;
},
resize: function(fn) {
window.addEventListener('resize', fn);
return this;
}
};
x.load(function() {
}).resize(function() {
});
I am using intl-tel-input to get peoples phone code and country. When they select the flag and code I have some jQuery with gets the country and code separately and populates hidden fields...
Here is the entire object which handles these operations:
var telInput = {
init: function(){
this.setTelInput();
this.cacheDOM();
this.bindEvents();
},
cacheDOM: function(){
this.$countryCode = $('input[name=country_code]');
this.$countryName = $('input[name=country_name]');
this.$country = $('.country');
},
bindEvents: function(){
this.$country.on('click', this.getTelInput.bind(this));
},
setTelInput: function(){
$('input[name=phone]').intlTelInput({
preferredCountries: [
'gb'
],
});
},
getTelInput: function(e){
var el = $(e.target).closest('.country');
var countryCode = el.attr('data-dial-code');
var countryName = el.find('.country-name').text();
this.$countryCode.val(countryCode);
this.$countryName.val(countryName);
},
}
Problem
The problem is the click event in the bindEvents method... the phone picker works but the onclick event is not being triggered to populate my hidden fields.
You need to make sure that you cache the DOM after it has been rendered. Here's a simplified example.
View on jsFiddle
var telInput = {
init: function(){
this.cacheDOM();
this.bindEvents();
},
cacheDOM: function() {
this.$country = $('.country');
},
bindEvents: function() {
this.$country.on('click', function() {
// console.log('Triggered');
});
}
}
$(document).ready(function() {
telInput.init();
});
Also, plugin's event countrychange could be useful in your case.
$("#country-select-element").on("countrychange", function(e, countryData) {
// do something with countryData
});
I would also suggest you to have a look at the public methods. It has some useful methods that you could use to achieve the same result.
I am using sticky sidebar to make my sidebar(s) stick: http://github.com/caphun/jquery.stickysidebar/ I also use AJAX to reload the page many times. After a while, the scrolling lags and I presume it is because each time I reload the content without destroying the stickysidebar.
How do I call the destroy function here?
I tried
$('.stickem').stickySidebar.destroy();
and
$('.stickem').stickySidebar("destroy");
but neither worked. Here is the prototype:
$.stickySidebar.prototype = {
init: function() {
// code
},
stickiness: function() {
//code
},
bind: function() { },
destroy: function() {
alert('h');
this.element.unbind("destroyed", this.teardown);
this.teardown();
},
teardown: function() {
console.log('eee');
$.removeData(this.element[0], this.name);
this.element.removeClass(this.name);
this.unbind();
this.element = null;
},
unbind: function() { }
}
That's not how you do jQuery plugins. If you want to call it as $('.stickem').stickySidebar("destroy"); (which is the recommended way), do this:
$.fn.stickySidebar = function(action) {
if (action === 'destroy') {
...
}
};
See http://learn.jquery.com/plugins/basic-plugin-creation/
I have a problem with binding (or firing) click event.
var Edocs = function() {
return {
Utils: function() {
var initHorizontalResizer = function() {
console.log('Edocs.Utils.initHorizontalResizer()');
$('.resize-main-content').on('click', function() {
console.log('abc');
if ($('[id="menu"]').hasClass('slidedOut'))
{
$('[id="menu"]').removeClass('slidedOut');
$('[id="content"]').removeClass('resized');
} else {
$('[id="menu"]').addClass('slidedOut');
$('[id="content"]').addClass('resized');
}
});
};
return {
init: function() {
console.log('Edocs.Utils.init()');
initHorizontalResizer();
}()
};
}()
};
}();
When I open javascript console I see the following values: Edocs.Utils.init() and Edocs.Utils.initHorizontalResizer(), but when I click on .resize-main-content element - nothing happens. So I tried to paste this binding directly to console and... - it's working! Why?
I'm using Primefaces 5.0 (jQuery 1.10.x)
Assuming that the .resize-main-content element is dynamically appended to the page, you need to use the delegated version of on:
$(document).on('click', '.resize-main-content', function() {
// rest of your code...
});
Note that document should be changed to select the nearest parent element of .resize-main-content which is available on DOM load. I just used document here as an example.
I'd like to implement a reversible animation in Backbone, in the same way we do it in jquery :
$('a.contact').toggle(
function(){
// odd clicks
},
function(){
// even clicks
});
my question is how to do this in backbone's event syntax?
How to do I mimic the function, function setup?
events : {
'click .toggleDiv' : this.doToggle
},
doToggle : function() { ??? }
Backbone's view events delegate directly to jQuery, and give you access to all of the standard DOM event arguments through the callback method. So, you can easily call jQuery's toggle method on the element:
Backbone.View.extend({
events: {
"click a.contact": "linkClicked"
},
linkClicked: function(e){
$(e.currentTarget).toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
}
});
I was looking for a solution to this problem and I just went about it the old fashioned way. I also wanted to be able to locate my hideText() method from other views in my app.
So now I can check the status of the 'showmeState' from any other view and run either hideText() or showText() depending on what I want to do with it. I have tried to simplify the code below by removing things like render and initialize to make the example more clear.
var View = Backbone.View.extend({
events: {
'click': 'toggleContent'
},
showmeState: true,
toggleContent: function(){
if (this.showmeState === false) {
this.showText();
} else {
this.hideText();
}
},
hideText: function() {
this.$el.find('p').hide();
this.showmeState = false;
},
showText: function() {
this.$el.find('p').show();
this.showmeState = true;
}
});
var view = new View();
Is the element you want to toggle within the view receiving the event? If so:
doToggle: function() {
this.$("a.contact").toggle()
}
I actually believe the only to do this using events is to add a trigger in order to keep the actual flow together. It seems a bit clumsy to be honest to have to use toggle in this way.
Backbone.View.extend({
events: {
"click .button": "doToggle"
},
doToggle: function(e){
var myEle = $(e.currentTarget);
$(e.currentTarget).toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
myEle.trigger('click');
}
});
It's probably cleaner to just use
Backbone.View.extend({
el: '#el',
initalize: function() {
this.render();
},
doToggle: {
var myEle = this.$el.find('.myEle');
myEle.toggle(
function() {
// odd clicks
},
function() {
// even clicks
}
);
},
render: function(e){
//other stuff
this.doToggle();
return this;
}
});