I have a combobox for which I have a validation that a change in selection should be reverted back on meeting a condition.
I have detected the condition but when I change the value and displayedValue of combobox, the onChange associated with the combobox gets fired. Following is the code I am using to change the selection:
dijit.byId('scheduleName').set('value',val,false);
dijit.byId('scheduleName').set('displayedValue',displayVal,false);
I have also tried to set the onChange to blank before firing above code and then re attaching the onChange code as below:
dojo.connect(dijit.byId('scheduleName'),'onChange','');
dijit.byId('scheduleName').set('value',scheduleNameVal,false);
dijit.byId('scheduleName').set('displayedValue',trim(String(scheduleNameName)),false);
dojo.connect(dijit.byId('scheduleName'),'onChange', "hideGrid");
hideGrid is a javascript function. I am using Dojo 1.8
Set only value, not displayedValue
myComboBox.set("value", value, false);
then only watch callback is fired, not dojo/on or onChange.
Check this jsFiddle out to see differencies: http://jsfiddle.net/phusick/d7ymY/
Note: If you need to trim() displayedValue consider a custom setter or dojo/aspect::before.
You should use dojo.disconnect instead of
dojo.connect(dijit.byId('scheduleName'),'onChange','');
Example:
var hndl, sched = dijit.byId('scheduleName');
var fnWireOnChange = function(){
hndl = dojo.connect(sched,'onChange', 'hideGrid');
};
dojo.disconnect(hndl);
sched.set('value',scheduleNameVal,false);
sched.set('displayedValue',trim(String(scheduleNameName)),false);
fnWireOnChange();
As a side note, connect/disconnect has been deprecated in favor of dojo/on
https://dojotoolkit.org/reference-guide/1.8/dojo/on.html#dojo-on
Related
I use VueJS component provided by 3rd-party library, which has its own events. I can handle such events as usual with "v-on" directive and specifying interesting event name, like that:
<TheComponent v-on:itemchanged="handler"/>
But is it possible to run handler only when 'itemchanged' occurs with CTRL key pressed? The handler should not run when CTRL key is not pressed.
I tried to play with click.crtl and keydown.ctrl but have no success.
Is it possible to run handler only when 'itemchanged' occurs with CTRL key pressed?
Assuming itemchanged is triggered by a change event: no, not without a workaround. Unlike keyboard and mouse events, change contains no keyboard info. You'll need to track the status of ctrl keypresses independently because JavaScript has no way of testing whether a key is down outside of those events.
Plugin
One encapsulated way to accomplish it is with a plugin:
const pluginKeypresses = function(Vue) {
const keyPresses = {
Control: false
}
window.onkeyup = function(e) { keyPresses[e.key] = false; }
window.onkeydown = function(e) { keyPresses[e.key] = true; }
Vue.prototype.$keyPresses = Vue.observable(keyPresses);
}
Vue.use(pluginKeypresses);
Note: The e.key detection here is the current standard as of 11/2020, but is not yet fully supported by IE and some other browsers. If IE matters to you, change the key detection implementation to your liking.
Usage
From anywhere in the app you can test this.$keyPresses.Control (boolean)
Demo
Don't you receive an event object with this event ? By adding a parameter to handler you should be able to catch the event, and check inside which key is pressed. Then just add a if statement at the beginning of you handler function.
<mat-checkbox (change)="handleProductClick(children, $event)" [(ngModel)] = "children.selected"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
handleProductClick(selectedProd : Product, event: any)
{
event.stopPropagation();
}
If I use click function instead of change it works fine. Although I can't use click. I have to stick with change. Is there a way to call stopPropagation from change function? If not what else can I do to stop the event propagation?
I got it working. Had to use both click and change on the checkbox. I had tried that earlier. The only difference was I was calling a function in the click method and it never got called. If you call $event.stopPropagation on click method in the template, it works well. strange. The below answer solved my problem. Angular 2 prevent click on parent when clicked on child
<mat-checkbox (change)="handleProductClick(children, $event)"[checked]="children.selected" (click)="$event.stopPropagation()"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
I'm using dojo to validate input fields and if there is an error (for eg: required field) it appears in the dojo tooltip. But, I would like to show error in the custom div instead of tooltip.
So, I'm wondering if there is a way to hide/disable the validate error to appear in the tooltip? If so, I can capture the error message shown in the hidden tooltip and show the result in custom div, which will be consistent with error styling across the application.
Please advise. Thanks.
I would recommend to use the standard Dojo validation mechanism, contrary to what vivek_nk suggests. This mechanism works great in most cases, and covers most situations (required, regular expressions, numbers, dates etc.).
To solve your issue: you can overrule the "dispayMessage" function of a ValidationTextBox (for example).
displayMessage: function(/*String*/ message){
// summary:
// Overridable method to display validation errors/hints.
// By default uses a tooltip.
// tags:
// extension
if(message && this.focused){
Tooltip.show(message, this.domNode, this.tooltipPosition, !this.isLeftToRight());
}else{
Tooltip.hide(this.domNode);
}
}
Just create your own ValidationTextBox widget, extend dijit/form/ValidationTextBox, and implement your own "displayMessage" function.
Simple solution for this scenario is not to add the "required" condition at all to those fields. Instead add a separate event handler or function to check for this validation.
For eg: add a function for onBlur event. Check if the field is a mandatory. If so, show message in the custom div as expected.
<input data-dojo-type="dijit/form/TextBox"
id="sampleText" type="text" mandatory="true" onBlur="checkMandatory(this)"/>
function checkMandatory(field) {
if(field.mandatory=='true' && field.value=="") {
alert('value required'); // replace this code with my showing msg in div
} else {
field.domNode.blur();
}
}
This above code snippet does not use Dojo for validation, rather manual. Dojo actually helps to ease this by just adding the attribute "required". If that is not required, then just ignore Dojos help for this case and go native.
So, for all fields, just add the attributes - "mandatory" & "onBlur", and add the above given function for onBlur action for all these fields.
In addition to the 'back' button functioning as expected, I need to asynchronously invoke a function to update some db tables and refresh the UI.
Prior to making this post, I did some research and tried the following on this...
<h1 data-dojo-type="dojox.mobile.Heading" id="hdgSettings" data-dojo-props="label:'Settings',back:'Done',moveTo:'svStart',fixed:'top'"></h1>
dojo.connect(dijit.registry.byId("hdgSettings"), "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
Since my heading doesn't have any other widgets than the 'back' button, I thought that attaching this event to it would solve my problem... it did nothing. So I changed it to this...
dojo.connect(dijit.registry.byId("hdgSettings")._body, "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
As it turns out, the '._body' attribute must be shared by the Accordion widget that I just happen to use as my app's main UI component, and any attempt to interact w the Accordion rendered my entire app useless.
As a last resort, I guess I could simply forgo using the built-in 'back' button, and simply place my own tabBarButton on the heading to control my app's transition and event processing.
If the community suggests that I use my own tabBarButton, then so be it, however there has to be a way to cleanly attach an event to the built-in 'back' button support.
Thoughts?
The following should do the trick:
var backButton = dijit.registry.byId("hdgSettings").backButton;
if (backButton) {
dojo.connect(backButton, "onClick", function() { ... });
}
Remarks:
The code above should be executed via a dojo/ready call, to avoid using dijit's widget registry before it gets filled. See http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html.
Note the capitalization of the event name: "onClick" (not "onclick").
Not knowing what Dojo version you use (please always include the Dojo version information when asking questions), I kept your pre-AMD syntax, which is not recommended with recent Dojo versions (1.8, 1.9). See http://dojotoolkit.org/documentation/tutorials/1.9/modern_dojo/ for details.
I'm using the Kendo UI ComboBoxes in cascade mode to build up a filter that I wish to apply.
How do I clear/reset the value of a Kendo UI ComboBox?
I've tried:
$("#comboBox").data("kendoComboBox").val('');
$("#comboBox").data("kendoComboBox").select('');
$("#comboBox").data("kendoComboBox").select(null);
all to no avail. The project is an MVC4 app using the Razor engine and the code is basically the same as the Kendo UI example.
If you want to use select the you need to provide the index of the option. Otherwise use text
$("#comboBox").data("kendoComboBox").text('');
Example: http://jsfiddle.net/OnaBai/4aHbH/
I had to create my custom clear function extending involved Kendo UI controls like the following:
kendo.ui.ComboBox.fn.clear = kendo.ui.AutoComplete.fn.clear = function () {
if (!!this.text) {
this.text("");
}
if (!!this.value) {
this.value(null);
}
this._prev = this.oldIndex = this._old = this._last = undefined;
};
Then you can call $("mycontrol").data("kendoAutoComplete").clear(); to clear the control and have the change handler invoked when doing the following: select an item, clear and select again the previous item.
This also works:
$("#comboBox").data("kendoComboBox").value(null);
I've found these options below seem to work to reset the kendo combo box. You can run $("#comboBox").data("kendoComboBox").select() after trying two below and you should see a value returned of -1, indicating its reset.
$("#comboBox").data("kendoComboBox").value('')
$('#comboBox').data().kendoComboBox.value('')
$("#comboBox").data("kendoComboBox").select(-1)
$('#comboBox').data().kendoComboBox.select(-1)