• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3009
  • Last Modified:

URGENT -- Javascript page refresh after onChange of dropdown list - Safari problem

I am having browser issues with a login page that uses Javascript and a series of dependent dropdown lists. http://www.simceo.org/tlogin.jsp.

Users select their country, state, city, and school from dropdown lists. With each selection, the page refreshes and populates the next dropdown list with the appropriate items.

For example:
 - Select USA as country
 - Select Iowa as state
 - Select Sigourney as city
 - Select Sweet Valley High, Skunk River Investors as the class

We are having problems with Safari and the page refresh function in javascript is not working -- that is, with the onChange of the dropdown, the page does not refresh as it does in all other browsers across Mac and Win.

This is a JSP page, but I don't think that the Java files are the problem. It seems to be the page refresh function.

I have provide relevant bits of the code below.

Please let me know if there is any additional information needed to be able to help answer this question. Our application must be able to work on Safari as it's an educational product and there is a high penetration of Mac/Safari combos in schools. That is why this is such an urgent problem for us.

Thanks
Jay

The javascript functions are:

     <script language="JavaScript">
               function refreshCountry()
               {
                    document.all.TeacherLogin.stateid.value = "-1";
                    document.all.TeacherLogin.cityid.value = "-1";
                    document.all.TeacherLogin.submit();
               }
               function refreshState()
               {
                    document.all.TeacherLogin.cityid.value = "-1";
                    document.all.TeacherLogin.submit();
               }
               function refreshCity()
               {
                    document.all.TeacherLogin.submit();
               }
          </script>

The relevent coding of the login table is:

    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width=100 align=right>
          Country:                              </td>
    <td width="146">
      <select name=countryid onChange="refreshCountry(); return false" style="width: 140px; ">
        <prefix:TagCountry />
          </select>                                  </td>
    <td><span class="inputComment">After selecting from each dropdown, please wait for page to reload.</span></td>
    </tr>
      <tr>
        <td width="100" align=right>
          State:                              </td>
    <td>
      <select name=stateid onChange="refreshState(); return false" style="width: 140px; ">
        <option value="-1">[Select]</option>
             <prefix:TagState />
               </select>                             </td>
    <td><span class="inputComment">* if outside  USA, select International. </span></td>
    </tr>
      <tr>
       <td width="100" align=right>
          City:                              </td>
  <td>
      <select name=cityid onChange="refreshCity(); return false" style="width: 140px; ">
      <option value="-1">[Select]</option>
      <prefix:TagCity />
          </select>                              </td>
      <td>&nbsp;</td>
    </tr>
      <tr>
        <td width="100" align=right>
          Class:                              </td>
  <td colspan="2">
      <select name=classid style="width: 400px; ">
      <option value="-1">[Select]</option>
      <prefix:TagClass />
          </select>                              </td>
        </tr>
     <tr>
       <td width="100" align="right">Teacher ID:</td>
  <td><input type="text" name="id" style="width: 140px;"></td>
     <td>&nbsp;</td>
    </tr>
      <tr>
      <td width="100" align="right">Password:</td>
  <td >
      <input type="PASSWORD" name="password" style="width: 140px;">                    </td>
      <td >&nbsp;</td>
    </tr>
      <tr>
        <td width="100" align="right">&nbsp;</td>
    <td ><input type="submit" value="Login" style="width: 80px;" class="" onMouseOver="this.className='hvr'" onMouseOut="this.className=''"/></td>
        <td >&nbsp;</td>
      </tr>
</table>
0
atwoodj
Asked:
atwoodj
  • 5
  • 2
  • 2
  • +1
1 Solution
 
0h4crying0utloudCommented:


I've seen a problem like this when not using the more standard "getElementById" instead of "document.all" which only worked on IE as far as I know.

     <script language="JavaScript">
               function refreshCountry()
               {
                    document.getElementById("stateid").value = "-1";
                    document.getElementById("cityid").value = "-1";
                    document.getElementById("TeacherLogin").submit();
               }
               function refreshState()
               {
                    document.getElementById("cityid").value = "-1";
                    document.getElementById("TeacherLogin").submit();
               }
               function refreshCity()
               {
                    document.getElementById("TeacherLogin").submit();
               }
          </script>
0
 
thirdCommented:
or if you don't want to add "id" attributes use,

document.TeacherLogin

or

document.forms['TeacherLogin']

instead of

document.all.TeacherLogin

0
 
atwoodjAuthor Commented:
Oh4 and third

Thanks for the replies.

I've tested using the ID attributes, but then the refresh function didn't quite work. I've also tried removing the ".all" and that seems to be ok on PC both Firefox and IE. That's what I'm going with for now.

I need to test this using Safari. I am away from home right now and do not have an accessible Mac here. Do either of you (or any other people reading this) have Safari loaded on a Mac? Could I ask that somebody test out with the following login info??

 - Select USA as country
 - Select Iowa as state (wait for refresh)
 - Select Sigourney as city (wait for refresh)
 - Select Sweet Valley High, Skunk River Investors as the class
 - Teacher ID: jay
 - Password: jaybob

This is a purely test account with limited rights.

In the past, once Iowa was selected using Safari, the refresh function did not work. I'd REALLY appreciate any Mac testing help on this. It should be quite straight-forward.

Thanks
Jay
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
atwoodjAuthor Commented:
PS. The testing page is www.simceo.org/tlogin.jsp

0
 
thirdCommented:
hi atwoodj,

sorry don't have a mac and safari either. i have searched the net and looked for safari emulator and most responses tells that the closest browser similar to Safari is Konqueror. I have one on my linux box and the refresh works well when I test it so I guess it will also work the same on safari when you test it on your mac.
0
 
Michel PlungjanIT ExpertCommented:
Here is a LOT more compatible way - you should not set the value of a dropdown.

The following will work in NS3+ and IE3.2+
<script language="JavaScript">
function refreshCountry(theSel)
{
  theSel.form.stateid.selectedIndex= -1; // or 0 if you want the first option to be selected
  theSel.form.cityid.selectedIndex=-1;
  theSel.fom.submit();
}
function refreshState(theSel)
{
  theSel.form.cityid.selectedIndex=-1;
  theSel.form.submit();
}
function refreshCity(theSel)
{
  theSel.form.submit();
}
</script>

and then change

onChange="refreshCountry(); return false"
to
onChange="refreshCountry(this)"
and
onChange="refreshState(); return false"
to
onChange="refreshState(this)"

and lastly
onChange="refreshCity(); return false"
to
onChange="refreshCity(this)"
0
 
atwoodjAuthor Commented:
Mplungjan

Thank you for the alternate coding. I have implemented this code and will now have to test it on a Mac using Safari. So far it has worked successfully on IE and Firefox on Windows. Do you think this code would work well on Safari in your opinion?

If anyone has Safari installed on a Mac, please give the page a test and let me know your feedback. I am going to try to get my hands on a Mac tonight to test it as well.

After I'm certain the new code works, I'll close the question and award points.

Thanks
Jay
0
 
Michel PlungjanIT ExpertCommented:
The code I gave you is the most standard possible.
It is code that works on old and new browsers.
If it does not work in safari, then you should try with a completely bare form to make sure it is not some rendering problem

Michel
0
 
atwoodjAuthor Commented:
Michel
I will do some testing. I trust your experience and thank you for your contribution. Results to follow soon.
Cheers
Jay
0
 
atwoodjAuthor Commented:
Michel
Thank you for the coding. It has worked well!

I have a similar problem with another login page that was coded by a different programmer with some slightly different coding. I will try to implement the solution again. Hopefully it works!!

Cheers
Jay
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 5
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now