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 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









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
php date format change
php date format change  How to change the date format in PHP
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
date_format()
date_format() date_format alias DateTime::format function returns date formatted according to given format. It returns formatted date on success otherwise False on failure. Description on date_format() PHP public string DateTime::format
php date format validation
php date format validation  How to validate the date field in specific format in PHP
pdf format - JSP-Servlet
pdf format  hi Sir, how to convert text format into PDF format. thanks & regards, vijayababu.m
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
DateInterval::format
DateInterval class in PHP DateInterval::format function is used for formatting the interval. It returns the format interval.  Description on PHP DateInterval Format public string DateInterval::format ( string $format
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
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
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
date format - Date Calendar
date format  how to convert dd-mmm-yyyy date format to gregorian calendar format in JSP please tell me the code  Hi friend, Code...="19-Sep-2008"; DateFormat format ; Date date ; format = new
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
php date format am pm
php date format am pm  how to set the date format that will display the date in both am pm format
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
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
Hibernate Date Format
This section contains description of Hibernate Date Format
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
Date format - Date Calendar
Date format  Hi All, I am getting a date from database as a format... field.Every time i need to check the format of the date field and make sure the correct format and then display it. How can i format it using java and also can we do
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 - Date Calendar
Date format  please convert dd-mmm-yy date format to gregorian calendar date format.  Hi friend, Code related your Problem: import java.text.DateFormat; import java.text.ParseException; import
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
Article Submission Format - Format for Publishing Articles
Article Submission Format - Format for Publishing Articles       RoseIndia.Net encourages all... articles at RoseIndia.net. Here are details of Articles Submission Format:ADS
date format - Java Beginners
date format  how to 45day in dd-mmm-yyyy date format.  Hi friend, Code to solve the problem : import java.util.Date; import java.util.Locale; import java.util.Calendar; import java.text.SimpleDateFormat
Minutes Format Example
Minutes Format Example       This example shows how to format minute using Format class. In this program we use a pattern of special characters to time format. Description
Day Format Example
Day Format Example       This example shows how to format day using Format class. In this program we use a pattern of special characters to day format. Description of the code
Second Format Example
Second Format Example       This example shows how to format second using Format class. In this program we use a pattern of special characters to time format. Description
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 'cmake-format'
ModuleNotFoundError: No module named 'cmake-format'  Hi, My Python... 'cmake-format' How to remove the ModuleNotFoundError: No module named 'cmake-format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'cmake-format'
ModuleNotFoundError: No module named 'cmake-format'  Hi, My Python... 'cmake-format' How to remove the ModuleNotFoundError: No module named 'cmake-format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'cmake-format'
ModuleNotFoundError: No module named 'cmake-format'  Hi, My Python... 'cmake-format' How to remove the ModuleNotFoundError: No module named 'cmake-format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'compose_format'
ModuleNotFoundError: No module named 'compose_format'  Hi, My... named 'compose_format' How to remove the ModuleNotFoundError: No module named 'compose_format' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'cute_format'
ModuleNotFoundError: No module named 'cute_format'  Hi, My Python... 'cute_format' How to remove the ModuleNotFoundError: No module named 'cute_format' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'cute_format'
ModuleNotFoundError: No module named 'cute_format'  Hi, My Python... 'cute_format' How to remove the ModuleNotFoundError: No module named 'cute_format' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'elm-format'
ModuleNotFoundError: No module named 'elm-format'  Hi, My Python... 'elm-format' How to remove the ModuleNotFoundError: No module named 'elm-format' error? Thanks   Hi, In your python environment you

Ads