I have been a mainframe programmer for over 20 years - I have a new project that requires browser pages written in JavaScript. Please let me give some background of my code. I currently begin with a HTML page that assigns the values retrieved from a third party vendor's API to an array. I pass this array to another page to build a table full of links - when a client clicks on one of the links, two variables are put into yet another array and a third page is called, successfully passing the required data. Ultimately page 1 and page 3 will be .asp pages so that additional third party vendor API's can be called. The problem is this: after the third page is called from the second page, it displays for a second and then returns to the second page. When I click back I can see the third page, followed by the second page, and finally the first page. My question is this: why is the third page not displaying in the browser? I'm sorry if I have not posted this correctly as I really am a mainframe programmer and this is my first time doing anything code related with web pages - any guidance to resolve this issue will be greatly appreciated.
Recommended Answers
Jump to PostOk a small summary of your pages:
Page 1 - Retrieves value out of third party API
Page 2 - Receives the value from page 1 and displays a list of links
Page 3 - Receives which link is pressed and passes the data to a database of some …
Jump to PostThere doesn't seem to be any redirection in the HTML on page 3, so maybe there is either a problem with page 2 or with the asp code of page 3 (but this isn't the ASP.NET forum, so I won't be able to help if that is the case). Could …
All 8 Replies
Ok a small summary of your pages:
Page 1 - Retrieves value out of third party API
Page 2 - Receives the value from page 1 and displays a list of links
Page 3 - Receives which link is pressed and passes the data to a database of some sort
Your problem is that page 3 redirects back to page 2 when opened. Perhaps there is a redirecting javascript on page 3, changing the window.location.href after the page has been loaded? Or there is a meta-tag at the top of the page (example:
<meta http-equiv="refresh"
content="10;URL=http://www.daniweb.com">). Another possibility is that the asp code redirects the user to page 2 when finished?
Post some code that we can use :)
~G
Ok a small summary of your pages:
Page 1 - Retrieves value out of third party API
Page 2 - Receives the value from page 1 and displays a list of links
Page 3 - Receives which link is pressed and passes the data to a database of some sortYour problem is that page 3 redirects back to page 2 when opened. Perhaps there is a redirecting javascript on page 3, changing the window.location.href after the page has been loaded? Or there is a meta-tag at the top of the page (example:
<meta http-equiv="refresh" content="10;URL=http://www.daniweb.com">). Another possibility is that the asp code redirects the user to page 2 when finished?
Post some code that we can use :)
~G
This will be the first time I post code and I'm not quite sure how to do it - please pardon me if my format is incorrect. The code from my page 3 is as follows:
<html>
<head>
<title>Appointment Scheduler
</title>
<script type="text/javascript" language="javascript">
function AlertVariablesA()
{
document.write("Page 10" + "<br/>");
document.write(data[0] + "<br/>");
document.write(data[1] + "<br/>");
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
var query = window.location.search;
if (query.substring(0, 1) == "?")
{
query = query.substring(1);
}
var data = query.split(",");
for (var i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
</script>
<script type="text/javascript" language="javascript">
AlertVariablesA();
</script
</body>
</html>I don't see a refer back - would it be helpful to see the calling code from page 2? Thank you so much for your time and help.
There doesn't seem to be any redirection in the HTML on page 3, so maybe there is either a problem with page 2 or with the asp code of page 3 (but this isn't the ASP.NET forum, so I won't be able to help if that is the case). Could you post the code of page 2?
~G
There doesn't seem to be any redirection in the HTML on page 3, so maybe there is either a problem with page 2 or with the asp code of page 3 (but this isn't the ASP.NET forum, so I won't be able to help if that is the case). Could you post the code of page 2?
~G
Page 3 is not currently an ASP file - currently it is client-side only. The code for page 2 is as follows (important to note - the first script in the body parses the passed data from page 1):
<html>
<head>
<title>Appointment Scheduler
</title>
<script type="text/javascript" language="javascript">
function PrcsRow1a()
{
var data1 = new Array();
data1[0] = document.getElementById("RAC2").innerHTML;
data1[1] = document.getElementById("RAC3").innerHTML;
var packedR="";
for (i = 0; (i < data1.length); i++)
{
if (i > 0)
{
packedR += ",";
}
packedR += escape(data1[i]);
}
window.location = ("mypage10 new.html?"+packedR);
window.open = ("mypage10 new.html?"+packedR);
}
</script>
</head>
<body>
<form name="apptcalendar">
<script type="text/javascript" language="javascript">
var query = window.location.search;
if (query.substring(0, 1) == "?")
{
query = query.substring(1);
}
var data = query.split(",");
for (i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
</script>
<h1>Available Appointments</h1>
<h4>Choose an Appointment from the following 26 days</h4>
<table border="1">
<tr>
<th>Preferred</th>
<th>Appointment Day</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
<th>All Day</th>
</tr>
<tr>
<td id="RAC1"></td>
<td id="RAC2"></td>
<td>
<a href="" id="RAC3" onClick="javascript:PrcsRow1a();">
Morning Appt
</a>
</td>
<td>
<a href="" id="RAC4" onClick="javascript:PrcsRow1b();">
Afternoon Appt
</a>
</td>
<td>
<a href="" id="RAC5" onClick="javascript:PrcsRow1c();">
Evening Appt
</a>
</td>
<td>
<a href="" id="RAC6" onClick="javascript:PrcsRow1d();">
All Day Appt
</a>
</td>
<script type="text/javascript" language="javascript">
InitVariablesA();
</script
</tr>
</table>
<button type="Submit" name="Cancel" value="Cancel"/>
CANCEL APPOINTMENT
</button>
</form>
</body>
</html>Perhaps I am not calling the next page correctly - all of the passed data is there and correct so the values are moving to page 3 - it almost seems that page 3 will not stay on top - I have verified that we return to page 2 by using the alert command after calling page 3. Again, thanks for your time, trouble, and help.
I finally found out what was causing all this: after the link is clicked, the browser executes the javascript and redirects the page to the packedR, but after that the browser redirects itself to the href in the <a> element. The solution: replace <a></a> with <span></span>:
This:
<a href="" id="RAC3" onClick="javascript:PrcsRow1a();">Morning Appt</a>Needs to be:
<span id="RAC3" onclick="javascript:PrcsRow1a();" class="spanLink">Morning Appt</span>You can beautify the text in the span using css:
<style type="text/css">
.spanLink {
color:blue;
text-decoration:none;
}
.spanLink:hover {
color:red;
text-decoration:underline;
}
</style>~G
I finally found out what was causing all this: after the link is clicked, the browser executes the javascript and redirects the page to the packedR, but after that the browser redirects itself to the href in the <a> element. The solution: replace <a></a> with <span></span>:
This:
<a href="" id="RAC3" onClick="javascript:PrcsRow1a();">Morning Appt</a>Needs to be:
<span id="RAC3" onclick="javascript:PrcsRow1a();" class="spanLink">Morning Appt</span>You can beautify the text in the span using css:
<style type="text/css"> .spanLink { color:blue; text-decoration:none; } .spanLink:hover { color:red; text-decoration:underline; } </style>~G
I modified my code as you suggested, but for the time being I have left out the style portion in order to minimize the number of changes, and have now lost the links in my table so I never get to the third page - did I goof something? Here is a copy of my new code:
<html>
<head>
<title>Appointment Scheduler
</title>
<script type="text/javascript" language="javascript">
function PrcsRow1a()
{
var data1 = new Array();
data1[0] = document.getElementById("RAC2").innerHTML;
data1[1] = document.getElementById("RAC3").innerHTML;
var packedR="";
for (i = 0; (i < data1.length); i++)
{
if (i > 0)
{
packedR += ",";
}
packedR += escape(data1[i]);
}
window.location = ("mypage10 new.html?"+packedR);
window.open = ("mypage10 new.html?"+packedR);
}
</script>
</head>
<body>
<form name="apptcalendar">
<script type="text/javascript" language="javascript">
var query = window.location.search;
if (query.substring(0, 1) == "?")
{
query = query.substring(1);
}
var data = query.split(",");
for (i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
</script>
<h1>Available Appointments</h1>
<h4>Choose an Appointment from the following 26 days</h4>
<table border="1">
<tr>
<th>Preferred</th>
<th>Appointment Day</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
<th>All Day</th>
</tr>
<tr>
<td id="RAC1"></td>
<td id="RAC2"></td>
<td>
<span id="RAC3" onClick="javascript:PrcsRow1a();" class="spanLink">
Morning Appt
</span>
</td>
<td>
<span id="RAC4" onClick="javascript:PrcsRow1b();" class="spanLink">
Afternoon Appt
</span>
</td>
<td>
<span id="RAC5" onClick="javascript:PrcsRow1c();" class="spanLink">
Evening Appt
</span>
</td>
<td>
<span id="RAC6" onClick="javascript:PrcsRow1d();" class="spanLink">
All Day Appt
</span>
</td>
<script type="text/javascript" language="javascript">
InitVariablesA();
</script
</tr>
</table>
<button type="Submit" name="Cancel" value="Cancel"/>
CANCEL APPOINTMENT
</button>
</form>
</body>
</html>I modified my code as you suggested, but for the time being I have left out the style portion in order to minimize the number of changes, and have now lost the links in my table so I never get to the third page - did I goof something? Here is a copy of my new code:
<html> <head> <title>Appointment Scheduler </title> <script type="text/javascript" language="javascript"> function PrcsRow1a() { var data1 = new Array(); data1[0] = document.getElementById("RAC2").innerHTML; data1[1] = document.getElementById("RAC3").innerHTML; var packedR=""; for (i = 0; (i < data1.length); i++) { if (i > 0) { packedR += ","; } packedR += escape(data1[i]); } window.location = ("mypage10 new.html?"+packedR); window.open = ("mypage10 new.html?"+packedR); } </script> </head> <body> <form name="apptcalendar"> <script type="text/javascript" language="javascript"> var query = window.location.search; if (query.substring(0, 1) == "?") { query = query.substring(1); } var data = query.split(","); for (i = 0; (i < data.length); i++) { data[i] = unescape(data[i]); } </script> <h1>Available Appointments</h1> <h4>Choose an Appointment from the following 26 days</h4> <table border="1"> <tr> <th>Preferred</th> <th>Appointment Day</th> <th>Morning</th> <th>Afternoon</th> <th>Evening</th> <th>All Day</th> </tr> <tr> <td id="RAC1"></td> <td id="RAC2"></td> <td> <span id="RAC3" onClick="javascript:PrcsRow1a();" class="spanLink"> Morning Appt </span> </td> <td> <span id="RAC4" onClick="javascript:PrcsRow1b();" class="spanLink"> Afternoon Appt </span> </td> <td> <span id="RAC5" onClick="javascript:PrcsRow1c();" class="spanLink"> Evening Appt </span> </td> <td> <span id="RAC6" onClick="javascript:PrcsRow1d();" class="spanLink"> All Day Appt </span> </td> <script type="text/javascript" language="javascript"> InitVariablesA(); </script </tr> </table> <button type="Submit" name="Cancel" value="Cancel"/> CANCEL APPOINTMENT </button> </form> </body> </html>
Sorry - didn't realize that the <style> section was integral to the <spam> tag - I have added all of your suggested code but the links remain missing. Here is the code again:
<html>
<head>
<title>Appointment Scheduler
</title>
<style type="text/css">
.spanLink
{
color:blue;
text-decoration:none;
}
.spanLink:hover
{
color:red;
text-decoration:underline;
}
</style>
<script type="text/javascript" language="javascript">
function PrcsRow1a()
{
var data1 = new Array();
data1[0] = document.getElementById("RAC2").innerHTML;
data1[1] = document.getElementById("RAC3").innerHTML;
var packedR="";
for (i = 0; (i < data1.length); i++)
{
if (i > 0)
{
packedR += ",";
}
packedR += escape(data1[i]);
}
window.location = ("mypage10 new.html?"+packedR);
window.open = ("mypage10 new.html?"+packedR);
}
</script>
</head>
<body>
<form name="apptcalendar">
<script type="text/javascript" language="javascript">
var query = window.location.search;
if (query.substring(0, 1) == "?")
{
query = query.substring(1);
}
var data = query.split(",");
for (i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
</script>
<h1>Available Appointments</h1>
<h4>Choose an Appointment from the following 26 days</h4>
<table border="1">
<tr>
<th>Preferred</th>
<th>Appointment Day</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
<th>All Day</th>
</tr>
<tr>
<td id="RAC1"></td>
<td id="RAC2"></td>
<td>
<span id="RAC3" onClick="javascript:PrcsRow1a();"
class="spanLink">Morning Appt</span>
</td>
<td>
<span id="RAC4" onClick="javascript:PrcsRow1b();"
class="spanLink">Afternoon Appt</span>
</td>
<td>
<span id="RAC5" onClick="javascript:PrcsRow1c();"
class="spanLink">Evening Appt</span>
</td>
<td>
<span id="RAC6" onClick="javascript:PrcsRow1d();"
class="spanLink">All Day Appt</span>
</td>
<script type="text/javascript" language="javascript">
InitVariablesA();
</script
</tr>
</table>
<button type="Submit" name="Cancel" value="Cancel"/>
CANCEL APPOINTMENT
</button>
</form>
</body>
</html>I got it! Many many thanks to Graphix for all of the help provided. Following is a copy of the code that I found to work in both FireFox and IE.
<html>
<head>
<title>Appointment Scheduler
</title>
<style type="text/css">
.spanLink
{
color:blue;
text-decoration:underline;
}
.spanLink:hover
{
color:red;
text-decoration:underline;
}
</style>
<script type="text/javascript" language="javascript">
function PrcsRow1a()
{
var data1 = new Array();
data1[0] = document.getElementById("RAC2").innerHTML;
data1[1] = document.getElementById("RAC3").innerHTML;
var packedR="";
for (i = 0; (i < data1.length); i++)
{
if (i > 0)
{
packedR += ",";
}
packedR += escape(data1[i]);
}
window.location = ("mypage10 new.html?"+packedR);
window.open = ("mypage10 new.html?"+packedR);
}
</script>
</head>
<body>
<form name="apptcalendar">
<script type="text/javascript" language="javascript">
var query = window.location.search;
if (query.substring(0, 1) == "?")
{
query = query.substring(1);
}
var data = query.split(",");
for (i = 0; (i < data.length); i++)
{
data[i] = unescape(data[i]);
}
</script>
<h1>Available Appointments</h1>
<h4>Choose an Appointment from the following 26 days</h4>
<table border="1">
<tr>
<th>Preferred</th>
<th>Appointment Day</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
<th>All Day</th>
</tr>
<tr>
<td id="RAC1"></td>
<td id="RAC2"></td>
<td>
<a><span id="RAC3" onClick="javascript:PrcsRow1a();"
class="spanLink">Morning Appt</span></a>
</td>
<td>
<a><span id="RAC4" onClick="javascript:PrcsRow1b();"
class="spanLink">Afternoon Appt</span></a>
</td>
<td>
<a><span id="RAC5" onClick="javascript:PrcsRow1c();"
class="spanLink">Evening Appt</span></a>
</td>
<td>
<a><span id="RAC6" onClick="javascript:PrcsRow1d();"
class="spanLink">All Day Appt</span></a>
</td>
<script type="text/javascript" language="javascript">
InitVariablesA();
</script
</tr>
</table>
<button type="Submit" name="Cancel" value="Cancel"/>
CANCEL APPOINTMENT
</button>
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.