Develop Reference

Call a onkeyup function when click on other button jQuery

I have function which has keyup event on input field which is working fine.
I want to trigger this function also upon click on other button.
Here is my function
function validateChild(el) {
var validated = {};
console.log('Remove button clicked');
var dateOfBirthField = $(el).find('.date_of_birth');
$(dateOfBirthField).on("keyup", function () {
var dateOfBirthValue = $(el).find('.date_of_birth').val();
console.log('Check DoB');
if(validateDateOfBirth(dateOfBirthValue, dateOfBirthField)){
console.log('True');
validated.dateOfBirth = true;
} else {
validated.dateOfBirth = false;
}
validateButton(validated);
});
}
I'm calling this function on document load
function validateForms() {
$(document).find(".child-form").each(function () {
validateChild(this);
});
}
Here i have click event
.on('click', '.removeButton', function (event) {
validateForms();
});
When i click on this remove button it trigger but stop working after this
console.log('Remove button clicked');
How can i trigger keyup event also on this remove button, or there is better way to do this in javascript.
Can anyone help me with this?
Thanks

I have reviewed your three code blocks. Please try following three code blocks respectively.
Your function
function validateChild(dateOfBirthField) {
var validated = {};
var dateOfBirthValue = $(dateOfBirthField).val();
console.log('Check DoB');
if(validateDateOfBirth(dateOfBirthValue, dateOfBirthField)){
console.log('True');
validated.dateOfBirth = true;
} else {
validated.dateOfBirth = false;
}
validateButton(validated);
}
Call this function on document load
function validateForms() {
$('.child-form').on('keyup', '.date_of_birth', function() {
validateChild(this);
});
}
Click event
.on('click', '.removeButton', function() {
console.log('Remove button clicked');
$('.child-form .date_of_birth').each(function() {
validateChild(this);
});
});

Prevent beforeunload function from executing if submit button is clicked

I have the following function that gives a warning to the user if they are exiting the page when the $('.article_div textarea') form field is populated.
$(window).on('beforeunload', function(event) {
var unsaved = "Are you sure you want to exit?";
var text = $('.article_div textarea').val();
if (text.length > 0){
return unsaved;
}
});
However, I would like to prevent this popup from executing when they click the submit button to the actual form.
How can I ammend the function to account for this? The element of the submit button is
$('button.submit_post').

You can create a boolean which gets positive when you click on submit Or remove the event of unload when clicked. The code will be as follows:
var isSubmitClicked = false;
$('button .submit_post').on("click",onClick);
function onClick(e){
isSubmitClicked = true;
}
$(window).on('beforeunload', function(event) {
if(isSubmitClicked){
isSubmitClicked = false;
return;
}
// Rest of your method.
}

How about binding a event handler to the submit event instead of the submit button element?
Maybe like this:
var submitted = false;
$('form').on("submit", function() {
submitted = true;
console.log('submitted');
});
$(window).on('beforeunload', function(event) {
if(submitted){
submitted = false;
console.log('aborted because of submit');
return;
}
console.log('rest of code');
// Rest of your method.
});

How to manipulate like button on Facebook web page?

I'm currently building a chrome extension and I'm trying to get it to be able to stop a like on Facebook from going through even after the like button has been clicked. In my content.js, I currently have the code:
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element) {
element.addEventListener('click', function() {
var r = confirm("You clicked like");
if (r == true) {
alert("you clicked OK");
} else {
alert("you clicked Cancel")
}
})
});
As of now, when the like button is clicked, a confirm box pops up but the like does not go through until "OK" or "Cancel" is clicked.
How do I prevent the like action from going through when the 'cancel' button is clicked? Thanks!

Try the following.
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element)
{
element.addEventListener('click', function(e) {
var r = confirm("You clicked like");
if (r == true) {
alert("you clicked OK");
} else {
alert("you clicked Cancel");
e.preventDefault();
}
});
});
For reference : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

You could try replacing the original function with a different function of your own.
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]')[0].onclick =
e => console.log('blablabla!')
document.querySelectorAll('a[data-testid="fb-ufi-likelink"]').forEach(function(element) {
let originalOnClick = element.onclick
element.onclick = null
element.addEventListener('click', function(e) {
console.log('look ma, no hands!')
originalOnClick(e)
})
})
Like
I tested it on Facebook and it works there too.
Obviously you have to adapt this concept to your needs.

You can use event.preventDefault()
Just add the parameter to your listener function
function(event){
...
event.preventDefault();
}

bootstrap dropdown doesn't work as expected

I'm using dropdown functionality of bootstrap and I have this dropdown in container, but in outside I have wrapper, which is reacting on the same event (onclick), so I do
e.stopPropagation();
because I don't want to react on event in wrapper, when I'm clicking dropdown button. Unfortunately, this code also stops my dropdown event. Is it possible to avoid this behaviour and display only dropdown list, without alert?
https://jsfiddle.net/hms5265s/

Here is my solution.
document.querySelector('.container').addEventListener('click', (e) => {
if($(e.target).is("#dropdown")){
alert('work');
}
else{
e.stopPropagation();}
});

If you want your alert to be called on the click event of the wrapper but not the click event of the dropdown iteself you can try something like this
document.querySelector('#wrapper').addEventListener('click', (e) => {
var source = event.target || event.srcElement;
console.log(source.id);
if (source.id !== 'someId') {
// do some stuff
alert("I don't want this alert");
}
// you can stop the even propagation here if you want to.
});
Here is a JSFiddle
If you also don't want to assign an Id for your dropdown you can also check for a class.

here is my solution
Element.prototype.hasClass = function(className){
tClassName = this.className;
return tClassName.match(".*[ ]?"+className+"[ ]?.*") ? true : false;
};
document.querySelector('#wrapper').addEventListener('click', (e) => {
console.log('clicked' + e.target.hasClass('dropdown-toggle'));
if(e.target.hasClass('dropdown-toggle')) return
alert("I don't want this alert");
});
document.querySelector('.dropdown-menu').addEventListener('click', (e) => {
e.stopPropagation();
});
https://jsfiddle.net/hms5265s/6/
updated solution:
Element.prototype.hasClass = function(className){
tClassName = this.className;
return tClassName.match(".*[ ]?"+className+"[ ]?.*") ? true : false;
};
document.querySelector('#wrapper').addEventListener('click', (e) => {
if(e.target.hasClass('dropdown-toggle')) return
alert("I don't want this alert");
});
document.querySelector('.container').addEventListener('click', (e) => {
if(! e.target.hasClass('dropdown-toggle')){
e.stopPropagation();
}
});
https://jsfiddle.net/hms5265s/12/

JQuery blur and hide causing over-firing

I'm using jQuery v1.11.2 and have created a basic JSFiddle here (http://jsfiddle.net/k1g3upbv/). It does not show up very well in JSFiddle because my project also uses twitter Bootstrap. I also rushed through the JSFiddle a bit because I had to remove code to simplify (e.g. removing my AJAX calls)... so please just use the JSFiddle code as a guide.
What should happen :
User enters ID to check
AJAX call is made when focus && ID > 10 or blur && id>10
The AJAX call ends by hiding the input field and displaying a clear button
Upon clicking the clear button, the field re-appears and result and input boxes silently cleared
What does happen :
User enters ID to check
AJAX call is made when focus && ID > 10 or blur && id>10
The AJAX call ends by hiding the input field and displaying a clear button
Upon clicking the clear button, the blur function is called again and a fresh result pulled by AJAX flashes up again a second time.
How can I avoid a conflict between the clear button and blur function ?
<div id="CheckerDiv">ID:
<input type="text" id="CheckerID" />
</div>
<div id="CheckerClearDiv" style="display:none">
</div>
<div id="CheckerResult"></div>
(function (checkweb, $, undefined) {
checkweb.Checker = function (vNumber) {
console.log('ajax fired');
var msgBox = $("#CheckerResult");
var checkerDiv = $("#CheckerDiv");
var checkerClearDiv = $("#CheckerClearDiv");
// do stuff here that returns an ajax
msgBox.html('AJAX RETURN !');
checkerDiv.hide();
checkerClearDiv.show();
setTimeout(function () {
msgBox.text('');
}, 15000);
};
}(window.checkweb = window.checkweb || {}, jQuery));
$(document).ready(function () {
// ID checker
$('#CheckerDiv').on("blur", '#CheckerID', function (e) {
var n = $('#CheckerID').val();
if (n.length > 10) {
console.log('blur fired');
checkweb.Checker(n);
}
$('#CheckerID').val('');
setTimeout(function () {
$("#CheckerResult").text('');
}, 5000);
});
$('#CheckerDiv').on("keyup change", '#CheckerID', function (e) {
var n = $(this).val();
if (n.length > 10) {
console.log('change fired');
checkweb.Checker(n);
}
});
$('#CheckerClearDivButton').on("click", function () {
console.log('button fired');
$('#CheckerID').val('');
$("#CheckerResult").text('');
$("#CheckerClearDiv").hide();
$("#CheckerDiv").show();
});
//
});

add "return false"; as last statement in your clear function.
$('#CheckerClearDivButton').on("click", function () {
console.log('button fired');
$('#CheckerID').val('');
$("#CheckerResult").text('');
$("#CheckerClearDiv").hide();
$("#CheckerDiv").show();
return false; //<----
});