Solved

Problem on Loading Page

Posted on 2004-10-18
7
162 Views
Last Modified: 2010-04-09
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
Comment
Question by:suprapto45
7 Comments
 
LVL 4

Assisted Solution

by:reginab
reginab earned 60 total points
ID: 12338060
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
 
LVL 33

Accepted Solution

by:
knightEknight earned 90 total points
ID: 12338064
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
 
LVL 16

Author Comment

by:suprapto45
ID: 12354278
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 12356343
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
 
LVL 33

Expert Comment

by:knightEknight
ID: 12357419
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
 
LVL 33

Expert Comment

by:knightEknight
ID: 12357423
etc
0
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 12456252
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now