Develop Reference

this.id on an Element Event Listener becomes an array of all id's of elements clicked

I have an event listener on all textboxes. When a textbox is clicked, I'd like to open a keyboard. On Enter of the keyboard I'd then like to use the id of the textbox which called it to do some logic. However the id (txtbxId in code) just becomes the first textbox I click, then the second textbox I click in an array.
E.g, the alert becomes 'textbox1' - after second textbox click alert is 'textbox1' 'textbox2'
I've tried to force the variable id to '', to delete it etc. to no avail,
Code snippet here:
$('.textbox').click(function() {
var txtbxId = this.id;
$("#Keyboard").show();
$(document).on('keydown', function(e) {
if (e.which === 13) {
alert(txtbxId);
}
});
});
});

The issue is because you're nesting events. Therefore as well as duplicating the keydown event when a click event happens, you're supplying each individual id to those events.
To fix this, use a single event handler for all the .textbox elements, and read their own id from the reference to the element which raised the event which is available through the this keyword:
$('.textbox').click(function() {
$("#Keyboard").show();
});
$(document).on('keydown', '.textbox', function(e) {
if (e.which === 13) {
alert(this.id);
}
});

The problem is that your on('keydown') function the first time you click a textbox never gets unassigned, so for every time you click a .textbox, you're making a NEW keydown callback, but not removing your old ones.
I would recommend making an object outside of your onClick callback which manages .keydown callbacks, so that you only have one at any time.
Something like this:
window.keydownmanager = {
init: () => {
$(document).on('keydown', function (e) {
window.keydownmanager.callback(e);
});
},
callback: () => {},
setCallback: (cb) => {
window.keydownmanager.callback = cb;
}
}
And inside your onClick callback, do this:
var txtbxId = this.id;
$("#Keyboard").show();
window.keydownmanager.setCallback(function(e) {
if (e.which === 13) {
alert(txtbxId);
}
})

DOM element clicks the button but do not call function defined in controller for Button

I have a requirement to capture events user performs on SAP UI5 app and playback same events when required.
I have developed a small UI5 app with few text fields, buttons, and links. I am using DOM events to capture the events. I save element ID and type of command (click, input) in my local JSONModel. When playback is required, I use saved data to perform same events again.
I am able to capture and playback text input fields but when I click button or link in playback, it clicks the button, but does not call function defined in controller on press event of button.
Can someone help me on this? In below example during playback, button click on submit works fine but it does not call function defined in controller back.
Example code
View file has button defined
var Submit = new sap.m.Button("Submit", {
text: 'Submit',
enabled: true,
press: function(oEvt) {
oController.OnPressSubmit(oEvt);
}
});
Controller has function defined
OnPressSubmit: function(oEvt){ /* Perform action */ }
Another .js file injected in index file, capture events like below
document.addEventListener("input", myInputFunction);
function myInputFunction(evt) {
if (event.target.localName.length > 0) {
recordingData.push({
"type": event.target.localName,
"command": event.type,
"name": event.target.id,
"value": event.target.value
});
}
sendData(recordingData);
};
In Playback
function playDataBack(Data) {
for (var i = 0; i < playbackData.length; i++) {
if (playbackData[i].command == 'input');
document.getElementById(playbackData[i].name).value = playbackData[[i]].value;
if (playbackData[i].command == 'click') {
var targBtn = document.querySelector ("#" + playbackData[i].name);
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
targBtn.dispatchEvent (clickEvent);
}
};
}

Did you include the following code outside your button creation?
oController = this;
Once you have done this assignment you can create your button and the oController will be known inside the 'press' event.
var Submit = new sap.m.Button("Submit", {
text: 'Submit',
enabled: true,
press: function(oEvt) {
oController.OnPressSubmit(oEvt);
}
});
By the way, not that it does anything to your code itself, but if you follow naming conventions I would advice you to start your functions/methods with a lowercase :)
Kr,
Kristoff

How do I trigger a click event on a disabled button element (using pure vanilla JS)?

I have this event: this.show.onclick = this.sendData.bind(this);
in my bindEvents() function:
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
},
That runs this:
sendData: function(e) {
e.preventDefault();
let that = this;
console.log(this.show.disabled);
if (this.show.disabled) {
alert('a disabled button has just been clicked!');
this.showErrorDiv("Please select a new date range.");
} else {
$.ajax({
....
}
});
that.dataDisplayed = true;
}
Clicking on my "show" button-element doesn't activate any click event. All I found googling this is that jQuery can fix it, but I want to use vanilla JS.
How can I trigger an event on a disabled element so that my alert will get executed using only pure JS?

It cannot be done, nor should it for accessibility reasons. Someone who navigates with a keyboard can never get to the button to interact with it.

keypress event does not triggered after choosing a choice from radio button

Using backbone js i want to execute a function while hitting on the ENTER Key.
I have a form :
When i enter a vallue in an input and hit enter, the function is triggered and works fine.
When i choose a button radio and hitting enter my function isn't called. Not OK
I am using this code in my view:
View.FormCustomer = CommonViews.FormCustomer.extend({
title : "Ajouter une fiche",
},
events: {
"keypress": "getKeyCode"
},
getKeyCode: function(e){
console.log(e.keyCode);
if(e.keyCode == "13"){
this.save(e);
}
},
Does any one have any suggestions?

You might have to listen to that keypress event at the document and not in your events object.
...
initialize: function(){
var _this = this;
$(document).on('keypress.namespace', function(){
_this.someMethod();
});
},
...
//you'll have to remove that event when you ditch your view, assuming you have already override your remove method...
remove: function(){
$(document).off('.namespace');
}

Add onRightClick to JavaScript lib Hypertree

I'm currently working (a repo is here) on a Hypertree graph, which I want to use from the JavaScript InfoVis Toolkit. The issue is as follows: I added the specific events to the Hypertree, which are onClick and onRightClick.
Events: {
enable: true,
onClick: function(node, eventInfo, e) {
ht.controller.onComplete();
},
onRightClick: function(node, eventInfo, e) {
ht.controller.onComplete();
},
},
Then I simply attached the veent handlers to the Hypertree labels, just modifying demo-code a little:
//Attach event handlers and add text to the
//labels. This method is only triggered on label
//creation
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
$jit.util.addEvent(domElement, 'click', function () {
ht.onRightClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
$jit.util.addEvent(domElement, 'rclick', function () {
ht.onClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
},
That's pretty straight forward. The documentation for Hypertree events is in Options.Events.js. Now I load the page... and I have the left.clicks. But no right clicks... I want the RightClicks to move the graph and the onClicks to open a link from the DOM Element node. Can someone please give me a pointer here?
Best,
Marius

$jit.util.addEvent(obj, type, fn) is a shortcut for obj.addEventListener(type, fn, false). So you are trying to bind to 'onrclick' event. But there is no such event in javascript. For detecting right click you just need to replace your 'rclick' to 'mouseup', and in callback you should check for button to be the right one. Here is the code:
$jit.util.addEvent(domElement, 'mouseup', function (event) {
// detecting right button
if (event.button != 2) {
return;
}
ht.onClick(node.id, {
onComplete: function() {
ht.controller.onComplete();
}
});
});
Also you don't need to use Options.Events.js for this purpose, so you can remove that code

The only fault I can see in the "Events"-section, is a trailing comma behind onRightClick. It really shouldn't affect the code if you use IE>8, but it's worth a try.

Ok, this is an answer on why I think your solution is not working.
$jit.util.addEvent(domElement, 'rclick', function ()
There is no such jquery event as 'rclick'.
Typically using jquery you would detect a right-click using the following:
$('#element').mousedown(function(event) {
if (event.which === 3) {
alert('Right mouse button pressed');
}
});
Hence in your example you would use 'mousedown' instead of 'rclick'. However, looking at the documentation for addEvent:
$jit.util.addEvent(elem, 'click', function(){ alert('hello'); });
The example seems to suggest that the event object can not be passed in to addEvent's function parameter, meaning that it won't be possible to detect that the right mouse button has been clicked.
Might be worth posting your question directly to InfoVis' author, as I too will be interested to see whether it is possible to hook-up the right mouse button.