How to get out from event function (onclick event)?
document.onclick = function (event) {
if ( event.target.getAttribute("id") == 'chess') {alert('You miss cell!'); };
if (prevCell != undefined) {
prevCell.classList.remove('red');
}
//....
}
//.....
With the term 'get out', I mean to stop this function and wait for new onclick event.
Just write return statement where you want to stop function.
Example:
document.body.addEventListener("click", function (){
If(flag) return
// Do some other work
Return
})
Return statement immediately stops function execution
Related
I have a jQuery event inside a JavaScript function. I've already read that you cannot access the inner function. However, I would like to know how to adjust my code so that the parent function returns true or false depending on the jQuery function.
function validate() {
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
if (input == "") {
return false;
}
});
if(onclickfunction() == true){
return true;
}
else{
return false
}
}
validate();
Or can you recommend a different approach?
Not sure what this code is supposed to do, because calling validate only creates the event listener without actually executing it. But what you can do is to prevent the default action when you need, which is how validation is usually implemented:
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
yourSecondFunction(input !== "");
});
function yourSecondFunction(inputIsValid) {
// Do your magic here
}
I have this jquery code snippet, if I uncomment the first preventDefault() it will work fine, but I'm trying to invoke the second preventDefault(), but it won't work. See below:
$(document).ready(function () {
$('#btnSubmit').click(function (event) {
if ($('#tracking').val() != "") {
// FIRST preventDefault()
//event.preventDefault();
var url = "/ReceivingLog/CheckTrackingNumber?number=" + $('#tracking').val();
$.get(url, null, function (result) {
if (result == "False") {
// SECOND preventDefault()
event.preventDefault();
}
});
}
});
Why is the second/nested preventDefault not working? How do I get the second preventDefault() to work?
$.get is asynchronous - by the time its response comes back, the outer thread has already finished, and the triggered event has completed normally. You'll have to trigger the event again after the response comes back:
const button = document.querySelector('button');
button.addEventListener('click', clickListener);
let doSubmit = false;
function clickListener(e) {
// If this was triggered by the `$.get`, return immediately, run the event as normal without interruption:
if (doSubmit) {
console.log('redirecting');
return;
}
e.preventDefault();
//$.get(url, ...
setTimeout(() => {
const success = true;
if (success) {
doSubmit = true;
button.click();
}
}, 500);
}
<form>
<button type="submit">click</button>
</form>
I have a click event as follow which works fine:
$('#showmenu').off('click').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
show_menu();
return false;
});
where show_menu is:
function show_menu(e) {
if (!collapseForm.is(':visible')) {
collapseForm.show();
showMenu.removeClass(chevronDown).addClass(checvronUp);
searchAgain.hide();
} else {
collapseForm.hide();
showMenu.removeClass(checvronUp).addClass(checvronDown);
searchAgain.show();
}
}
I would like to be able to do something like that:
$('#showmenu').off('click').on('click', show_menu(e));
Is it possible to pass "e" to the callback function by doing the following?
function show_menu(e) {
e.preventDefault();
e.stopPropagation();
if (!collapseForm.is(':visible')) {
collapseForm.show();
showMenu.removeClass(chevronDown).addClass(checvronUp);
searchAgain.hide();
} else {
collapseForm.hide();
showMenu.removeClass(checvronUp).addClass(chevronDown);
searchAgain.show();
}
return false;
}
The event object is passed to the function when the function is called (by the event firing).
You have to pass the function to the on method.
$('#showmenu').off('click').on('click', show_menu);
I have Jquery click event and i want to prevent multiple click before executing my function UpdateItemStatus(this.id);, so i have tried below code using on/off event,
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
$(this).off(e);
UpdateItemStatus(this.id);
$(this).on(e);
}
});
but how do i turn .on? as it's not working, not able to click again.
How about having a global variable which decides the button click action?
Something like this?
var clickevent = true;
$('#tableItems').on('click', 'tr', function (e) {
if(clickevent){
if ($(e.target).closest("td").hasClass("cssClick")) {
clickevent = false;
UpdateItemStatus(this.id);
clickevent = true;
}
}
});
if UpdateItemStatus function has ajax then i recommend you to put clickevent = true inside success of that ajax
You don't need to use off() for your code. Use return false:
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
return false;
} else{
//do stuff here
}
});
I would probably use something like this :
var inputstate = false;
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
if(!inputstate){
inputstate = true;
setTimeout((function(element){
return function(){
UpdateItemStatus(element);
inputstate = false;
};
})(this),50);
}
}
});
the setTimeout used to "defer the call" of your UpdateItemStatus function.
Because if this listener is fired, (an other listener cannot be fired at the same time) the value of the boolean will change to the end state before that the next click will be handled
Seems like your UpdateItemStatus() uses some asynchronous call (ajax?), so here's how i would do it:
$('#tableItems').on('click', 'tr', function (e) {
var $td = $(e.target).closest("td");
if ($td.hasClass("cssClick")) {
$td.toggleClass("cssClick");
UpdateItemStatus(this.id).done(function(){
$td.toggleClass("cssClick");
});
}
});
and in UpdateItemStatus:
function UpdateItemStatus(id){
//do stuff
return $.ajax(...);
}
I have below javascript code for window.onbeforeunload. I am calling code behind button click method when pressed browser back button.
Now the problem is cursor is not stopping until $("#buttonclientid").click() completes. Just calling the method and moving to next statement. How to hold or stop cursor until $("#buttonclientid").click() complete and then move to next step?
var form_has_been_modified = 0;
$(function () {
$("input").keyup(function () {
form_has_been_modified = 1;
})
window.onbeforeunload = function (e) {
if (!form_has_been_modified) {
return;
}
doYouWantTo();
}
});
function doYouWantTo(){
doIt=confirm('Do you want to save the data before leave the page?');
if (doIt) {
var returnbutton;
//cursor should stop here until click function completes.
returnbutton = $("#buttonclientid").click();
}
else{
}
}
I believe your problem lies in the fact that your doYouWantTo function does not return a value to be passed back into onbeforeunload so it is leaving the page while also running the function, rather than waiting until it completes.
Your best action here would be something like:
return doYouWantTo()
....
if(doIt) {
$('#buttonclientid').click(function() { // unsure if you can attach callback to click but idea is same
return true;
});
} else {
return true;
}
When binding an event handler to the onbeforeunload event, it should return one of two things:
if you want a confirm to show, your handler should return a string
if you don't want a confirm to show (skip the handler), return undefined (or don't return at all, same effect)
That being said, your code should look something like this:
var form_has_been_modified = false;
$("input").keyup(function () {
form_has_been_modified = true; // use a boolean :P
});
window.onbeforeunload = function (e) {
if (form_has_been_modified) {
return 'Do you want to save the data before leave the page?';
} else {
return undefined; // this can be omitted if you prefer
}
};
The only way to tell what a user clicked on the system dialog is to use setTimeout. See this question for details on that subject.