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

Problem on Loading Page

Hi experts,

I have one simple question. First, I am developing intranet application using JSP, Struts and ORACLE. Well, the question is not about Java or JSP but about HTML programming.

I have a form where it contains two comboboxes and many textboxes; the page itself can be scrolled because so many components there. Well, the second combobox's value depends on the first combobox. So after I do select the value in the first combobox, the second combobox will automatically be loaded with some value based on the choice in the first combobox. To accomplish it, well, the page must be reloaded but of course with parameter at behind for some processing. It works great!

The question starts to come when the first combobox is in the middle of the page. After I select the value, it will reload the page as normal but the page loaded at the beginning of the form instead of back to the where the user chooses the combobox. What I want is after the page loaded, it will return the position to the first combobox and not beginning of the page (in the middle of the page). It lets the user to fill in the form easily.

Any suggestions? Well, I am open to JavaScript or HTML but no VBScript. I appreciate all of your suggestions.

Best Regards
David
0
suprapto45
Asked:
suprapto45
2 Solutions
 
reginabCommented:
just do a javascript focus.  I am guessing all of these components already are properly named so the jsp works correctly so the addition of javascript onload.focus should work great for this.  go here for details.
http://javascript.internet.com/page-details/focus-onload.html
0
 
knightEknightCommented:
You can avoid the reload altogether if you are willing to use javascript.  Have the JSP create javascript arrays in a similar manner as the sample below -- which uses States and Cities:


<HTML>
<HEAD>
<TITLE>Dynamic SELECTs</title>
<SCRIPT language='JavaScript'>
<!-- //

 // create js arrays to hold the data for selCity

 var aryCityData = new Array();

 aryCityData[0] = new Array();
 aryCityData[0][0] = new Option('Select a State','0');

 aryCityData[1] = new Array();
 aryCityData[1][0] = new Option('Los Angeles','301');
 aryCityData[1][1] = new Option('Oakland','304');
 aryCityData[1][2] = new Option('Rio Linde','305');
 aryCityData[1][3] = new Option('San Diego','302');
 aryCityData[1][4] = new Option('San Fransisco','303');

 aryCityData[2] = new Array();
 aryCityData[2][0] = new Option('Miami','101');
 aryCityData[2][1] = new Option('Orlando','102');
 aryCityData[2][2] = new Option('Tampa','103');

 aryCityData[3] = new Array();
 aryCityData[3][0] = new Option('Abilene','201');
 aryCityData[3][1] = new Option('Austin','202');
 aryCityData[3][2] = new Option('Dallas','203');
 aryCityData[3][3] = new Option('Houston','204');


 function reloadCities(curStateIndex)  // pass in the current State index
 {
    if ( curStateIndex < 0 ) return;  // no state selected, so do nothing

    var aryCityOpts = document.myform.selCity.options;  // points to selCity options array

    aryCityOpts.length=0;  // first, clear the current City options ...

    // then re-load the City options with values for the current State
    for ( var i=0,n=aryCityData[curStateIndex].length; i<n; i++ )
    {
       //// the line below no longer works in IE5 (it works in IE4 and NS4+).
       // aryCityOpts[aryCityOpts.length-1] = new Option(aryCityData[curStateIndex][i].text,aryCityData[curStateIndex][i].value);
       //// therefore, it now takes three lines to do the same thing:

       aryCityOpts.length++;  // add a new Option, then put data in it (below)
       aryCityOpts[aryCityOpts.length-1].text  = aryCityData[curStateIndex][i].text;
       aryCityOpts[aryCityOpts.length-1].value = aryCityData[curStateIndex][i].value;
    }
 }

// -->
</script>

</head>

<BODY onLoad='document.myform.selState.focus();'>
 <FORM name='myform' method='post' action='whatever.asp' onSubmit='return(false);'>

   State: &nbsp;
   <SELECT name='selState' size='1' onChange='reloadCities(this.selectedIndex);'>
     <OPTION value='0'></option>
     <OPTION value='30'>California</option>
     <OPTION value='10'>Florida</option>
     <OPTION value='20'>Texas</option>
   </select><P>

   City: &nbsp; &nbsp;
   <SELECT name='selCity' size='1' onChange='alert(this.options[this.selectedIndex].value)'>
     <OPTION value=''>Select a State</option>
     <OPTION></option>
     <OPTION></option>
     <OPTION></option>
   </select><P>

 </form>
</body>
</html>
0
 
suprapto45Author Commented:
Well, thanks knightEknight, but loading data from JavaScript is not what I intend to do, the data are obtained from database.

Thanks reginab, I will try yours.

Any other suggestions?

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
[ fanpages ]IT Services ConsultantCommented:
Set an anchor tag before the combobox you are selecting from & append this to the URL for reload.

PS. If the data in your database is static, there is no reason (other than perhaps quantity of data) why you cannot "cache" it locally (in Javascript) so that you do not have to return to the server & reload the page.

BFN,

fp.
0
 
knightEknightCommented:
suprap,
You can create the javascript arrays from the database.  

var i=0,j=0;
aryCityData[i] = new Array();

<%
  while not rs.eof
%>
   aryCityData[i][j++] = new Option('<%=rs(0)%>','<%=rs(1)%>');
0
 
knightEknightCommented:
etc
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi,

Did you try my initial suggestion:

"Set an anchor tag before the combobox you are selecting from & append this to the URL for reload."


I think this will address your original question:

"What I want is after the page loaded, it will return the position to the first combobox and not beginning of the page (in the middle of the page)."

BFN,

fp.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now