ajax+dropdown+table format

HI, i am looking for an ajax application which must contain two dropdown list.In first dropdown if i select a manager name from the first dropdown all the reporties under the selected manager should come and then if i select the one reportee,upon click on a search button it should dispaly me employee details in table format. pls suggest me and any ideas will be helpful

Thanks in Adavance K.K

View Answers

November 1, 2011 at 3:47 PM

1)manager.jsp:

<%@page import="java.sql.*"%>
 <html>
      <head>  
      <script language="javascript" type="text/javascript">  
      var xmlHttp  
      var xmlHttp
      function showReportee(str){
      if (typeof XMLHttpRequest != "undefined"){
      xmlHttp= new XMLHttpRequest();
      }
      else if(window.ActiveXObject){
      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="reportee.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }

      function stateChange(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("reportee").innerHTML=xmlHttp.responseText   
      }   
      }

      function showData(){
     var combo = document.getElementByName("reportee");
     var str = combo.options[combo.selectedIndex].text;
      if (typeof XMLHttpRequest != "undefined"){
        xmlHttp= new XMLHttpRequest();
        }
      else if (window.ActiveXObject){
        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="data.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange1;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }
      function stateChange1(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("data").innerHTML=xmlHttp.responseText   
      }   
      }
      </script>  
      </head>  
      <body>  
      <select name='manager' onchange="showReportee(this.value)">  
       <option value="none">Select</option>  
    <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from manager");
 while(rs.next()){
     %>
      <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>  
      <%
 }
     %>
      </select>  
      <br>  
      <div id='reportee'>  
      <select name='reportee' >  
      <option value='-1'></option>  
      </select>  
      </div> <br> 
      <input type="button" value="Show Data" onclick='showData();'>
      <div id='data'>  
      <table name='data' >  
      </table>  
      </div>
      </body> 
      </html>

November 1, 2011 at 3:49 PM

2)reportee.jsp:

<%@page import="java.sql.*"%>
<%
String manager=request.getParameter("count");  
 String buffer="<select name='reportee' ><option value='-1'>Select</option>";  
 try{
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from reportee where managerid='"+manager+"' ");  
   while(rs.next()){
   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(3)+"</option>";  
   }  
 buffer=buffer+"</select>";  
 response.getWriter().println(buffer); 
 }
 catch(Exception e){
     System.out.println(e);
 }

 %>

3)data.jsp:

<%@page import="java.sql.*"%>
<%
String reportee=request.getParameter("count");  
 String buffer="<table name='data'>";  
 try{
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from data where reporteeid='"+reportee+"' ");  
   while(rs.next()){
   buffer=buffer+"<tr><td>"+rs.getString("name")+"</td><td>"+rs.getString("address")+"</td></tr>";  
 }  
 buffer=buffer+"</table>";  
 response.getWriter().println(buffer); 
 }
 catch(Exception e){
     System.out.println(e);
 }
 %>

Create following database tables:

1)manager

CREATE TABLE `manager` (                                 
           `managerid` bigint(255) NOT NULL auto_increment,       
           `managername` varchar(255) default NULL,               
           PRIMARY KEY  (`managerid`)                             
     )

2)state

CREATE TABLE `reportee` (                                   
          `reporteeid` bigint(255) NOT NULL auto_increment,         
          `managerid` int(255) default NULL,                     
          `reporteename` varchar(255) default NULL,                     
          PRIMARY KEY  (`reporteeid`)                               
        )

3)data

CREATE TABLE `data` (                                    
          `dataid` bigint(255) NOT NULL auto_increment,          
          `reporteeid` int(255) default NULL,                       
          `name` varchar(255) default NULL,
      `address` varchar(255) default NULL,
          PRIMARY KEY  (`dataid`)                                
        )

November 1, 2011 at 3:55 PM

HI Thanks for the reply.. it was good but i want to have only one table like this Table Name:employee_table and columns as fallows EmpCode Empname ManagerName Organization. can we do like on a single tabel

Thanks K.K

November 4, 2011 at 12:10 PM

HI, Chinna thanx for your help and in manager.jsp and showData() u have given getElementsByName(), its working in only Mozzila and not in IE. I have changed in two lines of code and worked perfectly. hope other ppl can use this thats why im sending this answer

 var combo = document.getElementByName("reportee") to 
 var str=document.getElementById("reportees").value

make also changes in reportee.jsp

String buffer="<select name='reportees' ><option value='-1'>Select</option>";

thats it.. code run nice..

Thanks KK

ajax+dropdown+table format

Questions by Category