<script type="text/javascript">
<!--
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
// -->
</script>
</head>
<body style="background-color: #800080" onload="FP_popUpMsg('test message')">
This popup window appears on load of the webpage. I want to format this so that the user cannot access the page unless they click the OK button in the popup. Presently they can click the X in the browser (top right) and still get in
You could always use confirm, which returns true if the 'ok' button was clicked and false if the close or cancel buttons were clicked. MDN has a page on it: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm. The question at How to stop page load in html static page has some solutions for stopping a page from loading, though they seem hackish and bound to fail at some point. Another solution to that part of the problem would be to redirect to a dedicated page; see How to redirect to another webpage in JavaScript/jQuery? for more.
A sample solution (pure JS, no libraries used here)
<html>
<head>
<script type = "text/javascript">
function redirIfNotConfirmed(msg) {
var confirmed = confirm(msg);
if (!confirmed) window.location.href = "http://my.website.com/dummy_redir_page";
}
redirIfNotConfirmed("click ok to proceed");
</script>
</head>
Related
I have a web page that monitors a process and refreshes every ten seconds. To do this I simply have a statement in the <Head> section of the HTML: <meta http-equiv="refresh" content="10">
This works fine, but...
I have a button on the page that allows for a remote reset of the system. In order to confirm this action, I have a modal page that pops up asking the user to confirm. However, if the original page has been displayed for, say, nine seconds, the modal page shows for only one second before being refreshed and disappearing!
Is there a simple way that I can disable the page refresh while the modal page is displayed, and then restart it once the confirmation has been given?
You need some javascript to handle the pause of the page.
As a note you should probably handle the refreshing of the content with an Ajax call or similar, and then update the content that way. As a note W3C has a note concerning the refresh value.
Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines.
A simple solution could be to stop the window from refreshing when the modal is open and resume the refresh functionality when the user dismisses the modal.
<head>
<meta http-equiv="refresh" content="1">
<title>Refresh page</title>
</head>
<body>
<p id="demo"></p>
<button onclick="stopRefresh()">pause</button>
<button onclick="startRefresh()">start</button>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = "" + d.getTime();
const stopRefresh = () => {
window.stop(); // Use this to stop the refresh: when modal opens
}
const startRefresh = () => {
document.location.reload(); // Resume the refresh: when modal closes
}
</script>
</body>
I have one.html and two.html, my requirement is when user enters the url for one.html, a dialog box with message saying "You are redirected to the new Web page" should be displayed and user can click ok button to continue or within 10 seconds the dialog box should close automatically and user should redirect to the new page(two.html). Please suggest.
PS: I can able to get the result to some extent but the issue is i can able to see one.html and the dialog box on it, whereas users should not see one.html, only the dialog box with message and ok button should be dispalyed to the users and after 10 seconds if user is not clicking ok button , it should redirect to two.html page.
Place this script inside one.html. The code is self-explanatory.
<script>
function redirectToPage2(){
var redirectUrl = "two.html"
message= "You will be redirected to Page 2. Click <a href='"+redirectUrl+"'>here</a> if you are not redirected in 10 seconds.";
$(body).innerHTML=message;
setTimeout(function(){
window.location=redirectUrl;
}, 10000); // will redirect after 10 seconds
}
}
window.onload = redirectToPage2;
</script>
If you don't want to see one.html at all, you will need another page - say three.html. And the code will look like this.
One.html
<script>
window.onload = "Three.html";
</script>
And place the above code in Three.html.
If your target is just to redirect viewers of one.html to two.html, you could try this code:
<meta http-equiv="refresh" content="0;two.html">
or if your planning to load something before redirecting, try this:
<script language=javascript>
function redirect(){
// do stuffs
window.location = "two.html";
}
</script>
<body onload="redirect()">
<!-- your content -->
</body>
one.html
<script src="jquery-1.12.2.min.js"></script>
<script>
window.onload = function myFunction() {
if (confirm("Are you sure you want to redirect with two.html page ?") == true) {
window.location.href="two.html";
}
}
</script>
Explanation :
Include javascript file that is required.
window.onload = When a Web page is loaded, the code on the page — whether HTML, CSS, PHP, or some other type.
confirm() method = The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button.
If user press on OK button then it will redirect to two.html page with the use of function "window.location.href"
-- Add This CSS In header
<style>
body
{
display:none;
}
</style>
That Might Be helpful....
It's showing dialogue and after some second dialogue is hiding.it navigate to another page.
I want to stop navigation and when i complete my work in dialogue. press ok(button) then it continue to navigation.
I write jquery in page
$(window).bind('beforeunload',function(){
var continued=document.getElementById("Form:testID1").value;
if(continued==="true"){
PF('dialogwidgetvar').show();
}
});
//I tried this one as Suggestion
function f(){
var continued=document.getElementById("Form:testID").value;
if(continued==="true"){
PF('dialogWidgetVar').show();
}
}
window.addEventListener('beforeunload', f(), true);
You can't do any work at this moment in/from the onbeforeunload, that is by design in the html specs. Firefox won't even show your custom text anymore.
See also:
How can I override the OnBeforeUnload dialog and replace it with my own?
Problems with onbeforeunload
What you need to do is hook into the window.onbeforeunload and return a message from there. The string returned from that function (event handler) is displayed in a prompt (messagebox). Have a look at the following for further details of this event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
Here's a working sample
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onbeforeunload
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<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
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
I am doing some twitter authentication in classic asp (I know, but I can't change it). What I am doing is opening an authentication page in a popup via jQuery/JS with window.open that handels all of the rest/oauth authentication and then returns to the same page with the oauth keys I need. I would then like to close the popup and fire off some jQuery hide/show events without refreshing the page.
Code to fireoff the popup and authentication script:
jQuery(document).ready(function() {
jQuery("#twitter-button").live("click", function() {
jQuery("#twitter-button").attr("value", "Processing");
jQuery("#twitter-button").removeClass();
jQuery("#twitter-button").addClass("twitter-button-processing");
window.open('authentication.asp','_blank','width=600,height=400');
return false;
});
});
I then have the following code on the same page nested in some ASP for when we are redirected back:
if Session("OAUTH_TOKEN") <> "" And Session("OAUTH_TOKEN_SECRET") <> "" Then
%>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
window.close();
// I'd like to show/hide new buttons on the parent page here
});
</script>
<%
End If
The goal is to change the button with a class of twitter-button-processing displaying none but I can not get it to change in the parent window. I have tried placing jQuery('.twitter-button-processing').hide(); in a jQuery(window).unload() function after the close but this did not produce the correct result.
I tried the solutions from Binding jQuery event on a child window and How to run function of parent window when child window closes? to no avail. Any help would be fantastic.
So I ended up pinpointing the answer on my own. Instead of redirecting back to the same page which was getting messy, I am redirecting to a blank page from the twitter popup window with some classic ASP that checks a few session variables.
Main File
var someFunction = function(data){
//some functionality
}
Twitter Popup Redirect window in the asp checks
window.opener.someFunction();
window.close();
This did exactly what I needed to do by calling the JS on the parent window while closing the child. Maybe this will help someone else.
I have an event called SubmitResponse().
A user is presented with a list of questions and possible responses. After completing the responses, the user clicks the Preview button. If responses are correct, the user clicks the SubmitResponse button and then SubmitResponse() processes it.
Upon clicking the SubmitResponse button, a print screen pops up for the user to print a copy. This is the calling code for the JS print feature.
finsub.Attributes.Add("OnClick", "print_form()")
Works fine but there is one problem. We would like the user to be redirected to the screen that displays results of his/her response with the code below.
Response.Redirect("results.aspx")
What is happening is that once the user clicks the submitResponses button, s/he is immediately redirected to the results.aspx page and the print feature is no longer available.
Is there a way to work around this?
You can do the printing and redirect all via javascript. Here is an example that should work:
function doPrint() {
window.print();
document.location.href = "Somewhere.aspx";
}
Link it to a Button:
<asp:Button ID="btnPrint" runat="server" Text="Print"
OnClientClick="doPrint(); return false;" />
For cross browser compatibility, you need to introduce a delay between the window.print() call and the redirect.
I find the following works well (using JQuery framework to print a page as soon as it loaded):
<script type="text/javascript">
$(document).ready(function () {
window.print();
setTimeout("closePrintView()", 3000);
});
function closePrintView() {
document.location.href = 'somewhere.html';
}
</script>
This can be easily adapted for "Print" buttons and links etc.
you can use this code :
window.print();
window.onafterprint = function(event) {
window.location.href = 'index.php'
};
using window.print() callBack!!
Redirect on client side using javascript/jQuery
onclick="window.print();window.location.href='results.aspx';"
For your case
insub.Attributes.Add("OnClick", "print_form();window.location.href='results.aspx';")
<script type="text/javascript">window.location = 'url.aspx';</script>