I was wondering would it be possible for JSP pages to update the value of the a combobox without reloading the page. Like for example with javascript I know you can do it there where ONCHANGE you call a function to change the values of the combobox and taht would work. But I was wondering can you do something like that with JSP maybe using some kind of custom tag or something.

Brian Glodde

This is really dependent on the amount of options you're putting in the options box.

The easiest way is to grab your data from the db, then write Javascript arrays (from the server-side) that can be used conditionally, triggered from the onchange event of the select list.

[Example taken from webreference.com]

...

<SCRIPT LANGUAGE="JavaScript">

v = false;

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">

if (typeof(Option)+"" != "undefined") v=true;

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

if(v){a=new Array(22);}

function getFormNum (formName) {
	var formNum =-1;
	for (i=0;i<document.forms.length;i++){
		tempForm = document.forms[i];
		if (formName == tempForm) {
			formNum = i;
			break;
		}
	}
	return formNum;
}

function jmp(form, elt)
{
	if (form != null) {
		with (form.elements[elt]) {
			if (0 <= selectedIndex)
				location = options[selectedIndex].value;
		}
	}
}

var catsIndex = -1;
var itemsIndex;

if (v) { // ns 2 fix
function newCat(){
	catsIndex++;
	a[catsIndex] = new Array();
	itemsIndex = 0;
}

function O(txt,url) {
	a[catsIndex][itemsIndex]=new myOptions(txt,url);
	itemsIndex++;
}

function myOptions(text,value){
	this.text = text;
	this.value = value;
}

// fill array

newCat();
O("3-D Animation","/3d/");     // <-- THESE VALUES CAN
O("Design","/dlab/");          // <-- COME FROM THE DB
O("DHTML","/dhtml/");          // ie O("<%=dbvalueTEXT%>","<%=dbvalueURL%>");
O("E-Commerce","/ecommerce/mm/");
O("Graphics","/graphics/");
O("HTML","/html/");
O("JavaScript","/js/");

newCat();
O("Authoring","/authoring/");
O("E-Commerce","/ecommerce/");
O("Internet","/internet/");
O("Multimedia","/multimedia/");
O("Programming","/programming/");
O("Promotion","/promotion/");

newCat();
O("Domains","/services/dns/");
O("Graphics","/services/graphics/");
O("News Harvester","/headlines/nh/");
O("Reference","/services/reference/");
O("Search","/search.cgi");
O("Validation","/services/validation/");

newCat();
O("Awards","/awards.html");
O("In the News","/inthenews.html");
O("New Features","/features.html");
O("Linking Info","/link.html");
O("Lore","/lore.html");
O("Media Kit","http://www.internet.com/mediakit/");
O("Press Releases","/press/");
O("Suggest","/cgi-bin/suggest.cgi");
} // if (v)

function relate(formName,elementNum,j) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
	formNum++; // reference next form, assume it follows in HTML
	with (document.forms[formNum].elements[elementNum]) {
		for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
		for(i=0;i < a[j].length;i++){
			options[i] = new Option(a[j][i].text,a[j][i].value); 
		}
		options[0].selected = true;
	}
 }
} else {
jmp(formName,elementNum);
}
}

function IEsetup(){
	if(!document.all) return;
	IE5 = navigator.appVersion.indexOf("5.")!=-1;
	if(!IE5) {
		for (i=0;i<document.forms.length;i++) {
			document.forms[i].reset();
		}
	}
}

window.onload = IEsetup;

</SCRIPT></HEAD>
<BODY BGCOLOR="#ffffff">

<TABLE">
<TR VALIGN="TOP"">
<TD">
Choose a subject:<BR">
<FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" onChange="relate(this.form,0,this.selectedIndex)">
<OPTION VALUE="/experts/">Experts
<OPTION VALUE="/index2.html">Contents
<OPTION VALUE="/services/">Services
<OPTION VALUE="/about.html">About
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM></TD">
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE">
<B">
---></B">
</TD">


<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/ecommerce/mm/">E-Commerce
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.webreference.com">
</FORM></TD>
</TR>
</TABLE></CENTER>
...

Also see these examples:
» Dynamic Option Lists

» Writing Dependent Lists from Server side code
Note: This one uses ASP as the server language but the same theories apply.

» City/State Example

Finally, if the amount of data you need to populate the select list is enough that it would slow down the loading of your page, you can look into remote scripting options that will allow you to trigger a background database query without reloading the page. Remote scripting is beyond the scope of this thread...

Hope that helps you get started!

Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

About | Sitemap | Contact