| 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 .:: | ||
 | ||
Comments
2 Responses to “Ajax,jQuery Auto Fill Dropdown On Page Load”
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
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