Dynamic population of second list box based on the selection of first list
[nobr]Hai Friends,
I have the code like this.
Here my issue is: when the user accesses this page he will get the topic and related categories in the drop down boxes. but when the user changes the topic it needs to populate the categories from the database and kept the topic same for the respective categories. so how can i do this?
<form name="questionForm" method="post" action="listQuestions.lgs">
<table bgcolor="F8D8D8" cellspacing="2" cellpadding="2" align="center"
style="margin-top: 100px">
<tr>
<td>Topics:</td>
<td><select name="topic">
<c:forEach items="${model.topics}" var="topic">
<option value="<c:out value="${topic.topicId}" />"><c:out
value="${topic.topicName}" /></option>
</c:forEach>
</select></td>
<td>Categories:</td>
<td><select name="category">
<c:forEach items="${model.categories}" var="category">
<option value="<c:out value="${category.categoryId}" />"><c:out
value="${category.categoryName}" /></option>
</c:forEach>
</select></td>
<tr>
<td><a
href="addQuestion.lgs?categoryId=2<c:out value="${category.categoryId}"/>">Add
New Question</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Questions under this Category:</td>
<td><c:if test="${model.questions} == null">
<c:out value="no questions found" />
</c:if> <c:if test="${model.questions} != null">
<c:forEach items="${model.questions}" var="question">
<table>
<tr>
<c:out value="${question.questionDesc}" />
</tr>
</table>
</c:forEach>
</c:if></td>
</tr>
<tr>
<td colspan="2"><input type="submit" /></td>
</tr>
</table>
</form>
regards,
phani.[/nobr]
# 1
When ever you change the topic value, use AJAX to populate the categories.SirG
# 2
Well there are many ways of doing it....
In the days when XmlHttpRequest Object was not invented ppl used to achieve this using Hidden iframe and then updating parent frame dropdown by calling a javascript function onload of the page. or by auto refershing the page after saving the form state inside the scope of session.
However,using XmlHttpRequest Object (AJAX) nowdays is one of the smater ways of acheving tasks as these.
checkout one such examples where i've posted a similar example in the last reply
http://forum.java.sun.com/thread.jspa?threadID=5170019
hope this might help :)
REGARDS,
RaHuL
# 3
Hi Rahul,actully at server side we are using spring framework and and hibernate. so is it suggested link to go through.
# 4
Hi Rahul,
I followed the link what you have mentioned and i need clarification in regarding this....
function getResponseAction(){
// Verifying State & Status
if(verifyReadyState(xmlhttp) == true){
// Building a DOM parser from Response Object
var response = xmlhttp.responseXML.documentElement
// Deleting all the Present Elements in the Drop-Down Box
drRemove()
// Checking for the Root Node Tag
var x = response.getElementsByTagName("option")
var val;
var tex;
var optn;
for(var i = 0;i < x.length; i++){
optn = document.createElement("OPTION")
var er
// Checking for the tag which holds the value of the Drop-Down combo element
val = x.getElementsByTagName("val")
{
try{
// Assigning the value to a Drop-Down Set Element
optn.value = val[0].firstChild.data
} catch(er){
}
}
// Checking for the tag which holds the Text of the Drop-Down combo element
tex = x.getElementsByTagName("text")
{
try{
// Assigning the Text to a Drop-Down Set Element
optn.text = tex[0].firstChild.data
} catch(er){
}
}
// Adding the Set Element to the Drop-Down
document.questionForm.category.options.add(optn)
}
}
}
but in my springframe work i have the controller like this where i am putting category object in the context and i am retrieving this in my listQuestions.jsp like this
<tr>
<td>Topics:</td>
<td><select name="topic" onchange="populateCombo(this.value)">
<c:forEach items="${model.topics}" var="topic">
<option value="<c:out value="${topic.topicId}" />"><c:out
value="${topic.topicName}" /></option>
</c:forEach>
</select></td>
<td>Categories:</td>
<td><select name="category">
<c:forEach items="${model.categories}" var="category">
<option value="<c:out value="${category.categoryId}" />"><c:out
value="${category.categoryName}" /></option>
</c:forEach>
</select></td>
<tr>
package com.lgsglobal.lgsexam.spring.controllers;
import java.util.HashMap;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;
import com.lgsglobal.lgsexam.dao.CategoryDAO;
import com.lgsglobal.lgsexam.dao.QuestionDAO;
import com.lgsglobal.lgsexam.dao.TopicDAO;
import com.lgsglobal.lgsexam.hibernate.pojos.Category;
import com.lgsglobal.lgsexam.hibernate.pojos.Topic;
public class ListQuestionsController implements Controller {
private TopicDAO topicDAO = null;
public void setTopicDAO(TopicDAO topicDAO) {
this.topicDAO = topicDAO;
}
public TopicDAO getTopicDAO() {
return this.topicDAO;
}
private QuestionDAO questionDAO = null;
public void setQuestionDAO(QuestionDAO questionDAO) {
this.questionDAO = questionDAO;
}
public QuestionDAO getQuestionDAO() {
return this.questionDAO;
}
private CategoryDAO categoryDAO = null;
public void setCategoryDAO(CategoryDAO categoryDAO) {
this.categoryDAO = categoryDAO;
}
public CategoryDAO getCategoryDAO() {
return this.categoryDAO;
}
public ModelAndView handleRequest(HttpServletRequest request,
HttpServletResponse response) throws Exception {
HashMap mymodel = new HashMap();
List topics = topicDAO.getTopics();
mymodel.put("topics", topics);
if (request.getParameter("topic") != null) {
System.out.println("in topics condition to retrieve questions");
int topicId = Integer.parseInt(request.getParameter("topic"));
Topic topic = topicDAO.getTopic(topicId);
List categories = categoryDAO.getCategories(topic);
mymodel.put("categories", categories);
System.out.println("exiting topics condition to retrieve questions");
}
if (request.getParameter("category")!= null) {
System.out.println("in category condition to retrieve questions");
int categoryId = Integer.parseInt(request.getParameter("category"));
Category category = categoryDAO.getCategory(categoryId);
List questions = questionDAO.getQuestions(category);
mymodel.put("questions", questions);
}
return new ModelAndView("listQuestions", "model", mymodel);
}
}
so here my issue is like how i can populate categories in the category(dependent combo). so please let me know the solution.
awaiting for reply. for any furthere info please let me know....
regards,
Phani.K
# 5
hi,
i also face the same problem in my application, when i chage the country name the state would be populated automaticaly. i recover this problem. i paste the code here for u.
i am also using the same Spring + Hibernate technology.
Code For State Model.
package com.pri.eauditnet.model;
import java.util.Date;
/**
* State Model class
* @author rajesh
*
*/
public class State {
private int stateID;
private String stateCode;
private String countryCode;
private String stateName;
private int enteredByUserID;
private Date enteredDate=new Date();
private int updatedByUserID;
private Date updatedDate=new Date();
private Country country;
/**
* @return (String)
*/
public String getCountryCode() {
return countryCode;
}
/**
* @param (String countryCode)
*/
public void setCountryCode(String countryCode) {
this.countryCode = countryCode;
}
/**
* @return (String)
*/
public int getEnteredByUserID() {
return enteredByUserID;
}
/**
* @param (String enteredByUserID)
*/
public void setEnteredByUserID(int enteredByUserID) {
this.enteredByUserID = enteredByUserID;
}
/**
* @return (Date)
*/
public Date getEnteredDate() {
return enteredDate;
}
/**
* @param (Date enteredDate)
*/
public void setEnteredDate(Date enteredDate) {
this.enteredDate = enteredDate;
}
/**
* @return (String)
*/
public String getStateCode() {
return stateCode;
}
/**
* @param (String stateCode)
*/
public void setStateCode(String stateCode) {
this.stateCode = stateCode;
}
/**
* @return (int)
*/
public int getStateID() {
return stateID;
}
/**
* @param (int stateID)
*/
public void setStateID(int stateID) {
this.stateID = stateID;
}
/**
* @return (String)
*/
public String getStateName() {
return stateName;
}
/**
* @param (String stateName)
*/
public void setStateName(String stateName) {
this.stateName = stateName;
}
/**
* @return (String)
*/
public int getUpdatedByUserID() {
return updatedByUserID;
}
/**
* @param (String updatedByUserID)
*/
public void setUpdatedByUserID(int updatedByUserID) {
this.updatedByUserID = updatedByUserID;
}
/**
* @return (Date)
*/
public Date getUpdatedDate() {
return updatedDate;
}
/**
* @param (Date updatedDate)
*/
public void setUpdatedDate(Date updatedDate) {
this.updatedDate = updatedDate;
}
/**
* @return (Country)
*/
public Country getCountry() {
return country;
}
/**
* @param (Country country)
*/
public void setCountry(Country country) {
this.country = country;
}
}
Code for State.jsp
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@page contentType="text/xml" %>
<?xml version="1.0"?>
<root>
<c:forEach var="x" items="${states}">
<child>
<id>${x.stateID}</id>
<value>${x.stateName}</value>
</child>
</c:forEach>
</root>
Code for Ajax
//ajax for State
function loadState(){
var str="action=state&countryCode="+document.forms[0].elements["country"].value;
xxx=new ActiveXObject("Microsoft.XMLHTTP");
xxx.onreadystatechange=processStateRequest;
xxx.open("POST","AjaxData.htm?"+str,true);
xxx.send(str);
}
function processStateRequest() {
if(xxx.status==200){
if (xxx.readyState==4) {
var xmlDoc=xxx.responseXML;
//clear the select box
while (document.forms[0].elements["stateID"].options.length > 0)
document.forms[0].elements["stateID"].remove(0);
for(i=0;i<xmlDoc.getElementsByTagName('value').length;i++){
var countryName=xmlDoc.getElementsByTagName('value').item(i).firstChild.data;
var countryId=xmlDoc.getElementsByTagName('id').item(i).firstChild.data;
var option = document.createElement("OPTION");
option.text=countryName;
option.value=countryId;
document.forms[0].elements["stateID"].add(option);
}
}
}
}
the state.jsp is the main thing. i think this code very useful to solve this problem.
Bala
Message was edited by:
art84>
art84a at 2007-7-12 10:28:08 >
# 6
HiI am trying to implement the above code into my application here i have the dependency on controller and entire state.jsp so can you please reply with the controller and the state.jsp.Thanking you,regards,Phani.
# 7
if u need the program for controller and the State.jspBala
art84a at 2007-7-12 10:28:08 >
# 9
post your code, i want to see thatbala
art84a at 2007-7-12 10:28:08 >
# 10
if you have the data - all the possible combination(i.e., what should come in second list when you select first element /second element/third element in the first list) while we render the page, then we can achieve this by using javascript....
