0

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.

2
Contributors
8
Replies
9
Views
7 Years
Discussion Span
Last Post by LoriM
0

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

0

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

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.

0

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

0

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.

0

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

Edited by Graphix: n/a

0

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>
0

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>
0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.