On our website we have a link to another page. This looks like this
<a href="URL" title="Title" class="thisClass">
<img src="IMG" width="20" border="0"/>
</a>
What I want is that when the link is clicked then a popup comes up with ex. this information:
“The page you are trying to enter has xx images and can take long time to load. Are you sure you want to continue”
xx is a variable that can be given from the website where the link is present.
Then there should of course be an OK and CANCEL button on the popup. If the OK button is clicked then the URL be loaded to the browser, if CANCEL is clicked then nothing should happen (return to original page)
The website is programmed in asp.net c#.
We are not interested in a new webpage, but just a simple javascript popup given the user a warning that due to xx number of images the webpage will be slow to load.
This webpage is used on an intranet site and we like to warn users when they enter a website that we expect will take long time to load.
Take a look at the jQuery UI Dialog (http://jqueryui.com/dialog/) or Twitter's Bootstrap Modal (http://twitter.github.io/bootstrap/javascript.html#modals)
I think the both solutions can do what you need.
<a href="URL" title="Title" onclick="return confirm('The page you are trying to enter has xx images and can take long time to load. Are you sure you want to continue?');" class="thisClass">
<img src="IMG" width="20" border="0"/>
</a>
If you can do with the regular browsers' alert box, try this. Else you will have to resort to other jquery plugins to make it look more elegant that are mentioned on other answers.
You can user JqueryUi for this, this library includes Dialog which corresponds to your need.
This is the website :
http://jqueryui.com/dialog/#default
And a sample of code that I find in this url :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
There is also example to manage confirmation (button OK and button CANCEL)
I hope that I help you ;)
Related
I have a simple HTML file with a button in which whenever I click it, it looks up to the registry and then runs a batch file. After a couple of clicks, I noticed it seems to freeze. Whenever I hover my cursor to the tab, it doesn't display details anymore. This part is crucial since I have to retrieve the description/details through IAccessible's accDescription.
Also, I noticed that whenever this issue happens, whenever I click on the button, the action URL in my form will appear in the address bar for a split second and then goes back to default html file path. Any help would be much appreciated.
Here's my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<title>Run Executable HTA</title>
</head>
<body>
<form action="appts:THxJRXxodHRwczovL3d3dy5nb29nbGUuY29tLnBo">
<input type="submit" value="Launch Portal to Left" />
</form>
</body>
</html>
Windows 10 UWP Webview
I have the two html files located in a www folder under Assets (Assets/www/xxx.html) in a Windows 10 UWP, both files in VS 2015 are set to be copied to the output dir.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Script</title>
</head>
<body>
<form action="submit.html" method="post">
Data:<input type="text" name="somedata" > <br> <br>
<input type="submit" value="Submit" >
</form>
</body>
</html>
and submit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dummy Submission</title>
</head>
<body>
<h2> Your data has been submitted - Thank You. </h2>
</body>
</html>
The Webview object is embbeded in the XMAL as below
<WebView x:Name="WebBrowser" HorizontalAlignment="Left" VerticalAlignment="Top" Height="532" Width="1014" NavigationStarting="WebBrowser_NavigationStarting"/>
And the index page is loaded by
/// Helper to perform the navigation in webview
/// </summary>
/// <param name="url"></param>
private void NavigateWebview(string url)
{
try
{
Uri targetUri = new Uri(url);
WebBrowser.Navigate(targetUri);
}
catch (FormatException myE)
{
// Bad address
WebBrowser.NavigateToString(String.Format("<h1>Address is invalid, try again. Details --> {0}.</h1>", myE.Message));
}
}
NavigateWebview(#"ms-appx-web:///Assets/www/index.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank.
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below.
I have changed paths to absolute etc and read the docs in detail but I fail to see why this does not work.
Ideas Please Guys ...
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below
The "GUID" is the package name of current app, it is the default value of Authority part of URI schemes. So if you only want to navigate to another page, this absolutely path is right. You can test by code NavigateWebview(#"ms-appx-web://{your package name}/Assets//www/submit.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank
For your issue, I change the form method to get, it will work.
<form action="submit.html" method="get" id="myform">
Data:<input type="text" name="somedata"> <br> <br>
<input type="submit" value="Submit">
</form>
Please Click Me to jump
form has two methods for submiting the form data. Get sends form data via a URL string, post sends form data via the server. In my opinion, post method post data firstly and then navigate, and the data are handled at server side. I haven't seen posted form data received and handled on a HTML page, so I guess you did not need use post method. For get method you can receive data and deal them in javascript, here is how to do.
The Html Amp Post goes to the current url?.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" rc="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form class="-amp-form" method="post" target="_top" novalidate="" action-xhr="/Home/About">
<input name="name" class="data-input" required="" type="text" placeholder="Name...">
<input name="email" class="data-input" required="" type="email" placeholder="Email...">
<input class="button button-primary" type="submit" value="Subscribe">
</form>
</body>
</html>
Hovering over the submit input button in a browser shows the current url and clicking the button appears to do nothing (using httpFiddler there is no post or get request occuring). The solution is a standard MVC 5 application with the layout changed to include the amp ⚡ symbol in Html declaration and scripts included. Any ideas why it would show the current url when hovering over the button for example https://localhost:44331/Home/Index and not make any posts with the above code when the form button is clicked?
here is one of the resources i have been following from: https://ampbyexample.com/components/amp-form/
The post was working, it just wasn't redirecting to the view after posting. The browser uses the 'action' property on the form to show the url that the user will be sent to and as this value is omitted for an amp action-xhr post it was just showing the current url; however it was still posting to the correct url when clicked. What i was looking to do is a post and redirect and it seems that currently only Get amp requests support page redirection. This might change in the future but for now it needs to use Get requests for page redirecting.
When I load an aspx page to a popwindow using jQuery model using below code.
function OpenExceptions() {
$('#Equipmentdialog').load('Popups/Test1.aspx', function () {
$(this).dialog({
modal: true,
width: 900,
height: 400
});
});
}
I am unable to call any server side method(C# button click) in the Test1.Aspx method, When I call the the server side events, I am getting resource not found exception?
Can someone please explain me what is the reason?
Thanks
Update: this is the error I am getting
I looked at your sample project and the issue you are experiencing is very simple to explain but I am afraid it's not going to be so simple to make it work.
First I'll explain what's causing the exception.
When the dialog loads, it sets its content to whatever output is generated by the Test.aspx page. Since the page generates this HTML when you navigate to it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form name="form1" method="post" action="Test.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTI2NTY4ODI3MWRkmRTYlsUe3rVbAI2jDoNeA5EPuo8=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKd2MeEBAKM54rGBl+Fr2fdw6uP6072WYTIw/gz9N5E" />
</div>
<div>
<span id="Label1">Label</span>
<br />
<br />
<input type="submit" name="Button1" value="Button" id="Button1" />
</div>
</form>
</body>
</html>
The dialog ends up displaying a form whose action is set to Test.aspx; therefore, when you click on the Button on the dialog, it attempts to post back the form to Test.aspx but it doesn't find it because this page is inside Popups/Test.aspx. Now, in order to "fix it" (I say this in quotes because it's not really going to fix anything), you could change the dialog's HTML by brute force; doing something like this:
function OpenExceptions() {
$('#Equipmentdialog').load('Popups/Test.aspx #form1', function (response, status, xhr) {
response = response.replace('action="Test.aspx"', 'action="Popups/Test.aspx"'); //Make sure the form's action is accurate
$(this).html(response);
$(this).dialog({
modal: true,
width: 900,
height: 400
});
});
}
And now, when you click the Button you will no longer receive a Resource Not Found Exception; however, because this causes a normal post back the dialog will disappear, the button will post back the page and the label you have on the page will display the current date and time.
Again, this all happens because you are doing normal post backs as opposed to Ajax requests. My approach above would work if the Button in the Test.aspx page performs an Ajax request but not the kind you get when you use Update Panels and Script Managers. You won't be able to use those tools because of the way they work internally...
If you are looking to use Ajax in your app, I recommend you look at WCF Web Services in conjunction with JQuery. There are many good tutorials online on the topic.
I hope my answer at least helps you understand why this isn't working for you and why it won't work if you continue to use this approach. There are many hacks that you could apply to make it work, but I can't think of a single one that's going to be easy to maintain and scale going forward. The best approach is to do Ajax properly, using WCF web services (or Page Methods) and JQuery.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Detecting Unsaved Changes using JavaScript
My Web application has 3 web forms ,I implemented the validations in my webpage.I want to implement isdirty functionality in my web application.I want to pop up a message box in my webpage when a user clicks on sign out(which is a loginstatus control) if there any changes made to the form.
Environment:
Asp.net
VS2008
c#
This could be easily done with jquery and the onbeforeunload event. Using the .serialize() function you could calculate the state of the form on the returned string once when the page loads and then in the onbeforeunload event. Then compare the two values and if they are different something indeed has changed in the form.
Example:
<%# Page Language="C#" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
var data = '';
$(function () {
data = $('form').serialize();
});
window.onbeforeunload = function () {
if ($('form').serialize() !== data) {
return 'You have unsaved changes. Are you sure you want to navigate away?';
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:TextBox ID="FirstName" runat="server" />
<asp:TextBox ID="LastName" runat="server" TextMode="MultiLine" />
<asp:CheckBox ID="Chk" runat="server" />
<asp:HyperLink ID="Link" runat="server" Text="Go to Google" NavigateUrl="http://www.google.com" />
</form>
</body>
</html>
Some other techniques (like the one presented in the duplicate question that was voted to close for your question) involve in subscribing for the .change() event of the input elements but they are less reliable as the user could for example type abc in some input field and then delete it and if you used this technique the form would be considered as dirty although no value actually changed.
You can easily setup a popup/modal window to show-up when the user tries to leave a form/page. Here is a quick pure javascript example, that shows a message when you try to leave a page.
<body onunload="if (confirm('Save form ?')) { SaveFormMethod(); }">
If you need a better example, you should provide more details and show us your code.
Please take a look at this answer and see if it helps