?
Solved

Problem on Loading Page

Posted on 2004-10-18
7
Medium Priority
?
167 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
[X]
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
7 Comments
 
LVL 4

Assisted Solution

by:reginab
reginab earned 240 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 360 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
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.

 
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

Introducing Priority Question

Increase expert visibility of your issues by participating in Priority Question, our latest feature for Premium and Team Account holders. Adjust the priority of your question to get emergent issues in front of subject-matter experts for help when you need it most.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

771 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