Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Problem on Loading Page

Posted on 2004-10-18
7
164 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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