We Keep Coding

calling multiple functions in #keydown vue3 error

I have two functions which I'm trying to call with an inside input tag using #keydown="test(); numOnly();"
and get the error TypeError: Cannot read properties of undefined (reading 'key')
numOnly(event) {
const numPattern = /[\d]/;
const eventVal = event.key;
if (!numPattern.test(eventVal)) {
event.preventDefault();
} else {
return true;
}
},
test() {
console.log('Test function() called');
}
When I remove the test() function it works.

The error should be telling you it's occurring on this line:
var eventVal = event.key;
Cannot read properties of undefined (reading 'key') means the object that 'key' is a property of (event) is undefined. If you console.log(event) right before that line, I'm sure you'd get undefined proving the error message correct. event is a parameter of your method, so the only reason it would be undefined is if nothing is being passed in.
Checking the Vue docs, you pass the original DOM event to a method using the special $event variable. Therefore, this should fix your error:
<input #keydown="test(); numOnly($event);" />

How to avoid the error Expected 1 argument but got 0 on Typescript

This is my JavaScript function
function movements(remove) {
var op = remove ? 'remove' : 'add';
crossvent[op](documentElement, 'selectstart', preventGrabbed); // IE8
crossvent[op](documentElement, 'click', preventGrabbed);
} function move(value) {
And this is how it's called
movements();
You can find reference for in jkanban.js file.
Now I have to change it to Typescript and I got this error on function calling,
Expected 1 arguments, but got 0
How can I resolve this problem in typescript ?

Simply add the question mark to the argument that requires your function, example:
function movements(remove?) {
// ...
}

You need to specify the input for calling movements().
You can set default to the variable using this:
function movements(remove = null) {
so that the function won't break even if you don't give it the input.
You can default it to anything you like though.

Set ReactiveDict() variable inside of custom event function

I try to set a ReactiveDict-variable on a custom event inside of on(), but I get this error: Uncaught TypeError: Cannot read property 'templateDictionary' of null.
The second question is, if it would make sense to define the ReactiveDict() in onRendered?
Template.something.onCreated(function() {
this.templateDictionary = new ReactiveDict();
});
Template.something.onRendered(function() {
anything.on({
'element:mouseover': function(elementView, event){
Template.instance().templateDictionary.set( 'showExtraFields', true );
}
});
});
Template.something.helpers({
anything: function() {
var result = Template.instance().templateDictionary.get( 'showExtraFields' );
console.log(result);
}
});

Put instance reference inside onRendered function. Not inside another function. Scope issue.

I have no idea what anything.on is, but try this:
Template.something.onRendered(function() {
anything.on({
'element:mouseover': (elementView, event) => {
this.templateDictionary.set( 'showExtraFields', true );
}
});
});
Use the ES6, Luke!

Jquery function on object's property via this

I have an object:
var obj = { id: $('#f_view') };
I have a function:
function switchFrom(trigger) {
trigger.id.click(function() {
this.id.toggleClass('class');
});
};
When i run the function:
switchFrom(obj);
I get :
undefined is not a function (evaluating'this.id.toggleClass('class')')
When I refer to the element explicitly, the function works.
$('#f_view').toggleClass('class');
What Am i doing wrong? Thank you for your time.

You need to convert to a jQuery object by wrapping in $(...) like
function switchFrom(trigger) {
trigger.id.click(function() {
$(this).toggleClass('class');
});
}
This is because native javascript objects do not have access to jQuery methods

Pass a parameter to a jquery callback, but use callback externally as well

According to various posts on SO and this groovy example you can pass parameters to a jQuery callback function inside a JSON object like so:
$("myButton").on("click",{foo:"bar"},runStuff);
This works cool, but what if I also need runStuff to work with a normal context? I'm struggling with this:
Lets say my callback is a function that just prints it's parameter:
function printParam(param)
{
console.log(param);
}
and this function should be called normally like this: printParam("Hey!"); but also by an event:
$("body").on("DOMNodeInserted",{foo: "Hey!"},printParam);
I've tried to implement printParam like this:
function printParam(param)
{
param = (event.data.foo) ? event.data.foo : param;
console.log(param);
}
But of course this doesn't work, as event is undefined. What are my options here?

When using the data parameter of .on(), the data isn't passed directy to the callback, but in the data property of the Event object which is passed to the function.
Example:
$("myButton").on("click",{foo:"bar"},runStuff);
function runStuff(event) {
console.log(event.data.foo);
}
So you could call runStuff with:
runStuff({data: {foo:"bar"}});

This should do what you want.
function printParam(param)
{
param = (param.data) ? param.data.foo : param;
console.log(param);
}

Try ths;
function printParam(param)
{
param1 = (param.data.foo) ? param.data.foo : '';
console.log(param1);
}

Messing with it some more, I got this to work:
function printParam(event,data) //function to be called normally and as event callback
{
if (event){
data = (event.data.foo) ? event.data.foo : data;
}
console.log("%O",data);
}
Than printParam() can be invoked this way:
printParam(false,"bar");
Fiddled with it here.