Ho would I go about writing the following function in native Javascript?
this.pwdInput.on("keyup change onpaste", function() {
let pwdInputVal = $(this).val();
self.createTests(pwdInputVal);
})
You can try somethind like:
document.getElementById('pwdInput').addEventListener('change', (e) => {
let pwdInputVal = e.target.value;
// ...
});
Here I've created handler for change event, you need to do the same for the rest events.
Related
I have a few links. When I hover mouse over the links I would like to get the values stored in data attributes. I need to pick the t values and pass them into function
HTML
<a href="#" data-lat="23.333452" data-lon="-97.2234234">
JS
var loc = document.querySelectorAll("a[data-lat]");
loc.addEventListener("mouseover", locOver);
loc.addEventListener("mouseout", locOut);
function locOver() {
// do something
}
function locOut() {
// do something else
}
It's been a while since I used vanilla JS and it's been a long day so I'm sure it's pretty close but I'm stuck. I keep getting:
Uncaught TypeError: loc.addEventListener is not a function
What am I missing here?
You need to loop through the nodes that you obtained with document.querySelectorAll("a[data-lat]") for adding events.
Working example.
Node
<script>
var loc = document.querySelectorAll("a[data-lat]");
loc.forEach(node => {
node.addEventListener("mouseover", locOver);
node.addEventListener("mouseout", locOut);
})
function locOver(event) {
// do something
console.log('mouseover', event.target.dataset)
}
function locOut() {
// do something
console.log('locOut')
}
</script>
const loc = document.querySelector("a[data-lat]");
const locOver = () => {
console.log("Mouse is over the link");
}
const locOut = () => {
console.log("Mouse is out of the link");
}
loc.addEventListener("mouseover", locOver);
loc.addEventListener("mouseout", locOut);
Link
Explanation:
I target the link using .querySelector method that returns a single node.
After that i created two event handler for mouseOver and mouseOut and than i added the eventListener to the link.
First I want to apologize, because I am a bit newbie with JS and it's library jQuery. Basically I have written a javascript function that toggles my hamburger menu:
const menuToggle = document.querySelector('.menu-toggle');
let menuOpen = false;
menuToggle.addEventListener('click', () => {
if(!menuOpen) {
menuToggle.classList.add('open');
menuOpen = true;
} else {
menuToggle.classList.remove('open');
menuOpen = false;
}
});
Now I want to rewrite this jQuery function to Vanilla JS
$(function() {
$('.toggle').on('click', function() {
$('.inner-wrapper').toggleClass('open');
});
});
I tried this, but it is not working:
var searchElement = document.createElement(".inner-wrapper");
document.querySelector(".toggle").appendChild(searchElement);
searchElement.addEventListener("open", handleClick);
I would like to combine both functions if possible. Thanks in advance!
First, this code of yours:
menuToggle.addEventListener('click', () => {
if(!menuOpen) {
menuToggle.classList.add('open');
menuOpen = true;
} else {
menuToggle.classList.remove('open');
menuOpen = false;
}
});
can be simplified to this:
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('open');
menuOpen = !menuOpen;
});
Second, the equivalent vanilla JavaScript version of this:
$(function() {
$('.toggle').on('click', function() {
$('.inner-wrapper').toggleClass('open');
});
});
is this:
document.querySelector('.toggle').addEventListener('click', function () {
document.querySelector('.inner-wrapper').classList.toggle('open');
});
Finally, this code of yours has problems:
var searchElement = document.createElement(".inner-wrapper");
document.querySelector(".toggle").appendChild(searchElement);
searchElement.addEventListener("open", handleClick);
There is no HTML element called ".inner-wrapper". You probably wanted to create an element with that class, something like this:
var searchElement = document.createElement("div"); // or any valid tag name
searchElement.className = 'inner-wrapper';
Also, there's no event called "open". You probably want that to be "click", and you probably want to target that to the ".toggle" element (not the '.inner-wrapper' element).
Try this,
searchElement.addEventListener("click", handleClick);
And your current code will add a event listener to inner-wrapper class instead of toggle class.
The javascript representation of your jQuery code has to be something like this
document.querySelector('.toggle').addEventListener('click', function(){
document.querySelector('.inner-wrapper').classList.toggle('open');
})
I am working on jstree checkbox plugin and I want to get the checked and unchecked state of the checkbox items. The changed.jstree event is not working in the _setEvents() method. But it is working fine when I add the event inside of _setTree() method. I need to get the event trigger in _setEvents() method.
This is the code I am using:
export default class Test {
constructor(container) {
this._tab = null;
this._container = container;
this._setEvents();
}
get tab() {
return this._tab;
}
show(data) {
this._data = data;
this._setTree();
return this;
}
_setEvents() {
const self = this;
$(document)
.on('click', '#js-image-container', () => {
$('#js-image-uploader').trigger('click');
});
$('#js-categories-container').on('changed.jstree', () => this._handleSelection());//this wont work
return this;
}
_setTree() {
$('#js-categories-container').jstree(jsonTreeGenerator.generate(this._data.categories));
$('#js-categories-container').on('changed.jstree', () => this._handleSelection()); //this will work
return this;
}
_handleSelection() {
alert(1);
}
}
Since you are adding the js-categories-container element dynamically, I believe it is not there yet at the time when you bind an event to it. So you have to delegate event handling, e.g. same way as you do for the js-image-container element. Check demo - Fiddle Demo:
$(document).on('click', '#js-image-container',
() => { $('#js-image-uploader').trigger('click'); }
);
$(document).on("click", '#js-categories-container',
() => {
// get the node if you need it
var node = $('#js-categories-container').jstree().get_node(event.target);
// do something
this._handleSelection();
}
);
I have a component with a form where the onSubmit handler is set to this.props.onSubmit.
I'm trying to add some extra functionality to this form, I want it to submit after a pause (1000ms).
I can't seem to submit the form with jquery $inputQuery.trigger('submit') if I just call .onSubmit() the handler won't have the event.
componentDidMount: function () {
console.log('hi')
var _this = this
var dn = React.findDOMNode(this.refs.inputQuery)
var $inputQuery = $(dn)
$inputQuery.on('keyup', function () {
console.log('bo')
delay(function () {
console.log('boook')
// $inputQuery.trigger('submit') // doesn't work
// $inputQuery.submit() // doesn't work
_this.props.onSubmit()
}, 1000)
})
},
How can I trigger a onSubmit event on a specific ref with react?
From this github issue I learned that:
...jQuery doesn't trigger a real DOM event, but tries to find callbacks in its own internal event map...
— bloodyowl
To simulate / trigger an event use React.addons.TestUtils.Simulate which methods like .click() and .submit() and are supplied a node.
Which changes componentDidMount to this:
function () {
var time = this.props.fireSubmitOnEntry
if (this.props.fireSubmitOnEntry) {
var inputNode = React.findDOMNode(this.refs.inputQuery)
var formNode = React.findDOMNode(this.refs.form)
var $input = $(inputNode)
$input.on('keyup', function (e) {
var code = e.which
if (code === 13) return false
delay(function () {
React.addons.TestUtils.Simulate.submit(formNode)
}, time)
})
}
}
Just remember to use var React = require('react/addons') with npm to access TestUtils.
I have a problem with button click does not firing when it dynamically created,
I know, here is the solution.
Question is this:
I am using SignalR. I must declare click event (to call some hub method) when chat hub is started. Please see below
button click works in this situation
$(document).on('click', "#chatlist li .gobtn", function (e) {
var id = $(this).closest("li").data("message-id");
});
But i should call it from here
$.connection.hub.start().done(function () {
//button click not fires here but it must be here
$('#chatlist li .gobtn').click(function () {
var id = $(this).closest("li").data("message-id");
chat.server.sendAnswer(id);
})
})
Please help if you have any idea to solve it.
If you change your code like below, i think it works
var chat;
var _sendAnswer;
$(function () {
var chat = $.connection.chatHub;
$.connection.hub.start().done(function () {
_sendAnswer = function sendAnswer(id) {
chat.server.sendAnswer(id);
}
});
$(document).on('click', "#chatlist li .gobtn", function (e) {
var id = $(this).closest("li").data("message-id");
if (_sendAnswer != undefined && typeof _sendAnswer == 'function') {
_sendAnswer(id);
}
});
});
I wish you good luck