Newsletter

Ajax,jQuery Auto Fill Dropdown On Page Load

Ajax » on Oct 25, 2011 { 2 Comments } By Sivateja

Let us see the auto fill drop downs using Ajax and jQuery

Files Required

  • index.html
  • db_fetch.jsp
  • jquery-1.2.6.js (Add this jquery file at db_fetch.jsp location, same  folder)
  • web.xml

Index.html

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

    var xmlhttp;
    var urls="https://www.java4s.com:2011/On_select_from_database_dropdown_jquery/db_fetch.jsp"

    if (window.XMLHttpRequest)
    {
         xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
   {

      z=0;
      removeall();

    if (xmlhttp.readyState==4)
    {
            var roott=xmlhttp.responseXML.documentElement;
            var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;

            while(ress!=null)
            {
                    addoptions(ress)
                    z++
              var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;
            }
     }

    function removeall()
    {

        var ct=document.dummy.sele2.length;
        for(i=ct; i>=0; i--)    {    
            document.dummy.sele2.options[i]=null;
             }
    }

    function addoptions(reslt)
    {

        var ct1=document.createElement("OPTION");
        ct1.text=reslt;
        ct1.value=reslt;
        document.dummy.sele2.options.add(ct1);

    }
 }    //onreadystatechnge function end

xmlhttp.open("GET",urls,true);
xmlhttp.send();

});

</script>
</head>
<body>

<form name="dummy">
EName:    <select name="sele2">
            <option>--choose--</option>
    </select>

</form>

</body>
</html>

Notes: See line number 6 in index.html ,$(document).ready(function() means we no need to send any request like onchange or onclick, once the page loads automatically the code in this $(document).ready(function() block will be executed, so indirectly we are calling this function on page load hope you are clear.

db_fetch.jsp

<%@ page import="java.io.*,java.sql.*" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%
            response.setContentType("text/xml");        

                    Class.forName("oracle.jdbc.driver.OracleDriver");
                    Connection con =DriverManager.getConnection("jdbc:oracle:thin:@www.java4s.com:1521:XE","system","admin");
                    Statement st=con.createStatement();
                    ResultSet rs = st.executeQuery("select empname from emp");

                    out.println("<emp>");
                    while(rs.next())
                    {                            
                        out.println("<empname>"+rs.getString(1)+"</empname>");

                    }
                    out.println("</emp>");

rs.close();
st.close();
con.close();

%>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>

OutPut

Note: you must have classes12.jar, ojdbc14.jar in the lib folder of you application

Database

Check Output

Click here to check the output

You Might Also Like

  ::. About the Author .::

Java4s_Author
- Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

2 Responses to “Ajax,jQuery Auto Fill Dropdown On Page Load”
  1. mahendra says:

    Sir,
    ” document.createElement(“OPTION”);” here you didn’t mention any element id then how could it create option element for second drop down list.

    Thanks & Regards
    Mahendra
    9160883581

  2. prasad says:

    here element is created dynamically.
    so, to create element dynamically there is no need of element id.
    it was created by using tagname “option”.
    Ex:
    to create button dynamically we use

    document.createElement(“button”);
    then button created dynamically.

    from: Prasad.k

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2018 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.