We Keep Coding

How to switch between different window.locations depending on answer to window confirm() method

I have a page that presents a test, where javascript sets a timeOut to abandon the page if the user waits too much (180") before giving an answer and pressing submit.
It has to be done for various reasons, and I cannot modify the committment.
After 180" on the page, so, currently the code goes back to a beginningpage.php where the user will have to re-enter its unique ID to continue the test.
This is the simple javascript code:
setTimeout(function () {
window.location.href= "beginningpage.php";
}, 180000);
Everything runs smooth. Now I need to modify the code to better manage the case. We assume that if the user has gone away, it will not be able to answer to an alert box. So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
Otherwise, if the user is still at his desk and is simply wondering about the answer to give, he must be given the possibility to click "ok, I hurry up" to remain on the page for say another 60". That means that after the first displaying of the confirm window, the timeout must be set to a different deadline, not 180000 as before but 60000.
Maybe the idea of using different window.locations.href is not the right one.
How could be the code to accomplish everything I need as above explained?

Just don't use a confirm box... Show a div with two buttons after 180 seconds and then start counting your 30 seconds.

So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
You can't. confirm, alert, and promopt are 1990s holdovers with stop-the-world behavior. (Mostly. Browsers are eroding that slowly over time.) That means none of your JavaScript code can run while the archaic window is showing.
Instead, switch to using modern alerting techniques (showing a "modal" div, etc.) so that your JavaScript code can use setTimeout to give up after the relevant amount of time.

You can never achieve this with alert or confirm because they block further js execution till the popup is active.
You need a custom modal with html element and a js function
All you have to do is call clearTimer for auto-page reload based on the response from custom confirm modal.
var x = document.getElementById("stopReloadBtn")
var reloadTimer
setTimeout(function() {
x.style.display = "block"
reloadTimer = setTimeout(function() {
window.location.href = "beginningpage.php"
}, 5000)
}, 5000);
function stopReload(){
clearTimeout(reloadTimer)
x.style.display = "none"
}
<button id="stopReloadBtn" style="display: none" onclick="stopReload()">Still Here?</button>
I have reduced the timers to 5 sec in this code. A button will appear after 5 sec. After which you will have 5 sec to click this button else the page will reload.

Can we remove click event without calling it?

I am having problem in overriding the pagination code given by grid. What I need to do is kind of hack the pagination given by my grid.
We are having a lot of records. So, what we are doing we are loading records to a threshold limit.
So, lets assume the threshold limit is 50 and page size is 10 so there will be 5 pages. So, when user comes to 5th page next button provided by the grid will be disabled.
So, what we need to do we need to make it enable and if user clicks on it I need make ajax call and load another 50 records(threshold limit) in the grid.
After that I need to disable this event so that next time user clicks it should not do the make ajax call and it should work like previously (by going from 1st page to 2nd page and so on)
All the above things mentioned I am able to do. But here problem comes when user goes to 5th page and go back to some other page let say 3 without clicking next button. Now, after going to 3rd page
when user clicks on the next page button it is making ajax call as I have make the button enable when user comes to 5th page and provided a click event to it.
So even if I provide a condition to run only on when grid current page is 5 then also it is running because after going to 5th page I will make button enable and bind and event. So, as I provided the event it will run without even specifying the condition.
How do I make the click event work as default and only when the user is at 5 it will make the ajax call.
This is my code -
///grid Current page will tell us which page we are in the grid.
if(gridCurrentPage==5){
query(".dojoxGridWardButton").forEach(function(element) {
query(".dojoxGridnextPageBtnDisable").replaceClass("dojoxGridnextPageBtn", "dojoxGridnextPageBtnDisable");
query(".dojoxGridlastPageBtnDisable").replaceClass("dojoxGridlastPageBtn", "dojoxGridlastPageBtnDisable");
});
callNextButton(gridCurrentPage)
}
And this is the function.
function callNextButton(gridCurrentPage) {
var target = dojo.query(".dojoxGridnextPageBtn");
var signal = on(target, "click", function(event){ ///Adding click event
if (gridCurrentPage ==5 ) {
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback({
called: true
})
}, 2000);
if (checking some conditions) {
////////doing Ajax call
deferred.then(function() {
//calling a callback
})
},
error: function(e) {}
};
})
signal.remove(); //Removing click event
}
Note : My grid is enhanced grid which is part of dojo toolkit. But probably its a design issue so, any comments/advices are welcome.
I really need an advice here. Please anyone can find the problem where it is it will be reqlly helpful.

Invisible reCAPTCHA callback on fail or exit

The Invisible reCAPTCHA lets you easily set a callback upon successful verification:
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='successfulVerification()'>Submit</button>
But it doesn't appear to have any option to trigger a callback if the modal for further verification is closed (or the reCAPTCHA is unable to verify that you're a human - actually not sure if this ever happens, maybe it just keeps showing you new challanges forever?)
The reason why this is important is say we have a loading spinner or some kind of visual cue to show the user that we're working on the submission. If the reCAPTCHA is unable to automatically determine that the user is indeed human, the modal will be shown - now if the user completes it successfully then that's fine - but if he/she exits it, the loading spinner will still be visible as it doesn't know that the reCAPTCHA failed/user exited it.
One workaround is to only show the loading spinner after the reCAPTCHA succeeds and the request begins - however this would be a poor experience for the user as there would be a delay between clicking the button and the form "appearing" to be submitted - leaving the user to possibly wonder if the form actually submitted or not.
Any ideas on how to remedy this? Thanks!

I haven't found a solution to this but a hack workaround would be to reenable the submission button after a timeout so at least the user isn't locked out indefinitely if they cancel the recaptcha attempt.
var timeout = setTimeout(function () { enableSubmit(); }, 3000);
grecaptcha.render(elem, {
...
callback: function (token) {
clearTimeout(timeout);
continueWithSubmission();
}
});
grecaptcha.execute();

detecting OK on alert

I used this code:
<script type="text/javascript">
function finish()
{
alert("Inserted!");
}
</script>
I want when the user clicks on "OK" of alert,it goes to another php page.
how can I undersatand when user clicks OK?
and how I can link to another page?In common I use this way:
<button type="submit" onclick="window.open('home.php')"> Insert </button>
but in alert example there is no button!
thanks

alert() is blocking: The browser will stop executing any Javascript code while an alert() is being displayed. The next line of code after the alert() will only be executed when the alert box is cleared.
Therefore, you don't need to do anything special to tell if an alert has been cleared; just put the rest of your code to run after the alert().

There is no result to alert. You can use window.location to redirect.
function finish()
{
alert("Inserted!");
window.location = 'newpage';
}

how can I undersatand when user clicks OK?
alert() is blocking, script execution pauses while it is displayed. When the user clicks OK, the script will continue running. Just put whatever other code you want after the alert statement.
and how I can link to another page?
You can set location to a new URL…
location = "http://example.com/";
… but generally speaking, you would be better off running the function as a click event handler of a regular link.

You can redirect by calling window.location=URL.
Alert is modal, it just gives information and then is dismissed. The script will continue executing after the alert message is dismissed.
If you want to just redirect after the user reads the alert message, you could use:
function finish() {
alert("When you click OK you will go to a new page.");
window.location = "http://www.yoururl.com";
}
On the other hand, Confirm gives the user a question and returns true/false based on the user response. This is probably what you should use instead.
In this case your function could look like this:
function finish() {
var continue = confirm("Finish and go to the next page?");
if (continue) {
window.location = "http://www.yoururl.com";
}
}
With either finish function, just attach it to the button however you want. The most direct way would be like you've done in your question:
<button type="submit" onclick="finish()"> Insert </button>
Note, though, if your button is in a form and you bind with onclick, the form is actually going to be submitted anyway unless you bind to the submit event and prevent it.

Javascript - Reload page after form submit with target="_blank"

I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!

Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}

On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()

Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.