I often don't exactly know which properties are included in the Parameters of click-events.
In my actual Job I'd like to know which cell was clicked inside an devExpress-Gridview (ASP.NET MVC Extension).
So I fired the Event and logged the Parameters to console:
function OnContext(s, e) {
console.log(s);
console.log(e);
}
With this I got hundrets of properties.
How can I Access e.g. the target-accessKey-Value of the log, attached as screenshot?
The screenshot is from console.log(e); - Parameter:
Object - htmlEvent - target - accessKey
This is only for Example so if someone could explain how to read this Output, I could solve such "Little" Problems better by myself :)
UPDATE
It really seems to be that simple:
const value = e.htmlEvent.target.value;
Didn`t recognize the htmlEvent before :(
if you want just to get a value of the input:
In your case it will be:
const value = e.htmlEvent.target.value;
and in any other case if you use javascript and you have some user events
For example, get value from the input
you should use
const value = event.target.value;
and in your case htmlEvent it is the action of the user
Related
I currently have this Code SandBox where I am trying to get React-Quill and Quill-Comment to work together so that I can let users comment on content that has been written.
Quill comment is not a react package and I am a react noob so I don't know if what I am trying to do it even possible. It appears to partially work because the toolbar add comment button registers the click event.
let commentCallback;
function commentAddClick(callback) {
setOpen(true); //show the modal
commentCallback = callback; //Appears to do nothing?
console.log("callback :>> ", callback); //Nothing is ever in the callback
console.log("commentAddClick");
}
However, the callback value doesn't appear to have or do anything. When I click the add comment button in the modal:
const commentSave = () => {
const comment = "This is a comment, forced for testing";
commentCallback(comment);
console.log("comment :>> ", comment);
//let comment = $('#commentInput').val();
commentCallback(comment);
addCommentToList(comment, currentTimestamp);
};
it throws an error that tells me
commentCallback is not a function
I am attempting to following the Vanilla JS example see line 68 here. I assume this problem is related to this warning message that spams on every keypress.
quill:toolbar ignoring attaching to nonexistent format comments-add
<button type="button" class="ql-comments-add"></button>
How do I resolve the warning message, and get the callback to work? Or, secondarily, is there another good commenting library that will work with Quill?
A working example in Vanilla JS can be found here:
https://github.com/nhaouari/quill-comment/tree/master/example/quill-comment-test
I'd like to replicate this in React.
The library you are referring to says that callback function will be null when nothing is selected in the editor. So, you need to select some text in the editor for the callback function to work.
I'm having a strange issue that's being thrown in Firefox when using my Dojo (v.1.10.0) application.
Here is the following error that I'm seeing in Firefox:
Exception
{ message: "",
result: 2147549183,
name: "NS_ERROR_UNEXPECTED",
filename: "http://localhost:8888/dojo/on.js",
lineNumber: 354,
columnNumber: 0,
inner: null,
data: null
}
""
Unfortunately, I'm not sure where to go with this in my application. Can anyone point me in the right direction?
On line 354 of dojo/on, this is happening:
if(has("dom-addeventlistener")){
// emitter that works with native event handling
on.emit = function(target, type, event){
if(target.dispatchEvent && document.createEvent){
// use the native event emitting mechanism if it is available on the target object
// create a generic event
// we could create branch into the different types of event constructors, but
// that would be a lot of extra code, with little benefit that I can see, seems
// best to use the generic constructor and copy properties over, making it
// easy to have events look like the ones created with specific initializers
var ownerDocument = target.ownerDocument || document;
var nativeEvent = ownerDocument.createEvent("HTMLEvents");
nativeEvent.initEvent(type, !!event.bubbles, !!event.cancelable);
// and copy all our properties over
for(var i in event){
if(!(i in nativeEvent)){
nativeEvent[i] = event[i];
}
}
return target.dispatchEvent(nativeEvent) && nativeEvent; // Line 354
}
return syntheticDispatch.apply(on, arguments); // emit for a non-node
};
}
This is a generic FF error message... it's usually triggered by a timing or race condition, which may explain why it's showing up via dojo/on. Maybe the target or event handler that you're trying to work with is acting on something that has been removed, etc. It's unclear without knowing what event is triggering it or without seeing your full code example.
For example, maybe you're trying to add event listeners before the DOM is available, but that's just a guess. Or maybe the target node doesn't exist.
You can use the debugger to see the values of the event parameters, or you can look at your various event registration mechanisms, etc.
We have a similar issue using intern 2.0 and unit tests creating native select boxes.
Some library code (verified that its not our own) triggers a dojo.emit() which causes the internal error.
We're trying to identify the problem in more detail. If you find something please let us know as well!
we were also getting same exception at exactly same point,
for us, we replaced our code elementReference.destroy() // destroy is a dojo function with elementReference.domNode.remove() and it solved our problem.
Script threw an uncaught JavaScript error:
Cannot perform action on invalid element: UIAElementNil from target.frontMostApp().mainWindow().popover().actionSheet().buttons()["Save Note"]
Code:
var target = UIATarget.localTarget();
var app = target.frontMostApp();
var window = app.mainWindow();
target.logElementTree();
UIALogger.logPass("Stick Note Save Start");
app.navigationBar().toolbar().buttons()["Plus"].tap();
app.keyboard().typeString("Ki");
window.popover().actionSheet().buttons()["Save Note"].tap();
UIALogger.logPass("StickNoteSaveEnd");
First of all, check correct hierarchy.
Then, try to use
"app.popover().actionSheet().buttons()["Save Note"].tap();"
If it does not work for you, please give some details regarding elements structure/buttons.
I think there is a bug in action sheet access from javascript. You can see my answer to a similar question here.
Bascially I think actionSheet() always returns nil to buttons and elements. It's not supposed to, but everything I've seen suggests otherwise.
MikhailV worked out a function to tap the correct button here.
I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().
In my Firefox extension, I create a popup menu dynamically. Originally, I used this line on each menu item:
menuFunc.setAttribute("oncommand","MainExtension.MyPlugin." + functionName + "();");
where functionName is a string with the name of the function to be called for that menu item. This worked fine. When I uploaded my extension to the Mozilla Addons page, the automated code validation program flagged this line and said that using setAttribute to set oncommand in this way was not secure and that addEventListener should be used instead. I switched to this syntax:
menuFunc.addEventListener("oncommand",function() {MainExtension.MyPlugin[functionName]},false);
but now nothing happens when I click on a menu item.
Is my syntax off or is there something else wrong? I don't think the problem is the common 'this' reference error. I tried removing all uses of 'this' from one of the functions and it still did not work. It seems like the functions are not being called at all. No errors are being generated either.
Update:
The command action is attached using just command, not oncommand:
menuFunc.addEventListener("command", MainExtension.MyPlugin[functionName], false);
You should be able to just do:
menuFunc.oncommand = MainExtension.MyPlugin[functionName];
Just a guess: Does it help to use true instead of false as the third parameter in order to capture the event?