I am creating an internal web based application that will not be the target audience of the web.
I understand the frustration of alert boxes and forcing people to do certain things.
With that said, what I am attempting to do is create a javascript function, that unless a user clicks a link on a specific page, if they try to navigate away from the page other than using a link on the page, I would like to alert them and say, sorry you need to click the appropriate link to exit.
What my issue is, is that I need to lock out fields, and what I can do when a user hits an edit page, im going to write to a table that user to the lockoutuser colum. If a value exist, that user can access the record if it is null, it means no one is editing the record. If someone clicks to go into that record they lock it out, my means of updating the lockoutuser colum could be ajaxy on unload of the page, but the page could be unloaded for 2 reasons, 1 the edit form is submitted or the user leaves the page.
An alert that would say, sorry you can leave this record without clicking the big red button that says unlock, and force the user without refreshing to stay on the page.
I understand the machine could crash and or an alt f4 or a brute end task on the browser will still leave me other work to unlock the record
You need to use the onunload event of the page to present a messagebox when the user tries to leave your page. Check out this example: http://www.codetoad.com/javascript/miscellaneous/onunload_event_eg.asp
Related
I am using Django for backend, and normal HTML/CSS/JavaScript for frontend without any interactive UI libraries like React.
Current Approach:
I have a page that contains a form to edit instance X as an example. If someone opens this page for editing, I am adding a value in my database that this instance is locked by this editor. After he finalizes editing, he should press "save" or "close" button to unlock it for others.
Problem:
If the editor didn't save and forgot to "close", the instance will remain locked till he come back and close it.
Required Approach:
But, I want to dynamically prevent the others to open it because someone is actively editing X now. By "actively" word, I mean that this user is using the page now, and the page tab is active in his browser. So, if he just closes the tab or browser, or leaves the tab inactive for maybe 5 minutes, I want to unlock the instance for editing.
I have to set the flag (isOpen = 0) when user is leaving the site while clicking the 'Leave' button. Is there a direct way to catch the Leave button click event?
Edited:
We are developing a process flow diagram application. One diagram can access by multiple users in the same group, in that case, if one user open the diagram for edit purpose then system should not allow to edit for another user. So we have set flag isOpen =1 when open the diagram, once closed (customized close button from the page) we set isOpen=0. These scenarios are working fine except user is closing the browser window.
Browser closing scenario:
Please refer the top image. If user close the tab then browser will ask to confirm the action., in that case user
1) User shall leave
2) User shall cancel and stay the page
I cannot set isOpen=0 for window.onbeforeunload() event because if user shall cancel and stay the same page. So we need to catch the Leave/Cancel user actions to set the flag.
Please suggest me an alternate solution if it is not possible to catch leave/cancel user actions.
What you want to achieve is not possible using this logic, the reason is that when a browser tab is closed, all JS execution stops (quite logically since the tab was closed).
Al alternative way to do this is to solve the problem differently. Every couple of seconds (or minutes, depending on your use case) you can send a fetch/ajax request as an "I'm connected" flag. When a user stops sending such a flag it means they closed the tab or it became inactive. If the user reopens it, you will start receiving that user's flag again.
This can be solved more elegantly using WebSockets, which does exactly what I outlined above out of the box. You just need to keep track of your users by their "flag", be it an ID, cookie, etc.
I have site which contains many links. User can open links in new window. User can log out from one window. If they do so and click on the other window of my site then I want to give an alert to the user saying that "Please login to continue". My questions are:-
Is this possible in Drupal 7?
Is there any extra module to support this.
If there is no contributed module available for this then my idea is to register a click event on the page(document) inside JQuery which will always check if user is authenticated or not. I want to know that which function in Drupal will help me in understanding authenticated user of site in JQuery.
Please share if any other option available to achieve this goal.
This is not an easy task, but I am going to explain how I would do so (without too many details):
Create a web service which receives a cookie and returns whether it represents a live session or not.
Use the visibility change javascript event to detect when a user leaves the browser or comes back in. When you notice the user has come back to the browser, perform an AJAX call to the server you set up in step one. You should provide the cookie stored in the browser, and expect a boolean answer.
Depending on the response given by the server, display a modal dialog with Javascript showing a login form orwhatever you consider necessary.
Note: This method will only work if the user is using a browser supporting visibility change events, and can be bypassed disabling Javascript code execution. In addition, the user will still be able to see the content if the browser is not the focused window (for example, there are two opened windows, each of them covering one half of the screen. The event will not fire until the focus comes back to the "forbidden" window).
Ok so this is a general question about browser interaction and HTTP mechanims
Here is the scenario
There is a very rich interface with a lot of buttons.
The user clicks the button "generate the report"
Then there is a loading time of approximately 15 seconds and then the "save file" dialogue box appears
The user saves the files wherever he wishes and do further stuff.
Now I want to:
Prevent him from interacting with the interface during step 3.
At the end of step 3, trigger some specific javascript like showing a popup.
All this actually sums up to "how to detect the appearance of the download dialog box in javascript" because once this one is solved, this is easy to set up some mask during the file generation, and to do whatever is required once the event has been detected.
Unfortunately it seems like there is no way to launch a file download via Ajax because it lacks adequate handling for turning an XMLHttpRequest into a save as dialog box. As a consequence you need to submit some form, but the mechanism is a little weird because although you submitted the form absolutely nothing happens in the DOM. Then the browser detects that response to the form submission is an incoming file and shows a download box instead of trying to display the file content, and once the user is done with the download box, the browser somehow manage to restore the interface in its previous state so that the user can keep on browsing (or at least this is how I understand the thing).
Display a loading sign for x seconds, disable click events (see here) or replace them with a dialog saying they should stay quiet while it loads. Do not forget to make the loading sign moving/showing progress or they will get bored. I'm sure there are plenty of libraries to achieve this, you could even try using the <'progress'> tag. As #j3r3m7 said, if they want to close the browser they will; the goal here is to make user understand he has to wait for x seconds and make him eager to wait.
As for your other issue, please look here
EDIT : A helpful plugin to address these kinds of issues can be found here.
Interesting question as in essence you can't stop the user from doing anything really... they could if so inclinded:
close their browser
enter a url directly to go to a new page
click back in the browser
open a new browser window and navigate to the report generation page for a second time
refresh the page
So, if you have a long running process quite a good way to deal with it is:
indicate that the process may take a while
at the point that the report is ready provide a unique link to the generated report
if you are using a javascript framework like AngularJS you could asynchronously handle an event that shows a report download/view link when the report is ready.
Once the user is on my page, I do not want him to refresh the page.
Anytime, the user hits F5 or refresh button on top. He should get an alert saying
You cannot refresh the page.
Also if the user opens a new tab and tries to access the same url in prev tab he should get an alert
You cannot open same page in 2 tabs
Anyway I can do this using JavaScript or jQuery? Point one is really important.
#1 can be implemented via window.onbeforeunload.
For example:
<script type="text/javascript">
window.onbeforeunload = function() {
return "Dude, are you sure you want to leave? Think of the kittens!";
}
</script>
The user will be prompted with the message, and given an option to stay on the page or continue on their way. This is becoming more common. Stack Overflow does this if you try to navigate away from a page while you are typing a post. You can't completely stop the user from reloading, but you can make it sound real scary if they do.
#2 is more or less impossible. Even if you tracked sessions and user logins, you still wouldn't be able to guarantee that you were detecting a second tab correctly. For example, maybe I have one window open, then close it. Now I open a new window. You would likely detect that as a second tab, even though I already closed the first one. Now your user can't access the first window because they closed it, and they can't access the second window because you're denying them.
In fact, my bank's online system tries real hard to do #2, and the situation described above happens all the time. I usually have to wait until the server-side session expires before I can use the banking system again.
You can't prevent the user from refreshing, nor should you really be trying. You should go back to why you need this solution, what's the root problem here?. Start there and find a different way to go about solving the problem. Perhaps is you elaborated on why you think you need to do this it would help in finding such a solution.
Breaking fundamental browser features is never a good idea, over 99.999999999% of the internet works and refreshes with F5, this is an expectation of the user, one you shouldn't break.
Although its not a good idea to disable F5 key you can do it in JQuery as below.
<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };
$(document).ready(function(){
$(document).on("keydown", disableF5);
});
</script>
Hope this will help!
Back in the ole days of CGI we had many forms that would trigger various backend actions. Such as text notifications to groups, print jobs, farming of data, etc.
If the user was on a page that was saying "Please wait... Performing some HUGE job that could take some time.". They were more likely to hit REFRESH and this would be BAD!
WHY? Because it would trigger more slow jobs and eventually bog down the whole thing.
The solution?
Allow them to do their form.
When they submit their form... Start your job and then direct them to another page that tells them to wait.
Where the page in the middle actually held the form data that was needed to start the job.
The WAIT page however contains a javascript history destroy. So they can RELOAD that wait page all they want and it will never trigger the original job to start in the background as that WAIT page only contains the form data needed for the WAIT itself.
Hope that makes sense.
The history destroy function also prevented them from clicking BACK and then refreshing as well.
It was very seamless and worked great for MANY MANY years until the non-profit was wound down.
Example:
FORM ENTRY - Collect all their info and when submitted, this triggers your backend job.
RESPONSE from form entry - Returns HTML that performs a redirect to your static wait page and/or POST/GET to another form (the WAIT page).
WAIT PAGE - Only contains FORM data related to wait page as well as javascript to destroy the most recent history. Like (-1 OR -2) to only destroy the most recent pages, but still allows them to go back to their original FORM entry page.
Once they are at your WAIT page, they can click REFRESH as much as they want and it will never spawn the original FORM job on the backend. Instead, your WAIT page should embrace a META timed refresh itself so it can always check on the status of their job. When their job is completed, they are redirected away from the wait page to whereever you wish.
If they do manually REFRESH... They are simply adding one more check of their job status in there.
Hope that helps. Good luck.
No, there isn't.
I'm pretty sure there is no way to intercept a click on the refresh button from JS, and even if there was, JS can be turned off.
You should probably step back from your X (preventing refreshing) and find a different solution to Y (whatever that might be).
Issue #2 now can be solved using BroadcastAPI.
At the moment it's only available in Chrome, Firefox, and Opera.
var bc = new BroadcastChannel('test_channel');
bc.onmessage = function (ev) {
if(ev.data && ev.data.url===window.location.href){
alert('You cannot open the same page in 2 tabs');
}
}
bc.postMessage(window.location.href);
Number (2) is possible by using a socket implementation (like websocket, socket.io, etc.) with a custom heartbeat for each session the user is engaged in. If a user attempts to open another window, you have a javascript handler check with the server if it's ok, and then respond with an error messages.
However, a better solution is to synchronize the two sessions if possible like in google docs.