I have a screen where I don't want the user to click on the back button. Now I am doing an ajax call to show that screen. There a button on it, when the click event is fired I want to redirect to the home page. Here its is.
$.post("<?php echo base_url();?>register/citizen", myobj2, function(data){
$("body").empty().append(data);
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";
window.onhashchange=function(){window.location.hash="no-back-button";}
window.onbeforeunload = function() {
return "If you leave this page you will have to register again.";
}
});
On the page that comes in I have
$(document).ready(function(){
$("#localfinal").unbind('click').on("click", function(){
//$().redirect('<?php //echo base_url();?>');
window.location(<?php echo base_url();?>);
});
});
When the user clicks the button, I get the message about leaving the page. Instead I just want to redirect to the base url (home);
Any ideas ?
Reset onbeforeunload handler, btw, i don't think you need to unbind() click handler:
$("#localfinal").on("click", function(){
window.onbeforeunload = $.noop;
window.location(<?php echo base_url();?>);
});
Try this
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
Related
I want to show alert while clicking on the back button in the browser. it only works before clicking on the back button, when you click to somewhere else on the page, otherwise, it will go to the previous page without alert message.
I have added my code here. I want to go back when the page loads.
$(document).ready(function() {
if (window.history && window.history.pushState) {
//window.history.pushState('', null, './');
window.history.pushState(null, "", window.location.href);
$(window).on('popstate', function() {
alert('Warning! Your data will lose.');
document.location.href = 'www.redirecturl.com';
});
}
});
<html>
<head>
<title>Disable Browser Back Button Using JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">
</script>
</head>
<body>
Click Here...
</body>
</html>
I am using JQuery here
You can achieve this using onbeforeunload event
using jquery
$(window).bind('beforeunload', function(){
myFunction();
return 'Are you sure you want to leave?';
});
function myFunction(){
// Write your business logic here
alert('Bye');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
Using Javascript
window.onbeforeunload = s => "";
<body>
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
</body>
Put It in your JS file and it will work .. when your press the browser back button it will alert you to leave or cancel.
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});
history.pushState(null, document.title, location.href);
window.addEventListener("popstate", function (event) {
$.confirm({
boxWidth: "30%",
title: "Alert",
model: true,
content: "The Changes made will be cleared",
buttons: {
Continue: function () {
history.back();
},
Cancel: function () {
history.pushState(null, document.title, location.href);
},
},
});
});
When I mouseover a button, a function activated by onmouseover fires continuously every fraction of a second. I want it to fire only once.
I need to use onmouseover on a button to call a submit function because I cannot use onclick because it interferes with another function that is called onclick. If I use onmouseout it works ok and only fires once, but onmouseout is not satisfactory for my purpose. I have tried other event handlers including onmouseenter, and onmousedown, but they suffer from the same problem. I also tried this: onmouseover="submitForm(); button.onmouseover = null;"
<script language="javascript" type="text/javascript">
function submitForm() {
$("#pform").submit();
}
</script>
<input type="button" onmouseover="submitForm();" />
When the button is moused over, the function fires continuously, several times per second. I want it to fire only once.
You can use simple logic to check whether the mouse over event enters first time. Use local storage, if local storage is no set initially, it is the first time the mouse over event.
else if local storage is already set to true, then don't trigger the form submit.
<script language="javascript" type="text/javascript">
function submitForm() {
if(sessionStorage.getItem("mouse_over") == undefined){
sessionStorage.setItem("mouse_over","true");
$("#pform").submit();
}else{
}
}
</script>
<input type="button" onmouseover="submitForm();" />
$(element).one('mouseover' function(){
// your function here
});
Apparently, when you submit the form, the page is reloaded. After the reload, the mouse is still on the button and the event is fired again.
It is not common to use onmouseover to submit a form. You wrote that you don't use onclick, because it interferes with another function that is called onclick. If that is the only reason, then please try to prevent the interference as follows.
Change the button as follows:
<input type="button" id="clickbutton" />
Find the $(document).ready(function() { ... }); in your page and add the following code inside:
$("#clickbutton").click(function(e) {
e.stopPropagation();
$("#pform").submit();
});
Have you tried adding a variable to track whether you have already submitted? For example:
<script language="javascript" type="text/javascript">
var formSubmitted = false;
function submitForm() {
if (!formSubmitted){
$("#pform").submit();
formSubmitted = true;
}
}
</script>
<input type="button" onmouseover="submitForm();" />
That should ensure it only happens once (even if submitForm() is getting called many times).
Admiraalit -
I'm trying your last suggestion. This is client side called onmouseover
<script>
function checkLoginStatus() {
jQuery.ajax({
type: "POST",
url: "checkstatus.php",
success: function(res){
if(res == "0") {
alert("Login Required");
}
}
});
}
</script>
and this is checkstatus.php
<?php
session_start();
echo "checking status";
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
I have verified with an alert box that checkLoginStatus() is being called, but nothing happens otherwise. What is wrong?
This works. I think the problem was the extra echo statement I put in checkstatus.php for testing.
<script>
function checkLoginStatus() {
jQuery.ajax({
type: "POST",
url: "checkstatus.php",
success: function(res){
if(res == "0") {
alert("need to log in");
}
}
});
}
</script>
<?php
session_start();
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
<?php
session_start();
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
This provides the not logged in message and I can submit using onmouseout so all is good. Thanks everyone.
Is there away that the confirm box appeared, if i clicked "ok" it will go to another page and if i clicked "cancel" it will just stay and the current page will not reload again? THANK YOU.
function reload()
{
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
window.location = "http://www.yoururl.com";
}
else
{
//do nothing
}
}
call this function when you want to confirmation from user.........
You can use confirm() for this, which returns true on ok or false on cancel.
function myFunction(){
if(confirm("Would you like go to other page?")){
window.location = "http://yahoo.com";
}else{
alert('fine, if not want');
}
}
myFunction();
Updated
DEMO
UPDATED2
<button onclick="return logout()" >logout</button>
<script>
function logout(){
if(confirm("Would you like go to other page?")){
window.location = "failed.php";
}else{
//do your stuff on if press cancel
}
}
</script>
You may try doing
<script>
function myfunction(){
if(confirm("The confirm message")){
youDoTheThingsHere();
return false;
}else{
console.log("I cancelled the dialog!");
return false;
}
}
</script>
I'm not sure about your certain situation and the code that is involved when you call the confirm, but this has worked for me. The other option you may look at as a last resort is using something like a bootstrap modal to trigger a "confirm" modal. With the bootstrap modal you can then style it how you want... hope I could help!
Use "return None"
function myFunction(){
if (confirm("Confirm to reset your content!")){
location.reload();
}else{
return None;
}
}
when you enter text into the status box and click on any hyperlink or click on the back button, a dialog window will display the following message "Are you sure you want to leave this page?"?
Does is this done? how do you do it?
You need to set a dirty flag
<script type="text/javascript">
var isDirty=false;
window.onbeforeunload =function() {
if (isDirty) return "Form not saved";
}
window.onload=function() {
document.getElementById("someFieldId").onblur=function() {
isDirty=this.value.length>0;
}
}
</script>
.
.
.
I assign the element id "btn_submit" to write_ok button.
I wanted the following:
if I press write_ok button,
do write,
else (if I do not press write_ok button)
do alert message before page exit.
I don't know how can i find out which button was pressed.
I found this, but I cannot get it to work: jQuery: how to get which button was clicked upon form submission?
<script type="text/javascript">
$(window).bind('beforeunload', function(){
if ( #btn_submit was not pressed )
return 'If you exit the page, you may lose your changes';
});
</script>
You can do something like,
<script type="text/javascript">
var btn_submit_pressed = false;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'If you want to exit page, you may lost your writing';
});
$('#btn_submit').click(function(){ btn_submit_pressed=true; });
</script>
You could introduce a variable:
var isSaved = true; // at the beginning there's nothing unsaved
Whenever the user updates something, set:
isSaved = false;
When the user clicks submit, set:
isSaved = true;
Then in beforeunload, just check:
if(!isSaved) {
Pawar's code is a big idea.
to compress and generize the code, #btn_submit changed to "input submit".
message in return is appear only IE not firefox, chrome.
<script type="text/javascript">
var btn_submit_pressed = true;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'if you leave this page, chages will be lost.';
});
$('#btn_submit').click(function(){ btn_submit_pressed=false; });
</script>