How to prevent refreshing of a page through Javascript/jQuery/ajax - javascript

The following code is running but I want to stop the browser refresh. By using onbeforeunload(), its detecting everything like closing the tab, clicking on another link etc. But I want to detect the browser click. So how to do that?
<html>
<head>
<script type="text/javascript">
onbeforeunload=function(){
return false; //This is showing a pop up, which should not come.
}
if (document.addEventListener) { \\adding event listener
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
}
else {
document.attachEvent('oncontextmenu', function() {
window.event.returnValue = false;
});
}
document.onkeydown = function() { //switch case to detect refresh from keyboard
switch (event.keyCode) {
case 116 : //F5 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 82 : //Ctrl+R button
if (event.ctrlKey) {
event.returnValue = false;
event.keyCode = 0;
return false;
}
}
}
</script>
</head>
<body>
<div>name: <input type="text"></input></div>
</body>
</html>

Related

Disable mouse scroll middle click event with jQuery

I wrote the below code for disabling the scroll in the mouse while it is clicked.
but my code does not work an when I click with the scroll of my mouse it opens my link.
Here is my code :
$('a').on('mousedown', function(e) {
if (e.which === 2) {
console.log('Disabled');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You have to use auxclick in order to disable this feature. Replace your 'click' with 'auxclick', and add e.preventDefault(), it will work, tested in chrome and FF
$('a').on('auxclick', function(e) {
if (e.which === 2) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You can use event.preventDefault() to cancel a action
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
try the code below, thanks :
click here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
<script>
var el = document.getElementById('link_click');
el.onmousedown = mouse_down;
function mouse_down() {
alert('mouse_down() called');
return false;
}
</script>

Able to detect Ctrl+R But stop reloading page

I am able to detect Ctrl+R but unable to stop reloading page.
Please help me to fix this.
I am using this code.
$(document).keydown(function(e) {
if (e.keyCode == 65+17 && e.ctrlKey) {
alert('ctrl R');
exit;
return ;
}
});
Thanks in advance.
The standard / clean way to help user prevent unwanted page reload is via beforeunload and not via overriding key event, which is, in fact, futile: you do not know what key combination invoked page reload (for instance, f5 works alike in most browsers), he may press CTRL+R with locationbar focused so your page gets no event to capture, he may have pressed toolbar button…
Mentioned standard approach from linked MDN page
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
return confirmationMessage; // Gecko, WebKit, Chrome <34
});
This will prompt user whenever he tries to reload / close / navigate away from your page no matter what initiated unload.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function () {
document.onkeydown = KeyPress;
function KeyPress(e) {
console.log(e);
var press = window.event? event : e
if (press.keyCode == 82 && press.ctrlKey) alert("Ctrl+R");
if ($.browser.mozilla) {
if (e.ctrlKey && keycode == 82) {
if (e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
}
}
if ($.browser.msie) {
if (window.event.ctrlKey && press.keycode == 82) {
window.event.returnValue = false;
window.event.keyCode = 0;
window.status = "Refresh is disabled";
}
}
}
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

prevent default 'F1' event in iE11

When the user press F1 key,I am planning to display our application help and suppress default action.
I tried with different options not to show help popup of IE.
Here is my Code:
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
Please let me know how can i achieve in showing the help page of my application instead of IE help.
I am using IE11 version.
You could subscribe to the window.onhelp event:
window.onhelp =function() {
alert();
return false;
}
Try doing this
<script>
$(document).ready(function () {
removedefaulthelp();
function removedefaulthelp()
{
window.onhelp = function () {
return false;
alert();
}
}
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
removedefaulthelp();
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
}
</script>
Refer this for more information.
Here is an example similar to Sukanya's answer, but my solution shows how to extend for the F2-F12 keys, and purposely disregards F-combination keys, such a CTRL + F1.
<html>
<head>
<!-- Note: reference your own JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>

Alert on page indexing in gridview

I have a gridview where I use page-indexing. If user navigates to next page I need to give an alert like "Make sure you updated the page before you move" and a pop up should display. If yes is clicked it should go to another page or if cancel is clicked it has to stay in the same page.
I am using this js, but the alert comes often if any button in the page is clicked. How can I display message only when paging is clicked.
<script type="text/javascript">
var isPaging;
$(".myPagingButton").on("click", function () {
isPaging = true;
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
if (!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Make sure you have updated the page before navigation?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload = goodbye;
</script>
If you only want it to appear for the paging buttons, than set a flag when the buttons are clicked.
HTML:
<a class="myPagingButon" href="example.html">Paging</a>
JavaScript:
var isPaging;
$(function(){
$(".myPagingButon").on("click", function() { console.log("click");
isPaging = true;
});
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
return 'Dialog text here.';
}
window.onbeforeunload = goodbye;
JSFiddle
document.getElementById('yourButton').addEventListener('click', function(){
window.addEventListener('beforeunload', function(){
goodbye();
});
});

Setting onbeforeunload on body element in Chrome and IE using jQuery

I have a system where I want to check with the user if they're sure they want to leave the page once a dirty flag is set.
I'm using the following code - In FireFox, I can look at the page source through FireBug and the tag correctly has the onbeforeunload attribute inserted in it.
In Chrome and FireFox, this doesn't happen though and I'm able to navigate away from the page without any warning at all. The jQuery line to update the body tag is definitely being executed, it just isn't performing it.
if ($("body").attr('onbeforeunload') == null) {
if (window.event) {
// IE and Chrome use this
$("body").attr('onbeforeunload', 'CatchLeavePage(event)');
}
else {
// Firefox uses this
$("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
}
}
Any ideas how to proceed from here?
you cannot abort page unload by returning false. you must return string that will be shown to user in a message box, and he decides if he want to leave or stay on the page (by selecting either 'OK' or 'Cancel' button), so you need to write your code like this:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
};
try this
<script type=\"text/javascript\">
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e)
{
if(dont_confirm_leave!==1)
{
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation)
{
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
window.onbeforeunload=goodbye;
</script>
window.onbeforeunload = function () { return 'Are you sure?' };
Check this code :
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = "You sure you want to leave ?";
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload = goodbye;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
}
case 13 : //Press enter
validNavigation = true;
}
}
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function () {
wireUpEvents();
});
It's not pretty, but it did the trick.
var warnclose = true;
var warn = function(e) {
var warning = 'Your warning message.';
if (warnclose) {
// Disables multiple calls
warnclose = false;
// In case we still need warn to be called again
setTimeout(function(){
warnclose = true;
}, 500);
return warning;
}
};
window.onbeforeunload = warn;

Categories