My refactored vanilla JS button click is not working - javascript

I am working in refactoring a jQuery web sdk into a vanilla JavaScript one.
The original jQuery file has a button click like so:
sdk.initialize().then(function() {
$('#loginButton').click(function() {
// more logic in here
});
});
I started my refactor like so:
sdk.initialize().then(() => {
document.querySelector('#loginButton').addEventListener('click', (event) => {
event.preventDefault();
console.log('you clicked me!');
});
});
If the code looks right, then it might be a scope issue, as this is inside of RequireJS like so:
require(['XmSdk', 'XmUIHandler'], (xm, xmui) => {
const sdk = XmSdk();
// the above code resides in here
});
When I click on the button, I get no output and no error.
I even tried this:
sdk.initialize().then(() => {
console.log('initialized!');
}).catch((err) => {
console.log('Failed to initialize');
});
and I get no output and no error.

try with a function instead, not an arrow function on event handler
sdk.initialize().then(() => {
document.querySelector('#loginButton').addEventListener('click', function(event){
event.preventDefault();
console.log('you clicked me!');
});
});

Related

jQuery mouseup() issue

I'm sure this is something simple that I am missing but I'm at a loss.
I have this block of jQuery:
jQuery("span.frm_inline_total").digits();
jQuery(".frm_input_group").on("blur", "input", function () {
jQuery("span.frm_inline_total").digits();
});
jQuery(".frm_range_container input").mouseup(function () {
jQuery("span.frm_inline_total").digits();
console.log("mouse up");
});
jQuery(".frm_range_container input").mousedown(function () {
jQuery("span.frm_inline_total").digits();
console.log("mouse down");
});
That calls a function to place commas in some field numbers. I don't think it's relevant, but here is the function:
jQuery.fn.digits = function () {
return this.each(function () {
jQuery(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
})
}
My issue is this. Everything works except when I try to call digits() using mouseup(). It logs the mouseup() event with 'console.log', and the mousedown() event correctly works, but no mouseup(). ...alert("mouse up") works, just not 'digits'.
For what it's worth, I'm placing this event on a built-in slider in a drag-and-drop website I am editing. My "development" is limited to client side code. There is already an event on it to retrieve the new values that I thought might be interfering, but then I don't understand why it would fire logs or alerts.
Assuming your HTML structure is something like this:
<div class="frm_range_container">
<div class="frm_input_group">
<span class="frm_inline_total">Value to replace</span>
<input value="Click me"></input>
</div>
</div>
and the rest of your code works, changing the code like below should produce desired output.
// added logs to check in console, digits function is the same
$.fn.digits = function () {
console.log('digits'); // test to see if reaches digits() function
return this.each(function () {
// this should be the correct element.
$(this).text(
$(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
);
})
}
$(".frm_range_container input").on('mouseup mousedown', function (e) {
console.log(e.type);
$("span.frm_inline_total").digits();
});
If you want to only target span.frm_inline_total contained in each frm_range_container, you can use $("span.frm_inline_total", this).digits(); for that

How do I add a custom event listener and get all elements that apply it?

I want my own event listener. At the moment I have the following code (just a wrapper for the scroll event without functionality yet...):
function onScrollStopped(element, callback, timeout = 48) {
element.addEventListener("scroll", (e) => {
callback();
});
}
I currently register my 'event' with the following:
onScrollStop(element, () => {
alert("hi");
});
But I would like to register it this way:
element.addEventListener("scrollstop", () => {
alert("hi");
});
I've started writing an even with the following code:
const event = new Event("scrollstop", { bubbles: true});
<element??>.addEventListener("scroll", (e) => {
<element??>.dispatchEvent(event);
});
Now how would I know what to fill in at the part with <element??>. I want to be able to register this event to every dom node not just window, document or body... How would I do this?

How to identify the input in which the key was pressed in JS code

I use the following jQuery code to process keys which are pressed in various input tags:
$(document).ready( function () {
$("input").keydown(function (e) {processKeys(e);});
...
It works great...
In a separate Javascript file I have a function which receives the event call:
function processKeys(e) {
key=e.which;
if (key==27) {
$("#searchCDB").hide();
}
}
So, is there a way for me to identify the <input> tag which caused the event at the event layer... What I mean is here, in some way like:
$("input").keydown(function (e) {processKeys($("#this"),e);});
I know my attempt is absurd, but any suggestion that works will be appreciated.
DK
You can pass in this to your processKeys function:
$(document).ready( function () {
$("input").keydown(function (e) {
processKeys(e, this);
});
});
function processKeys(e, obj) {
console.log(obj.id); //logs ID of keypressed input
key=e.which;
if (key==27) {
$("#searchCDB").hide();
}
}
Demo: http://jsfiddle.net/uE7ZD/

Function becomes undefined after first trigger

I have a block of code like so:
function doSomething() {
someVar.on("event_name", function() {
$('#elementId').click(function(e) {
doSomething();
});
});
}
// and on document ready
$(function () {
$('#anotherElemId').click(function () {
doSomething();
});
});
The problem that I'm encountering is that when I call doSomething() from anotherElemId click event(that is binded on document ready) it works as expected, but calling it recursively from elementId click doesn't work.
Any ideas? Thinking is something trivial that I'm missing.
Is someVar an actual jQuery reference to a dom element? (e.g. $('#someitem'))
The second problem is you cant put a .click event inside a function that you would like to instantiate later on. If you are trying to only allow #elementId to have a click event AFTER some previous event, try testing if a tester variable is true:
var activated = false;
$(function () {
$('#anotherElemId').click(function () {
activated = true;
});
$('#secondElemId').on("event_name", function() {
if (activated) {
// code that happens only after #anotherElemId was clicked.
}
});
});

Making my mouseevent coded in jquery a lot more elegant

I wrote this in order to fix the problem IE has with select drop down lists being truncated if their options were longer than the default value of the select. Now it works fine but I want to improve the code in order to learn how to write things in a much more useable fashion.
$(document).ready(function() {
if ($.browser.msie) {
$('select').focus(function() { $(this).addClass('expand').removeClass('clicked'); })
$('select').blur(function() { $(this).removeClass('expand clicked'); })
$('select').mousedown(function () { $(this).addClass('expand').removeClass('clicked'); } )
$('select').hover(function () { }, function () {if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); $(this.blur()) }})
$('select').click (function() { $(this).toggleClass('clicked'); })
$('select').change(function(){ $(this).removeClass('expand clicked'); $('select.widerIE').blur() })
}
});
I tried making functions which were called by each event but that seemed to fail eg:
$('select').click(test (a))
function test (a) {
$(a).addClass('expand').removeClass('clicked')
}
It's not clear to me what you're trying to achive. One thing is sure - you can't define a event handler like that (see note below):
$('select').click(test (a))
Note: Technically, you could define your event handler like in code above. For that to work, function test would have to return a function that would be actual handler for the event.

Categories

Resources