using latest Chrome browser.
even after wiring up the onchange event for an inputsurface the dirty way since there is no extended event to just do inputsurface.on('change',function(){}):
MyInputSurface.prototype.deploy = function deploy(target) {
this._superDeploy(target);
target.onchange = function() {
console.log('test change');
};
target.onclick = function() {
console.log('test click');
};
};
The onchange event does not get fired until i click back in the browser window. The click event works just fine. Any advice?
The onchange event does not fire until the input loses focus. This is why you have to click in the browser window again before your callback is run.
From the IE Dev Center:
This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.
If you want the value of the input as the user is typing, you'll have to listen for the input's input event.
Again from IE Dev Center:
You can use the oninput to detect when the contents of a textArea, input type=text, or input type=password have changed. This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.
When your input callback fires, simply take the target value as you would with change.
Related
I am using navigation window in my app.
I want to reset variable when every time window appear.
I tried
$.win.addEventListener("focus", function(e){
alert("window appear");
});
This is not calling. So i tried following:
$.win.addEventListener("open", function(e){
alert("window appear");
});
But this is only call when first time it open..it is not called when screen open from back clicked.
Focus should work if you minimise the app or show the status bar, blur will also be triggered when the window loses focus.
It sounds like you are never closing the window or you are registering the event listeners inside another function, ensure the event listeners are defined at the top level (not in any other functions).
Console.log doesn't work very well in titanium use Ti.API.info('Alert message');
I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}
I have a kendo ui grid which has an incell editing mode.
Required is when altering a value in a cell and pressing anywhere else a confirmation window to appear to save/cancel the change.
Right now i have managed to make it partially work. In other words when i change a value and press somewhere on the web page or a button i get the confirmation window as requested.
When i press on another cell nothing happens. The pressed cell gets in edit mode, the "edit" function is fired but the previous cell loses its value and the binded function is never called.
So in a few words, i need to call my confirmation function every time a value is changed and the user presses anywhere else. Right now it partially works. It seems that the function is not fired when pressing on another cell.
My source right now is like that.
edit: function(e) {
e.model.unbind("change", confirmationFun).bind("change", confirmationFun);
}
function confirmationFun(e){
// open confirmation dialog and call save function
}
I tried to combine my confirmation with the change: function(e) but the change is fired every time i press on a cell, even before i change a value.
Instead of using edit event, you might use blur. After the initialization of your grid add the following command that binds any blur to your confirmationFun function.
$('#grid').on("blur", "input", confirmationFun);
Where grid is the id of your KendoUI grid.
The problem was finally resolved by removing the selectable: "multiple cell"
part from my code. Now by pressing on a different cell i get the confirmation dialog as required.
Thank you.
I want to make some changes to a text field once it loses the focus but I cant figure out the event I need. This is my code:
Event.observe('my_text_field', '????', function(event) {
do something here
}
So, what do I have to put in instead of the ???? ?
Thanks!
You are looking for the blur event:
The blur event is fired when an element has lost focus.
And from the DOM2 Events spec:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?
I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html
The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.
panel.on('click', function(e) {
e.stopEvent();
// do your stuff
});
another fix you could try (I haven't) is to wipe bubbleEvents on the button.
Another, possibly less robust fix is to turn on event buffering:
el.on('click', this.onClick, this, {buffer: 10});
Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.
{
...
preventDefault: true,
...
}