ajax+dropdown+table format

Ads
 

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

Ads









Related Tutorials/Questions & Answers:
ajax+dropdown+table format
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... it should dispaly me employee details in table format. pls suggest me and any ideas
image format
image format  what are the different format available in image
Advertisements
image format
image format  what are the different format available in image
Format
format
Format class for time
Format class for time  What is use of format class
convert data format sql
convert data format sql  convert data format sql
Decimal Format Issue Java
Decimal Format Issue Java  Decimal Format Issue Java
ModuleNotFoundError: No module named 'format'
ModuleNotFoundError: No module named 'format'  Hi, My Python... 'format' How to remove the ModuleNotFoundError: No module named 'format'... to install padas library. You can install format python with following command
ModuleNotFoundError: No module named 'format'
ModuleNotFoundError: No module named 'format'  Hi, My Python... 'format' How to remove the ModuleNotFoundError: No module named 'format'... to install padas library. You can install format python with following command
ModuleNotFoundError: No module named 'format'
ModuleNotFoundError: No module named 'format'  Hi, My Python... 'format' How to remove the ModuleNotFoundError: No module named 'format'... to install padas library. You can install format python with following command
How to print this Format exactly?
How to print this Format exactly?   * * * & reverse
standard format in C++
standard format in C++  Please help me with this one. thank you so much. **"Write a C++ program to read a date in US standard format (mm dd yyyy) and print it in Australia standard format (dd mm yyyy
nmber printed in pyramid format
nmber printed in pyramid format  how to print this format using java 1 23 345 4567 56789
How to format number in Java?
How to format number in Java?  Hi, What is the best way to format a number in Java? How to format number in Java? Thanks   Hi, To format number in Java you can use the class java.text.NumberFormat. Here is simple
String to date with no format
into a date .. this is simple .. but i want to do it without knowing the date format.. Here is a situation .. say i hav 100 dates .. and all are in the same format. but i want to write a java program to find out dis format for me. the result
Web Format
Web Format Web 3.0 as Different Formats of Web The Semantic Web The term ?Semantic Web? refers to "Defined" Web that is an alliance of World Wide Web Consortium (W3C) and others to provide a standard for defining data
select date in desired format
select date in desired format  how to select date from the database in DD/MM/YYYY format, because if i am trying select data from the database i am getting value in yyyy/mm/dd and time format like below "2012-05-07 00:00:00.0
Print the following format
Print the following format  how to print the following format given string "00401121" in java 0-** 1-* 2-* 3- 4
NSDateformatter format Date
NSDateformatter format Date  Hi, What is the correct way of writing NSDateFormatter in string format. Thanks.   For current Date in NSDate Format -(void) setCurrentDate:(NSDate* newDate){ [self.currentDate release
Hibernate Date Format
This section contains description of Hibernate Date Format
database data in xml format
database data in xml format  HI, i want to display the database data in the xml format(not as xml file ) on the console using DOM. help will be appreciated. THANKS K.K
java format date
java format date  Hi, How can I format the date in the following pattern? yyyy-MM-dd   import java.util.*; import java.text.*; class SimpleDateFormatExample { public static void main(String[] args
Date auto format
Date auto format  Hi, I have jsp page and Date field with input type. Requirement is, if we enter date as MMDDYY or MMDDYYYY and clicking the tab the date(MMDDYY or MMDDYYYY) have to auto format to MM/DD/YYYY. could you please
String to Date format
String to Date format  My Date format is String Eg(Jan 20 2011 ).... How to Change This values Like to database date format Eg(2011-01-20) using java   import java.util.*; import java.text.*; class ChangeDateFormat
How to convert EBCDIC format value into ASCII format value in java
How to convert EBCDIC format value into ASCII format value in java  how to convert EBCDIC data format into ASCII format data using java Use Case:I my file contains ASCII format values as well as EBCDIC format values.I need
date format in javascript
date format in javascript  display date format as dd/mm/yyyy and day could take only between 01-31 & month could take only between 01-12 &...}$/ if(document.userform.joindate.value.search(date)==-1) { alert("please enter date format as dd/mm/yyyy
ModuleNotFoundError: No module named 'biom-format'
ModuleNotFoundError: No module named 'biom-format'  Hi, My Python... 'biom-format' How to remove the ModuleNotFoundError: No module named 'biom-format' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'clang-format'
ModuleNotFoundError: No module named 'clang-format'  Hi, My Python... 'clang-format' How to remove the ModuleNotFoundError: No module named 'clang-format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'clang-format'
ModuleNotFoundError: No module named 'clang-format'  Hi, My Python... 'clang-format' How to remove the ModuleNotFoundError: No module named 'clang-format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'clang-format'
ModuleNotFoundError: No module named 'clang-format'  Hi, My Python... 'clang-format' How to remove the ModuleNotFoundError: No module named 'clang-format' error? Thanks   Hi, In your python

Ads