Im trying to catch the oncontextmenu and onmousedown events of a control that is a kendoUI combobox.
I've created (modified existing) a Jsfiddle that shows an example of what we are trying to achieve.
Jsfiddle
document.getElementById("cbo1").oncontextmenu = function(ev){
alert(ev);
return false;
};
document.getElementById("cbo1").onmousedown = function(ev){
alert(ev);
};
You can see that the mouse down and the context menu items are not firing for the comboBox input but they are firing fine for the standard input.
Any ideas on how i can get the mouse events firing for the combobox input?
This question is similar to this, except you want a click and oncontext event for kendo combobox which is a non registered event and that is not posible using jquery alone since kendo UI doesn't expose it to jQuery refer to this kendo forum post.
To summary the answer, you can to this by modifying the answer form above question, dont forget move your return false otherwise the right click options will appear.
$(element.input).bind("contextmenu", function (e) {
binding.get();
return false
});
refer to this jsfiddle
This is how I did it...
var $parent = $(element.input).closest('.k-combobox')
$parent.on({ 'mouseenter': function(){ }, 'mouseleave': function(){ } });
Works just fine.
EXPLANATION:
You can't put the event (directly) onto the Element.Input or onto the control (itself). But you're using jQuery...so you can find the control-container & put the event on that...and voila!
For those that need visuals..
Related
Update: I tried a suggestion by #newmount however, if I call fireEvent('blur') then the focus of the trigger isn't fired by any keyboard action. (It resumes once there is a mouse click)
To be honest the triggerfield doesn't fire blur in a certain situation.
From within the focus event if I have a reference to another field and do field.focus() the blur of the current field doesn't fire. What's worse is it fires later if I click anywhere else.
Below is code and steps to reproduce:
Ext.onReady(function() {
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
labelStyle: 'white-space: nowrap',
initComponent : function() {
this.on("focus", function() {
console.log("Trigger focused");
//the problem point.
//I do some processing here and then
//in some case I do the following:
Ext.getCmp('some_field').focus();
//when this is called the BLUR of this trigger field isn't fired.
});
this.on("blur", function() {
console.log("Trigger blurred");
});
this.callParent();
}
});
//end of onReady
});
Here is a live fiddle : http://jsfiddle.net/sq37s/
To Reproduce:
Click into the first name field
Hit tab, it will jump into the trigger and then jump into the mid init field.
The console at this point will not show a Trigger blurred
Now click anywhere in the panel and you'll see Trigger blurred.
This behavior is causing some very unexpected issues in our application, this is something so trivial we based assumptions on the fact that something like this will work.
I would love:
Any suggestions to work around this, perhaps pure javascript
Any hope of getting the extjs guys to fix this?
When the focus gets changed programmatically, the event may not get fired (think events gets fired only on user-action). One workaround is to fire that event programmatically while changing focus
this.on("focus", function(e) {
console.log("Trigger focused");
if (someConditionToChangeFocus){
e.fireEvent('blur'); //Fires the blur event
Ext.getCmp('some_field').focus();
}
});
[Edit]
Another approach is to use FocusManager's beforecomponentfocus event, fiddle here: https://fiddle.sencha.com/#fiddle/3mq
I have a problem with events in KendoUI grid control. I assigned "saveChanges" event after grid initialization. I use popup for data editing. I want to fire event "saveChanges" when the user pushes "Save" button. Unfortunately the event is not fired. I can't figure out what is the problem, moreover, other events work. The grid is initialized within MVC helpers. Events are assigned in JavaScript.
Here is the JavaScript code that I'm using:
function bindGridEvents() {
var that = this;
//kendoGrid is an abbreviation of: $("#grid").data("kendoGrid")
kendoGrid.bind("dataBound", function () { }); // works
kendoGrid.bind("edit", function (event) { }); // works
kendoGrid.dataSource.bind("error", function (event) {}); // works
kendoGrid.bind("saveChanges", function (event) { console.log("This event is not fired!"); });
kendoGrid.bind("save", function (event) { }); // works
}
I've already spent a lot of time for finding the solution on my own without success. I will appreciate any help.
EDIT:
I have found what the problem was. Documentation says:
saveChanges event is fired when the user clicks the "save" command
button.
But when the popup shows the command with label "Save" is of type "update". That is why it does not work in edit mode. It works in toolbar only. It's not obvious at first and the documention don't say too much so be aware of that.
Without seeing the code I can't be sure. The event will not fire without you doing any changes I believe. Nice example which works for me is here. If you dealing with the actual dataItem edit not via the grid features, make sure you mark the item as "dirty". Ideally post your code as JsFiddle or JSBin.
So I used this totally awesome tool called Visual Event, which shows all the event handlers bound to an object - and I noticed that every time I clicked or played around with my object and checked the list of event handlers bound to it, there were and more every time. My problem is this one: console.trace or stack trace to pinpiont the source of a bug in javascript? After using Visual Event and someone else's suggestion, I'm thinking my problem is that I'm probably binding the same handlers to the same events over and over again. Is there a way to unbind things regularly?
My application has a bunch of plugins connect to dynamically created divs. These divs can be resized and moved around the place. The application is a kind of editor, so users arrange these divs (which contain either images or text) in any design they like. If the user clicks on a div, it becomes "activated", while all other divs on the page get "deactivated". I have a bunch of related plugins, like activateTextBox, initTextBox, deactivateTextBox, readyTextBox, and so on. Whenever a div is first created, the init plugin is called once, just the first time after creation, like so:
$(mydiv).initTextBox();
But readyTextBox and activateTextBox and deactivateTextBox are called often, depending on other user events.
In init, I first use bind things like resizable() and draggable(), then I make the box "ready" for use
$.fn.extend({
initTextBox: function(){
return this.each(function() {
// lots of code that's irrelevant to this question
$this.mouseenter(function(){
if(!$this.hasClass('activated'))
$this.readyTextBox();
}
$this.mouseleave(function(){
if($this.hasClass('ready')){
$this.deactivateTextBox();
$this.click(function(e){
e.preventDefault();
});
}
});
});
});
Here's a simplified summary version of the readyTextBox plugin:
(function($){
$.fn.extend({
readyTextBox: function(){
return this.each(function() {
// lots of code that's irrelevant to this question
$this.resizable({ handles: 'all', alsoResize: img_id});
$this.draggable('enable');
$this.on( "dragstop", function( event, ui )
{/* some function */ });
$this.on("resizestop", function( event, ui ){ /* another function */ });
// and so on
});
Then there's activateTextBox():
$.fn.extend({
activateTextBox: function(){
return this.each(function() {
// lots of code that's irrelevant to this question
$this.resizable('option','disabled',true); //switch of resize & drag
$this.draggable('option', 'disabled', true);
});
Then deactivate, where I turn on draggable and resizable again, using the code:
$this.draggable('enable'); $this.resizable('option','disabled',false);
These divs, or "textboxes" are contained within a bigger div called content, and this is the click code I have in content:
$content.click(function(e){
//some irrelevant code
if( /* condition to decide if a textbox is clicked */)
{ $(".textbox").each(function(){ //deactivate all except this
if($(this).attr('id') != $eparent.attr('id'))
$(this).deactivateTextBox();
});
// now activate this particular textbox
$eparent.activateTextBox();
}
});
This is pretty much the relevant code related to text boxes. Why is it that whenever I drag something around and then check Visual Event, there are more clicks and dragstops and mouseovers than before? Also, the more user interacts with the page, the longer the events take to complete. For example, I mouseout from a div, but the move cursor takes a loooong time to get back to default. I quit dragging, but everything gets stuck for a while before getting ready to take more user clicks, etc. So I'm guessing the problem has to be that I'm binding too many things to the same events need to be unbinding at some point? It gets so bad that draggable eventually stops working at some point. The textboxes just get stuck - they're still able to be resized, but dragging stops working.
Am I binding events over and over
Yes. Have a look at your code:
$this.mouseenter(function(){
…
$this.mouseleave(function(){
…
$this.click(function(e){
…
});
});
});
That means every time you mouseover the element, you add another leave handler. And when you leave the element, every of those handlers adds another click event.
I'm not sure what you want to do, but there are several options:
bind the event handlers only once, and keep track of the current state with boolean variables etc.
before binding, remove all other event handlers that are already bound. jQuery's event namespacing can help you to remove only those which your own plugin added.
use the one() method that automatically unbinds a listener after firing it.
I've seen a few examples using jQuery that do what I want, but I'm developing a plugin for an application that uses the Prototype framework and would like to stick to that.
Basically, I want the functionality as if the ctrl key was always pressed. If a selected option is clicked, I want it to de-select.
Here's an example I found using jQuery: http://jsbin.com/idofa
Here's my version that doesn't work, because the event fires after the default action selects it (which results in it selecting and then immediately being unselected).
option.observe('click', function(event){
this.selected = !this.selected;
});
I have tried adding event.stop(); and event.preventDefault(); neither of which seem to have an effect.
Thanks!
Proper answer, from comment I made above:
Selection is performed on mousedown, so 'mousedown' event has to be used instead of 'click' here.
option.observe('mousedown', function (event) {
this.selected = !this.selected;
event.stop(); // unnecessary in this case, but I think it's good practice
});
Example on a fiddle, edited by Victor:
http://jsfiddle.net/RP7em/3/
I'm trying to bind to the click event of the currently selected tab with jQuery tabs. I'm dynamically creating tabs so I need to do live binding. The idea is that I want to reload the current tab if it's clicked on again.
I tried binding in the select event, but it seems this event doesn't fire for click on the already selected tab.
I also tried a standard jQuery live binding:
$('li.ui-tabs-selected').live('click', function() {
alert('woof');
});
this doesn't seem to work either, but I can't work out why not. I can only guess the tab framework is intercepting the click event.
Any ideas?
jQuery(document).ready(function() {
jQuery(".ui-layout-center").tabs({
show: loadTab
});
rootLayout = jQuery('#container').layout
({
applyDefaultStyles: true,
north__spacing_open: 0
});
jQuery("#tabs_div").tabs();
loadIframe();
});
function loadTab()
{
alert('woof');
}