troubleshooting Question

Populating a HTML DropDown from an Array returned by Javascript and Java

Avatar of GlobalDictator
GlobalDictator asked on
JavaJavaScript
24 Comments1 Solution356 ViewsLast Modified:
Hi,

I've got a drop down in the HTML that needs to be populated dynamically with a list of userIds from the database. Hence, I need to execute the JavaScript function calling the Java function to query the DB before the HTML page loads. As I need to execute the JS function before the page loads, I'm importing the javascript (Users.js) in the head section and calling my JS function (findActiveOrganisationsRequest('findActiveOrganisations')" on the atload() method in the Body tag of the HTML.

Q1. Whats the best way to get that JS function to run before form loads so I can populate the dropdown? Will the above do the trick? My HTML is:
   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Sample User Registration</title>		
		<script language="javascript" src="js/Users.js"> </script>
	</head>

    <body atload="findActiveUsersRequest(findActiveUsers)">
        <H2>User Registration</H2>                        
        <div id="userAccessForm" >
	 <form name="userAccessForm" id="userAccessForm">
	<div id="userAccessResults" style=" width : 364px; float:left;"></div><br>		<table width="100%" border="1px">
	<tr><td> 	<p>Organisation *<br>
	    <select name="UserID" id="UserID">					<option value="Choose your Organisation" selected>Choose Username</option>
		<option value="1">Dynamically populate User1</option>					<option value="2">Dynamically populate User2</option>					<option value="3">Dynamically populate user3</option>					</select>	</p><td>
	<input name="submit" type="submit" id="submit" value="Submit">				<input name="reset" type="reset" id="cancel" value="Cancel">
	</td></tr>
    <tr><td>
    <div id="UserResults" style=" width:353px; float:left;"></div></td></tr>
	</table>
	</form></body>
</html> 



Q2. Now, how do I populate the DropDown with the list returned back by the JS function. My javascript function is as follows:

   
function findActiveUsersRequest(findActiveUsers){
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		var returnText = xmlhttp.responseText;
		document.getElementById("UserResults").innerHTML=returnText;
	};
	
	var loadingHtml = "<img border=\"0\" src=\"images/busy.gif\" width=\"50\" /> Active Users Details...";
	document.getElementById("UserResults").innerHTML=loadingHtml;
	xmlhttp.open("GET","mets?action=users&userAction="+findActiveUsers);	
	xmlhttp.send();	
    }

As evident, the last 2 lines of the above JS function send a HTTP request which gets caught by the servlet, which then

a) checks for the parametes coming in the HTTP request,

b) Gets the results from the Database

c) Creates a StringBuffer array in response in th format as "UserID - UserName". But I'm not sure that this is the best way of doing it..Any help/suggestions will be most appreciated!!

d) Sends that response as follows:  sendResponse(response.getWriter(), stringBuffer)

The code for the Java Servlet is:
   
import java.io.PrintWriter;
    import java.util.List;
    import java.util.Map;
    import javax.servlet.http.HttpServletRequest;

    public class RequestActionFactory {
	@SuppressWarnings("unchecked")
	public static Action getAction(HttpServletRequest request) {
		// Retrieve action parameters
		String action = request.getParameter("action");
		String userAction = request.getParameter("UserAction");
		

                  // Validate
		if (action != null) {
			// Event request
			if (action.equals("users")) {
				List<UserIdDTO> userDTOList = getActiveUsers(); //Gets the UserIds from the DB
				StringBuffer[] stringBuffer = new StringBuffer[userDTOList.size()];							
				for (UserIdDTO userDTO : userDTOList) {
					for(int i=0; i<userDTOList.size(); i++) {
						stringBuffer[i] = new StringBuffer();
						stringBuffer[i].append(responseValue(userDTO));
					}
				}			
				sendResponse(response.getWriter(), stringBuffer); 
			} 
		}		
		return null;		
	}
	
	private StringBuffer responseValue(UserIdDTO userDTO){
		StringBuffer strBuffer = new StringBuffer();
		strBuffer.append(userDTO.getId());
		strBuffer.append(" - ");
		strBuffer.append(userDTO.getuserName());		
		return strBuffer;
	}	
	
	public static void sendResponse(PrintWriter writer, StringBuffer[] stringBuffer) {
		if (stringBuffer != null) {			
				for(int i=0; i<stringBuffer.length; i++) {					
					if(null!=stringBuffer[i]) {
						writer.write(stringBuffer[i].toString());
				}	
			} 
		} else {
			// TODO write to log			
		}		
	}	
    }

Once the Java Servlet sends a response back, it gets caught in the JS functions mentioned above as:

   
xmlhttp.onreadystatechange = function() {
		var returnText = xmlhttp.responseText;
		document.getElementById("UserResults").innerHTML=returnText;
	};

So, I am successfully able to display the array in the UserResults DIV tag on my form as:

1 - john.Smith

2 - Adam.smith

3 - Peter.smith

But how can I use this array to populate my drop down in the form???

Any help will be most appreciated!!

Thanks
ASKER CERTIFIED SOLUTION
chaitu chaitu

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 24 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 24 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros