require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
disabled:true,
label: "Click me!",
onClick: function(){
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode").startup();
});
require(["dijit/form/Textarea","dijit/registry","dojo/dom" ,"dojo/on","dojo/domReady!"], function(Textarea,registry,dom,on){
var textarea = new Textarea({
name: "myarea",
value: "This is the text area...\n\n\n\n\n\n",
style: "width:200px;"
}, "myarea").startup();
//disalbe the button...
//registry.byId("progButtonNode").set("disabled",true);
//test
dom.byId("result1").innerHTML += "Good!";
//add onchange event...
//var button = registry.byId("progButtonNode");
alert('hi');
on(textarea,"change",function(){
alert('3');
registry.byId("progButtonNode").set("disabled",false);
});
});
The above is my code.
My requirement is detect the changes once it was made from textarea, and then set the button enable. (the button was disable by default)
I am getting error:
Uncaught TypeError: Cannot read property 'on' of undefined
Thanks a lot!
To detect changes on widget Textarea, use onChange when initializing it.
Use registry.byId() to get you Button widged ans set is property disabled to false using method .set();
Working example: https://jsfiddle.net/41epfsdd/
Please note I have used intermediateChanges: true this allow onChange to fire on each keystroke which changes value within the widget Textarea.
If you omit it or use intermediateChanges: false instead, onChange event will only fires when the field is blurred.
require(["dijit/form/Button", "dijit/form/Textarea", "dijit/registry", "dojo/dom", "dojo/on", "dojo/domReady!"], function(Button, Textarea, registry, dom, on) {
var myButton = new Button({
disabled: true,
label: "Click me!"
}, "progButtonNode").startup();
var textarea = new Textarea({
name: "myarea",
value: "This is the text area...\n\n\n\n\n\n",
intermediateChanges: true,
onChange: function() {
var progButtonNode = registry.byId('progButtonNode');
progButtonNode.set('disabled', false);
}
}, "myarea").startup();
});
Edit:
Regarding your comment on how to apply an event handler on an already generate Textarea widget. You can use dojo/on example:
require(["dojo/on"], function(on){
on(target, "event", function(e){
// handle the event
});
});
Example based on your comment:
on(this.lastCommentTextArea, 'change', function(event){
// handle the event
})
Related
I have a dijit/form/button that is added to a dijit/layout/ContentPane. The dijit/layout/ContentPane is then placed within a dijit/form/DropDownButton. When I click on the dijit/form/button it does not fire the first time. For this example, I'm just having the button click generate an alert box with the value typed into the ValidationTextBox. I've seen some discussion on this topic in other forums suggesting that a onMouseDown event or focus event is canelling out the first onClick event. What is the best way to test for when these events have loaded or am I simply missing something in the code for dijit/form/button? Thanks for having a look.
dojoConfig = {
parseOnLoad: true
}
require(["dijit/form/DropDownButton", "dijit/MenuItem", "dijit/layout/ContentPane", "dijit/form/ValidationTextBox", "dijit/form/Button"],
function(DropDownButton, DropDownMenu, ContentPane, ValidationTextBox, Button) {
var parcelsearchCP = new ContentPane({
id: 'parcelsearchCP',
tabindex: 0
});
var parcelsearchInput = new ValidationTextBox({
title: "Enter Parcel ID",
name: "parcelvalue",
id: "parcelsearchInput",
placeholder: "<enter 8 digits>",
regExp: "^[0-9]*$"
});
var searchBtn = new Button({
//iconClass: "mySearchIcon",
name: "searchme",
label: "click me"
});
searchBtn.startup();
dojo.place("<div>Enter Parcel ID: </div>", parcelsearchCP.containerNode);
dojo.place(parcelsearchInput.domNode, parcelsearchCP.containerNode);
dojo.place(searchBtn.domNode, parcelsearchCP.containerNode);
var button = new DropDownButton({
label: "hello!",
name: "programmatic2",
dropDown: parcelsearchCP,
id: "progButton"
}, "dropDownButtonContainer").startup();
dojo.connect(searchBtn, "onClick", function() {
var boxentry = dijit.byId("parcelsearchInput");
if (boxentry.value !== "" || parcelsearchInput.isValid() === true) {
alert(boxentry.value);
} else {
alert("Please enter a valid 8 digit number and re-submit.");
}
});
});
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="dropDownButtonContainer"></div>
</body>
Well as it turns out, all I had to do was change the event from "onClick" to "onMouseDown" and add a searchBtn.focus() in the button connect statement. That seemed to do the trick. Thanks for your time!
I would like to define custom widget, create a Dijit/form/Button inside and add attach point to it. But for some reason the attach-point remains invisible..
postCreate: function() {
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
"data-dojo-attach-point": "myButton"
}, "progButtonNode").startup();
});
console.debug(this.myButton); // returns undefined
}
technically you can do it. But dojo indexes all the attach-points on parse. so if you are going to add a button dynamically then you'll have to parse the dom too.
I'm working on a plugin in CKEditor which have as a goal to hide or show element depending on which of my check box is checked. I have those element defined :
contents :
[
{
id : 'tab1',
label : 'Configuration Basique',
elements :
[
{
type : 'checkbox',
id : 'check',
label : 'Vers une page web',
'default' : 'unchecked',
onClick : function(){
}
},
{
type : 'text',
id : 'title',
label : 'Explanation',
}
]
},
{
id : 'tab2',
label : 'Advanced Settings',
elements :
[
{
type : 'text',
id : 'id',
label : 'Id'
}
]
}
],
so now what i would like to do is to hide no disable the text input with the label and print it only when the box is checked. So i've seen that i should use something like that :
onLoad : function(){
this.getContentElement('tab1','title').disable();
},
but the thing is i don't want to disable it i want to hide and then print it if the user check the box (which is why i put a onClick function in my checkbox). i've tryed to use the hide() function but it doesn't work and also the setAttribute('style','display : none;')
Tia :)
If you actually want to hide (and not disable) the element you can do this using
this.getContentElement('tab1','title').getElement().hide();
The extra getElement() call returns the litteral DOM object for your contentElement object, so you can call hide()/show() at will on it.
The onClick properties is available and does work on uiElement although it is not documented. The biggest problem is the definition of "this" is not the same inside the event than other place in the config. You first have to get the dialog to get other fields:
{
type: 'checkbox',
id: 'check',
label: 'check',
onClick: function() {
var dialog = this.getDialog()
if(this.getValue()){
dialog.getContentElement('tab1','title' ).disable();
} else {
dialog.getContentElement('tab1','title' ).enable()
}
}
}
Your checkbox definition is correct but there's no such thing like onClick property in dialog uiElement definition. All you got to do is to attach some listeners and toggle your field. Here you go:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( isThisYourDialog? ) {
...
// Toggle your field when checkbox is clicked or dialog loaded.
// You can also use getInputElement to retrieve element and hide(), show() etc.
function toggleField( field, check ) {
field[ check.getValue() ? 'enable' : 'disable' ]();
}
var clickListener;
dialogDefinition.onShow = function() {
var check = this.getContentElement( 'tab1', 'check' ),
// The element of your checkbox.
input = check.getInputElement(),
// Any field you want to toggle.
field = this.getContentElement( 'tab1', 'customField' );
clickListener = input.on( 'click', function() {
toggleField( field, check );
});
// Toggle field immediately on show.
toggleField( field, check );
}
dialogDefinition.onHide = function() {
// Remove click listener on hide to prevent multiple
// toggleField calls in the future.
clickListener.removeListener();
}
...
}
});
More docs: uiElement API, dialog definition API.
I am new to JavaScript so bear with me here.
I have this code below that checks a text input fields value, if it matches then I fire off my Custom Dialog object/function which shows a Dialog modal window.
Now my goal is to Clear out the text input that fired the Dialog to open if the Cancel button is clicked
I have a Callback function named cancelCallback that I can pass into my Dialog function.
In my example you can see I have cached the Input field selector hostnameSelector and then passed it into my callback.
Below that you can see I print out the object to the Console. The Console shows my NEW value for the text field but it does not update on the screen.
This could be possibly because the Text Input filed is Dynamicly added to the screen/DOM?
Any ideas on how I can get it working? I am also able to use the latest jQuery if needed to help
// Show Notice if Hostname Matches the Domain Name
$(document).on('change','div.hostName > input',function() {
// cached Input Selector
var hostnameSelector = $(this);
var hostName = $(this).val();
var domainName = $("#domainName").val();
var pattern = new RegExp(domainName + "$","g");
if ( hostName.match(pattern) != null ) {
var msg = 'Are you sure you want to delete action?';
zPanel.dialog.confirm({
heading: 'ATTENTION',
message: msg,
width: 300,
cancelCallback: function (hostname) {
hostnameSelector .value = 'hi';
console.log(hostnameSelector);
},
cancelButton: {text: 'Cancel', show: true, class: 'btn-default'},
okButton: {text: 'Confirm', show: true, class: 'btn-primary'},
});
}
});
CancelCallback should set the new value by calling:
hostnameSelector.val("hi")
here is the code and also i want onPaste event instead of click but nothing working
var mpan0 = new Ext.form.TextField({
name:'mpan[]' ,
value:0 ,
allowblank:false ,
enableKeyEvents:true ,
fieldLabel:'Mpan',
maxLength:2,
width:35
});
mpan0.addListener('click', function(){
alert( "amiy");
});
Ext.form.TextField does not have a 'click' event. You can see the events it does support at:
http://www.sencha.com/deploy/dev/docs/?class=Ext.form.TextField
The closest I can think of to what you are seeking is the 'focus' event.
If you really must have a click event you can try attaching a listener to the field object's fundamental DOM element:
Ext.form.TextField({
listeners: {
afterrender: function( field ) {
field.getEl().on('click', function( event, el ) {
// do something on click
});
}
}
});
I can't claim to know how successful that will be, however.
Documentation on Ext.Element's click event can be found at:
http://www.sencha.com/deploy/dev/docs/?class=Ext.Element
yourtextfield = new Ext.form.TextField({
id:'yourtextfield ',
readOnly : true,
listeners: {'render': function(cmp) {
cmp.getEl().on('click', function( event, el ) {
alert("You click text field");
});
}}
});
This works.
ExtJs uses on, so it should be
mpan0.on("click", function(){
alert("amiy");
});
But you can also add it declaratively
var mpan0 = new Ext.form.TextField({
name:'mpan[]' ,
value:0 ,
allowblank:false ,
enableKeyEvents:true ,
fieldLabel:'Mpan',
maxLength:2,
width:35,
listeners: {
"click": function() {
alert("amiy");
}
}
});