Tweet
I have been obsessed with putting a second submit button on an a5w page with a standard grid component, with each submit button saving the data and then loading a different page depending on which button was pressed by the user. This would allow one button to reload the same page (save and continue) and the other button to load a menu (save and exit). Using Ajax I have been able to do this and I have tested this code on a localhost and a remote server using the WAS ver 9. It requires several files on the server and does carry some overhead but the results seem worthwhile.
Create a standard grid component and place it on an a5w page (in this example called g_onepg.a5w and the grid component name is grd_one) but set the target page after submit to a particular file, which I call redirect.a5w (instead of <self>). The file redirect.a5w, refers to a session variable and contains nothing but the following code added to the head and body section (title, link and meta name section were unchanged and not included here):
<html><head>
<%A5
target = "window.location.replace("+s_quote(session.redtarget)+");"
?"<script type='text/JavaScript'>"
?"function doRedirect()"
?"{"
?target
?"}"
?"</script>"
%>
</head>
<body onload="doRedirect()">
</body></html>
When the application server sends that file it first writes it as a file containing standard javascript. When the user presses the grid submit button that file loads and immediately redirects to the file named in the session variable. The screen does flash momentarily. The session variable is set using Ajax. In the a5w page (g_onepg.a5w) containing your component, place the following code in the head section:
<script type="text/javascript">
var xhr1 = false;
if (window.XMLHttpRequest) {
xhr1 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr1 = new ActiveXObject ("Microsoft.XMLHTTP");
}
xhr1.open("GET", "setg_onepg.a5w", false);
xhr1.send(null);
</script>
In this case I want to reload the same page so the file setg_onepg.a5w contains the code:
<html>
<head>
<meta name="generator" content="Alpha Five HTML Editor Version 9 Build 2095-3264">
<title></title>
</head>
<body>
<%A5
delete session.redtarget
dim session.redtarget as c = "g_onepg.a5w"
%>
</body></html>
When the app server sends this file it sets the session variable, which redirect.a5w will read later, in this case the name of the page with the grid component.
I also have another file on the server to set the session variable to a different target in this case called set_onemenu.a5w with the code:
<html>
<head>
<meta name="generator" content="Alpha Five HTML Editor Version 9 Build 2095-3264">
<title></title>
</head>
<body>
<%A5
delete session.redtarget
dim session.redtarget as c = "onemenu.a5w"
%>
</body></html>
Back in the a5w file (g_onepg.a5w) containing the component the following code is placed in the body section (at the bottom after the grid component, named grd_one):
<script type="text/javascript">
function settarget(){
var xhr2 = false;
if (window.XMLHttpRequest) {
xhr2 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr2 = new ActiveXObject ("Microsoft.XMLHTTP");
}
xhr2.open("GET", " set_onemenu.a5w ", false);
xhr2.send(null);
}
</script>
<div align=center>
<input type="button" value="Submit and Exit" onClick="settarget();document.forms['grd_one'].grd_one_Button_Submit.click()" style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BACKGROUND-COLOR: #f9ead6; BORDER-RIGHT: 1px solid; BORDER-: 1px solid">
</div>
You can check the name of the component and the submit button by reading the source code of the web page downloaded to your browser. I have left in my design for the button. When the user presses this button the onclick event first calls settarget which requests a file from the server which also sets the session variable to the name of the new target such as the menu screen. The onclick event then continues (the order of the two calls does matter) to simulate a click of the standard submit button in the grid. This allows validation and data update to take place. The redirection then follows.
I have tested this code but cannot assure that it is bullet-proof. It does check to see if the browser is new or older than IE7 but does not use try-catch or other error routines. The open(“GET…false) means that the javascript waits for the server to return the file instead of the more popular asynchronous method, but there is nothing to do but wait anyway.
I hope you find this useful and I really look forward to hearing the results of others testing this code and improvements that I am sure they will add . If you see or foresee bugs or problems please post them. I expect these two buttons will prevent users from losing data by exiting a grid without a save.
Create a standard grid component and place it on an a5w page (in this example called g_onepg.a5w and the grid component name is grd_one) but set the target page after submit to a particular file, which I call redirect.a5w (instead of <self>). The file redirect.a5w, refers to a session variable and contains nothing but the following code added to the head and body section (title, link and meta name section were unchanged and not included here):
<html><head>
<%A5
target = "window.location.replace("+s_quote(session.redtarget)+");"
?"<script type='text/JavaScript'>"
?"function doRedirect()"
?"{"
?target
?"}"
?"</script>"
%>
</head>
<body onload="doRedirect()">
</body></html>
When the application server sends that file it first writes it as a file containing standard javascript. When the user presses the grid submit button that file loads and immediately redirects to the file named in the session variable. The screen does flash momentarily. The session variable is set using Ajax. In the a5w page (g_onepg.a5w) containing your component, place the following code in the head section:
<script type="text/javascript">
var xhr1 = false;
if (window.XMLHttpRequest) {
xhr1 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr1 = new ActiveXObject ("Microsoft.XMLHTTP");
}
xhr1.open("GET", "setg_onepg.a5w", false);
xhr1.send(null);
</script>
In this case I want to reload the same page so the file setg_onepg.a5w contains the code:
<html>
<head>
<meta name="generator" content="Alpha Five HTML Editor Version 9 Build 2095-3264">
<title></title>
</head>
<body>
<%A5
delete session.redtarget
dim session.redtarget as c = "g_onepg.a5w"
%>
</body></html>
When the app server sends this file it sets the session variable, which redirect.a5w will read later, in this case the name of the page with the grid component.
I also have another file on the server to set the session variable to a different target in this case called set_onemenu.a5w with the code:
<html>
<head>
<meta name="generator" content="Alpha Five HTML Editor Version 9 Build 2095-3264">
<title></title>
</head>
<body>
<%A5
delete session.redtarget
dim session.redtarget as c = "onemenu.a5w"
%>
</body></html>
Back in the a5w file (g_onepg.a5w) containing the component the following code is placed in the body section (at the bottom after the grid component, named grd_one):
<script type="text/javascript">
function settarget(){
var xhr2 = false;
if (window.XMLHttpRequest) {
xhr2 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr2 = new ActiveXObject ("Microsoft.XMLHTTP");
}
xhr2.open("GET", " set_onemenu.a5w ", false);
xhr2.send(null);
}
</script>
<div align=center>
<input type="button" value="Submit and Exit" onClick="settarget();document.forms['grd_one'].grd_one_Button_Submit.click()" style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BACKGROUND-COLOR: #f9ead6; BORDER-RIGHT: 1px solid; BORDER-: 1px solid">
</div>
You can check the name of the component and the submit button by reading the source code of the web page downloaded to your browser. I have left in my design for the button. When the user presses this button the onclick event first calls settarget which requests a file from the server which also sets the session variable to the name of the new target such as the menu screen. The onclick event then continues (the order of the two calls does matter) to simulate a click of the standard submit button in the grid. This allows validation and data update to take place. The redirection then follows.
I have tested this code but cannot assure that it is bullet-proof. It does check to see if the browser is new or older than IE7 but does not use try-catch or other error routines. The open(“GET…false) means that the javascript waits for the server to return the file instead of the more popular asynchronous method, but there is nothing to do but wait anyway.
I hope you find this useful and I really look forward to hearing the results of others testing this code and improvements that I am sure they will add . If you see or foresee bugs or problems please post them. I expect these two buttons will prevent users from losing data by exiting a grid without a save.
Comment