Develop Reference

How to detect the changes from textarea by dojo

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
})

$(this).attr('id'); Not Working

Good day to all I am building a page and everything is going good until this last step.
Here's the code:
$(document) .ready(function(){
var a;
var b=0;
var z="";
var menu = [
{ name: "LOGO", items: [] },
{ name: "BANNERS", items: ["Banner", "Banner inside the Body"] },
{ name: "HEADERS", items: ["Header1", "Header2", "Header3", "Header4", "Header5"] },
{ name: "BODY TEXT", items: [] },
{ name: "LISTS", items: ["List1", "List2", "List3"] },
{ name: "TABLES", items: ["Table", "Table Text"] },
{ name: "GRAPHS", items: ["Graph1", "Graph2"] },
{ name: "HEADERS/FOOTERS SECTION", items: [] },
{ name: "SPECIAL SECTION", items: ["Special Section1", "Special Section2", "Special Section3", "Special Section4", "Special Section5"] },
];
for (a=0; a<menu.length; a++){
z+='<div class="menu-enclosure" id="butt-'+a+'"><button class="btn">'+menu[a].name+'</button>';
while (b<menu[a].items.length) {
z+='<button class="sub" id="subt-'+b+'">'+menu[a].items[b]+'</button>';
b++;
}
b=0;
z+="</div>";
}
$('.menu-holder') .append(z);
$(document) .on('click', '.menu-enclosure', function(){
var clicked =$(this).attr('id');
var z = clicked.replace(/\D/g, '');
var x =0;
$('.content-holder') .html("");
$('.content-holder') .append('<div class="title-bar"><span class="reg-wht">'+menu[z].name+'</span></div><BR><div class="photo-holder"><img alt="'+menu[z].name+'" src="'+menu[z].name+'"></div>');
$('.sub') .hide();
while (x<menu[z].items.length) {
$('#'+clicked+' #subt-'+x) .show();
x++;
}
x=0;
$(document) .on('click', '.sub', function(){
var clicked =$(this).attr('id');
$('.content-holder') .append(clicked);
});
});
});
Also, here's the JS Fiddle.
https://jsfiddle.net/453azpLr/embedded/result/
If you've visited my fiddle, you will notice that everything works fine except for the last part (lines 50 and so on).
As you can see when you click in the menu, the Text of whatever is clicked is then reflected to the content-holder div. But when i click on the sub menu it doesn't work.
I don't know what the main problem is or if I'm looking at it correctly but I have tried changing line 51 to various things like the once below:
var clicked =$(this).children("button").attr('id');
var clicked =$(this).find("button").attr('id');
var clicked =$(this).children().attr('id');
I also have tried changing the selector (.menu-enclosure) to the classed and ids of the buttons but to no avail.
As for the time being, I am trying to figure out if clicking gets the correct id thus the code:
$('.content-holder') .append(clicked);
Help pls

It should work if you change the first bit to this :
$(document).on('click', '.menu-enclosure', function(e) {
var clicked = e.target.id || this.id;
This will retrieve the actual element the click originated from instead of the parent. When changing it to this, the element that is returned when opening the menu will no longer be the wrapper div itself but the first child button. This has no id but a class, so if it turns up empty it will look at the parent div next.
Note that this won't work anymore whenever <button class="btn"> would get it's own id. You could leave the second check out if these buttons get the id transferred from the .menu-enclosure parent.
https://jsfiddle.net/37eyppnh/
By the way, when the ids from .menu-enclosure are transferred to the buttons this would also work :
$(document).on('click', '.menu-enclosure button', function() {
var clicked = this.id;

Alert box error

I have to allow only alphabets to the text box. I have validated through JavaScript on text box using "on blur". The alert from the JavaScript remains open even though I try to close.
Find the demo link and the JavaScript below.
Note: Type any non-alphabet in the text box 1 and press tab or click on somewhere else from the following link.
http://demo.acclary.com/test.aspx
The JavaScript I used is, below:
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
});
setTimeout(function () { textbox.focus(); }, 1);
exit;
return false;
}
return true;
}
$('.modal-btn').click(function() {
$('#modal-window').hide();
});

You just need to add following line of code in the modal function:
callback: function(){ $("#myTextBox").focus();}
So After change, it will be like
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
callback: function(){ $("#myTextBox").focus();}
});
That's all.
I have created fiddle using the Modal plugin that you are using in the page.
http://jsfiddle.net/7kpsv1p4/1/

change on-blur to onchange
small changes in your code
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
textbox.focus();
modal({
type: 'warning',
title: 'Warning',
text: 'Only Alphabets allowed!',
center: false,
});
return false;
}
return true;
}
I hope this will work.

If you use onblur and focus on the textbox together the alert box will always show in the screen, because after focusing the textbox you are closing the modal alert means that you are re-belurring the textbox.
So it's better to use :
the onchange event.
Or the onKeyup event.
Note: Using the onkeyup is a better approach to refocus the textbox safely.
And try to focus on the textbox right before showing the alert, so when you close the alert the textbox will be already focused.
EDIT:
Here's a DEMO Fiddle using the onkeyup event but a simple alert, and here's the code:
function checkalphabets(textbox) {
var pattern = /^[a-zA-Z\s]+$/;
if (!pattern.test(textbox.value)) {
setTimeout(function () { textbox.focus(); }, 1);
alert('This is wrong');
exit;
return false;
}
return true;
}
It fires whenever you type a wrong character and still focuses in teh textbox.

Event "press" on sap.m.CustomListItem doesn't work

The dokumentation of sap.m.CustomListItem says that CustomListItem hat a press event.
I created a site with the press event on a list item, and another press event on a Button inside the list item. The button works fine. A click on the list item shows nothing. Not even an error.
var oCustomItem = new sap.m.CustomListItem({
content: [
new sap.m.Text({
text: "{text}"}),
new sap.m.Button({
text: "btn",
press: function(){
alert("Pressed the button");
}
})
],
press: function(){
alert("Clicked the list item");
}
});
Here is an example:
http://jsbin.com/pozeve/4/edit?html,output

This is a frequent issue people face when they´re using List controls. There´s an answer to this here.
To put it in a nutshell, you either have to add a type property to your CustomListItem:
var oCustomItem = new sap.m.CustomListItem({
content: [
new sap.m.Text({
text: "{text}"}),
new sap.m.Button({
text: "btn",
press: function(){
alert("Pressed the button");
}
})
],
type : sap.m.ListType.Active,
press: function(){
alert("Clicked the list item");
}
});
or a mode property to your sap.m.List. For a comparison see the answer mentioned above.

Suppressing a Kendo UI Grid selectable event when clicking a link within a cell

I have a Kendo grid that has links, which I also set to selectable, snippet here:
columns: [{
field: 'link', title: 'Link',
template: 'Click Here'
}],
...
selectable: 'row',
change: function(e) {
var rowUid = this.select().data('uid');
rowDs = this.dataSource.getByUid(rowUid);
console.log('Went (1): ' + rowDs);
return false;
}
When I click on the external link <a>, I also select the row. Is there any way to suppress the selectable event?

You can also detect what element triggered the click by giving the column a CSS class. Then you would put an if-statement in the change event to detect if the column was clicked or not:
columns: [
{
title: ' ',
command: {
text: 'My Button',
click: function (e) {
e.preventDefault();
//GET SELECTED DATA
var data = this.dataItem($(e.currentTarget).closest('tr'));
//DO SOMETHING
}
},
attributes: {
'class': 'actions'
}
}
]
Then in the change you would have this:
change: function (e) {
//GET TRIGGER SOURCE TO DETERMINE IF ACTION CLICKED
var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
var isAction = eventTarget.parent().hasClass('actions');
//SELECT ITEM IF APPLICABLE
if (!isAction) {
var grid = e.sender;
var dataItem = grid.dataItem(this.select());
if (dataItem) {
//DO SOMETHING
}
}
}

I just stumbled across a forum post by a Kendo UI dev stating that "the selection of the grid cannot be prevented" (link). I guess that means I will have to work around this.
Edit: I actually just want to get the row's uid attribute so I can select the selected dataItem from the dataSource. I've discovered that you can get it while you're defining your columns template,
columns: [{
field: 'link', title: 'Link',
template: 'Manual Edit Link'
}],
And use it to retrieve the selected row's dataItem.
var selectedRow = $('#gridId').data('kendoGrid').dataSource.getByUid(rowUid);
Will close this question in a while, in case anyone else can help.