return from parent function after click - javascript

I looked all around, but couldn't find any help with this problem.
So I have this if that is calling a function. In that I am waiting for a button press to happen. The button, therefore, should return true or false, but it's only returning to its anon-function running inside the click event and I don't know how to return from its parent function.
if ( saveConfirm() ) {
saveFunction()
}
function saveConfirm () {
$('#confirm').click(function() {
$('modal').modal('hide')
return true
})
$('#abort').click(function() {
$('modal').modal('hide')
return false
})
}
Hope you guys understand what i mean and maybe someone can help me with how to return from the call to the if through the button that is pressed.

Click handlers execute asynchronously, you should move saveFunction call to confirm click handler. There is no way for saveConfirm return boolean value you are trying to return in click handler.
$('#confirm').click(function() {
$('modal').modal('hide');
saveFunction();
})
$('#abort').click(function() {
$('modal').modal('hide');
})

You bind events in saveConfirm(). Try code below
$('#confirm').click(function() {
$('modal').modal('hide');
saveFunction();
})
$('#abort').click(function() {
$('modal').modal('hide');
})

Related

$locationChangeStart doesn't call but it called earlier

I would be want to call preventDefault event when someone change state.
$scope.$on('$locationChangeStart', (e) => {
if (!$window.confirm("Are you sure leave this page?")) {
e.preventDefault();
}
});
It doesn't work when i try to leave page.
It works if i use $rootScope.
When i use $rootScope.$on event.preventDefault doesn't work.
How can i fix it?
Thanks
you need to add a transition hook inside a run block:
run(function($transitions) {
$transitions.onBefore({}, function() {
function confirmDialog(msg) {
return new Promise(function(resolve, reject) {
let confirmed = window.confirm(msg);
return confirmed ? resolve(true) : reject(false);
});
}
})
});
for more info take a look at these links:
https://ui-router.github.io/guide/transitionhooks#promises
http://vancelucas.com/blog/using-window-confirm-as-a-promise/

jquery if clicked multiple times

This is just a small piece of code of my function. The function is by default false, when you click on the #my-button the function will be true and run.
But now I want that when you click on the same button again, the function will be false again and should stop working.
And that should he be doing every time you click the button (it would be great if this is also possible with classes instead of the id)
$('#my-button').toggle(function () {
sliderPaused = true;
}, function () {
sliderPaused = false;
});
I use a toggle function, only this does not work for me. Is there something wrong at my code?
$('#my-button').click(function () {
if (sliderPaused) sliderPaused = false;
else sliderPaused = true;
});

How to check if an element is not clickable with Protractor?

It's trivial to test if an element is clickable with Protractor, but I'm stuck scratching my head trying to figure out how to check if an element is not clickable.
I've attempted to wrap the click function in a try/catch so that when an error is thrown when trying to click it should catch it and let the test pass; however, this does not work.
Here is my code for the method that does the check:
return this.shouldSeeDisabledFunds()
.then(function() {
var clickable = true;
try {
fundsElem.first().click();
} catch (e) {
clickable = false;
console.log(clickable);
} finally {
console.log(clickable);
}
console.log(clickable);
// All the way through, clickable is still true, and the console log in the
// catch is not called. I believe this is because click is asynchronous.
})
;
I have found a solution that works for this. As click() returns a promise you can simply .then off of it and throw in the successful click handler and override the catch handler to do nothing which makes the test pass if the element is not clickable.
return this.shouldSeeDisabledFunds()
.then(function() {
fundsElem.first().click()
.then(
function() {
throw "Can click Funds element that should be disabled";
},
function() {}
)
;
})
;
Maybe not applicable in your case, but a better way to check if an element is clickable is checking if it is both visible and enabled: elem.isDisplayed() and elem.isEnabled(). This way you don't accidentally click on buttons when you're not supposed to.
Fyi, there will be a library coming to help with cases like this: https://github.com/angular/protractor/pull/1703
There are actually two methods to check it.
1) Using ExpectedConditions
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to not be clickable.
browser.wait(EC.not(EC.elementToBeClickable($('#abc'))), 5000);
If found to be clickable, it will return error.
2) Using protractor's isEnabled, isDisplayed and isPresent
So as far as my understanding goes, you can create isNotClickable, which will return false only if element is present, displayed or enabled and true otherwise:
function isNotClickable(element) {
return element.isPresent().then((isPresent) => {
if (isPresent) {
return element.isDisplayed().then((isDisplayed) => {
if (isDisplayed) {
return !element.isEnabled();
}
return true;
});
}
return true;
});
}
To verify Clickable : element.isDisplayed().toBe(true)
Not Clickable : element.isDisplayed().toBe(false)
Worked for me.

stopPropagation function reading not defined

I have a page with a lot of e.stopPropagation so what I decided I would do was to create a function. here is code
function stopProp(name) {
if($(e.target).hasClass(name)) {
e.stopPropagation();
}
}
Though each time in console it does not seem to work at all and says stopProp is undefined.
Here is the actual JS I am trying to turn into a function
$('#chatting').on('click','.chatheader',function(e){
if($(e.target).hasClass('setting')) {
e.stopPropagation();
}
}
});
Anyone can help me to figure out why this is not working and how I should go about this? I figured it would be fairly easy just to change to a function so I can easily write stopProp('setting');though that is not the case here.
The handler of the click event should return with one single argument which will be the event. So you should have a function that returns an event, for example like this :
$('#chatting').on('click','.chatheader',stopProp('setting'));
function stopProp(name) {
return function(e) {
if($(e.target).hasClass(name)) {
e.stopPropagation();
}
}
}
You need to pass the event object to the stopProp method.
function stopProp(e) {
if($(e.target).hasClass(e.data.className)) {
e.stopPropagation();
}
}
Then
$('#chatting').on('click', '.chatheader', {className: 'setting'}, stopProp);
Demo: Fiddle

Javascript Alertify with return from confirm

I'm trying to use alertify.js as a confirmation dialog for all my confirm scripts. But it just isn't working like regular JS confirm does. In the code below I never get a return true
function aConf ( mes ) {
alertify.confirm( mes, function (e) {
return e;
});
}
Delete
Of course if I replace aConf with JS' confirm it works. So why is alertify not sending me back it's outcome?
Because confirm is a blocking function (no javascript will run until it returns true/false), and alertify is non-blocking (JS keeps executing). Alertify does not immediately return a true/false, but instead, it probably returns undefined immediately, then it calls a callback function later, after the user clicks OK or Cancel. The return value from that callback function has no effect in your example, because the onclick code has already finished running (because it is non-blocking).
Assuming you are using this: https://github.com/fabien-d/alertify.js/
This is how it actually works with a callback function, not a return value:
alertify.confirm( message, function (e) {
if (e) {
//after clicking OK
} else {
//after clicking Cancel
}
});
For your code sample, you might try something like this:
function performDelete ( a_element ) {
// perform your delete here
// a_element is the <a> tag that was clicked
}
function confirmAction ( a_element, message, action ) {
alertify.confirm(message, function(e) {
if (e) {
// a_element is the <a> tag that was clicked
if (action) {
action(a_element);
}
}
});
}
Delete
EDIT: updated to be a generic confirm dialog that calls a callback function if the user clicks ok.

Categories

Resources