I'd like to show a popup jquery styled if possible on every postback, for example saying Loading... I don't know how to accomplish that nor which tecnologyes use. I want to put the code on a super class so that I need to code only once. In principle I'd like that when I press the submit button, the page hides itself.
Hope you help me.
Edited:
It should be something like that. I have a page, I open a jquery dialog with an iframe on it and with a submit button. When I submit the form the dialog with the form must hide and a new dialog saying loading... have to appear; when the operations finishes this dialog must hides.
You can do that using the onsubmit trigger on the form of you page as:
<form id="form1" runat="server" onsubmit="return disableForm(this);">
...
</form>
an on javascript what I do is that on the first submit click I let the submit, and close/open the dialogs that I like. If the user clicks two times the submit I show him a message and stop the second submit.
var submitted = false;
function disableForm(theform) {
if (true == submitted) {
alert("form already submitted... please wait...");
return false;
}
else {
// here you close the dialog, open an other
submitted = true;
return true;
}
}
I can not write how to close the dialog that you open since you do not have give any clue/code about it, but I think it will be easy.
Assuming you are using updatepanels. You will need handlers like this one and an image "LoadingImage"
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
function beginRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "visible";
//Do something when call begins.
}
function endRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "hidden";
}
</script>
What it does is it shows an image when ajax call starts and hide it when it completes. You can use an animated gif for your purpose.
Related
My aim is to have a exit pop up which triggers the window.onbeforeunload if somebody tries to close the current tab or browser. But after they complete a sign up form to opt in to my e-mail list and redirect to my "Thank you page URL", I do not want the exit pop up to show.
I am using a page builder, so the code is not written by myself.
This is the following script I am using:
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
As for my form, because after the user enters their name and clicks submit, they redirect to a URL and the exit pop is triggering once the redirect begins. I only want the pop to show if they try to leave opting in then disable this after they take that action.
I notice an a class tag with the href="submit-form" My form is also contained in the form target tag if that helps.
How do I implement a script which disables the exit pop up after redirecting to a new page in a HTML sign up form?
Thank you for any insight.
You could achieve that by using if-else statements and setting the event to null if a form is being submitted.
Here is an example
`
window.onbeforeunload = function(e) {
e.preventDefault()
if($('form').submit(){
return null;
}
else{
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
}
}
`
PS: I have not tested it but it should work
I follow How to clear a textbox using javascript but my scenario is little change. I have a login button and when user click on login a pop-up window is open. He fill the textbox and for some reason he go back to main page. When he again come to login popup window he previous value is not cleared. May be this is because the page is not loaded. And I do not want to load page again. I want to use JQuery/JavaScript to remove the entered text. I has idea that I write code inside Close button but I don't know how to clear the textboxes. Please help.
Here is the code, scenario is that I used popup for login and sign up. In login popup there is link "Don't have login Id" when user click on it the sign up pop up with form is open.
Don't have Login Id
And the JavaScript method is
<script type="text/javascript">
function function_deletePreviousData(){
document.getElementById("signUp").value = "";
}
</script>
But nothing happened. I think this is because I don't give element id, I just give id of element which I used to land on sign up pop up form. Any idea for clear all form without accessing all elements and give it null value.
Instead of including code in close button click event, we should write code in login button click.This is one of my suggestion.
Try this once:
Javascript:
<script type="text/javascript">
function LoginButtonClick() {
document.getElementById`("TextBox_Id").value = "";
}
</script>
JQuery:
jQuery("#LoginButton_Id").Click( function()
{
$('#TextBox_Id').val("");
} );
Finally I find the method in JQuery to reset all fields. Just Trigger reset.
$('#form').trigger("reset");
Thanks all for help.
I have the following code:
<html>
<head>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage">
</form>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</body>
</html>
This code pops a confirmation box when the user leaves the page (Back or Refresh Browser Button) but not when a button inside the form is clicked.
QUESTION
How can I redirect to a different page when the user clicks the "Leave this Page" button of the confirmation box? I tried different methods but it does not work. I'm using Google Chrome.
Any help is very much appreciated. Thank you in advance. :)
EDIT
So I got some codes that actually works but it does the opposite. When I click the "Leave this Page" it stays and when I click "Stay on this Page" it redirects.
var onUnloadClick = 0;
function redirectTimer() {
setInterval(function(){window.location = "sample exam.php"},10);
}
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = onbeforeunload_Handler;
function onbeforeunload_Handler() {
if(!clicked) {
if(onUnloadClick == 0) {
redirectTimer();
return 'If you resubmit this page, progress will be lost.';
}
}
};
QUESTION
How will I modify this code and do the opposite function?
You can't mess with the browsers processes. If you click back, it will go back. If you click refresh, it will refresh the page. The reason they're in there is because they have their functions. You can try different approach in doing what you want but I don't think this one is possible.
I dont think that its possible. Check out answer here:
Intercept selection in window.onbeforeunload dialog
There is not defined way to intercept the onbeforeunload event. Further reference can be seen here:
Intercept selection in window.onbeforeunload dialog
When onbeforeunload event is kick started the user has already selected where he\she wants to go; it would not make sense if the browser allows javascript on a webpage to override the actions of the user.
Hence there should not be anyway for you take the user to some other location other than where the user wants to go.
Updated Answer to the Updated Questions:
Its not possible to do what you are trying to do. The reason you get redirected when you choose "stay on this page" and not otherwise is because your javascript function to redirect comes into effect only why you stay on the page. When you choose to leave the page the browser will no longer execute any of your code. Because the browser does not want you to override the choice fo the user.
My recommendation:
Rethink what you want. You want to redirect the user to a different page when the user is trying to go somewhere else. I really don't think that is the correct.
What is your ultimate goal? If you let me know that.. probably I can provide you with a better solution.
This may be a duplicate question but there is one thing I need to know and I wasn't able to find it on any other questions.
How can I pop up an alert box when the browser's refresh of back button is clicked but not any other buttons like homepage, etc. that refirects the page to another page?
I was able to make an alert box using this code:
<script type="text/javascript">
window.onbeforeunload = function() {
return 'If you resubmit this page, progress will be lost.';
};
</script>
But when I click on my homepage button, which loads the page to another page, the alert box still triggers. I need the alert box only for the refresh and back button of the BROWSER.
Any help is very much appreciated. Thanks in advance. :)
UPDATE
This is the code that works with jsfiddle.net but not with my browser.
<html>
<head>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage" href="something.php">
</form>
</body>
</html>
Now my questions is what can be the reason why it's not working in my browser but works with jsfiddle.net? Is there something that i missed? Something to configure, etc? Thanks.
JSFIDDLE LINK: http://jsfiddle.net/bawvu7yy/4/
Determining what was clicked on to trigger navigation is only possible if the button clicked on exists within your document. Assuming this "homepage" button is an element in the document in question, perhaps you can use a flag to keep track of if that button was clicked on.
// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
That way the popup only happens when anything else causes the page navigation.
EDIT: I've provided a working demo on jsfiddle of this. The link does not trigger the popup, but the other two buttons which behave exactly like "back" and "refresh", do trigger the popup. In this update, clicked = true; is commented out and this shows that the popup begins to appear for the Home button as well when this is not executed.
SECOND EDIT: You're running the script before the element exists. Move the <script> tag with the JavaScript inside to the bottom of the <body>.
Just use window.onbeforeunload function in javascript use the code below.
<script type="text/javascript">
window.onbeforeunload = function() { return "Are you sure you want to leave?"; }
</script>
Hope this helps you
I need to show loading image in asp.net page on submit event. I searched for a lot of ideas here and there but did not found a perfect solution for me. Still, I was able to write one myself. Though, one such is here show loading image while the page is loading but I dont think it'll look for page validation.
JS that I call at page submit.
$(document).ready(function () {
$(this).submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});
});
Here is my loading div:
<div style="display: none" id="overlay">
<div id="modalprogress">
<div id="theprogress">
<img alt="Loading... Please wait" src="../App_Themes/Theme1/images/processing.gif">
</div>
</div>
</div>
This div remains hidden by default. As soon as a submit button is clicked, it calls for Page_ClientValidate() method that is used for validation of page. Works fine for me but has few issues.
A button with a different or no ValidationGroup will fire this Page_ClientValidate() of other ValidationGroup present on page, and then shows the error message in validation summary, though it submits the page, but:
It shows the validation summary that is irrelevant/ for a moment (until the requested page is returned).
In case a button with a ValidationGroup is pressed, and a validation error occurs, it would then suppress all the submits/javascript methods that follow.
Any way to call the same in DropDown or CheckBox methods AutoPostBack Events?
Note#: I am trying to avoid the update panel thing, and other ajax call ideas as of now. Just need some optimization in the above code.
You have to determine the selector.
As example, use certain class (showLoadingImg) for the button where loading image need to show, doing this you avoid rest of the button click.
$('.showLoadingImg').submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});