In this example when user change value of one select tag the second select tag option value will fill base on value user select in first select tag. i am filling the select tag value from database so i need to connect with database also.
->first you need to create jsp file for establish connection with database.
Connection.jsp
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*" %>
<%!
Connection con;
String sql="";
ResultSet rs;
Statement stmt;
%>
<%
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
con = DriverManager.getConnection("jdbc:mysql://localhost/cricketdb", "root", "");
stmt=con.createStatement();
}
catch(SQLException sa)
{
out.println("Error loading driver:" + sa.getMessage());
}
%>
This above file only used for establishing connection between jsp program and the MySQL database. so after creating this file we need to just include this file whenever we need to connect with database.
->second step create jsp file which contain select tag
Cricket.jsp
<html>
<head>
<title>Cricket View Data</title>
<script src="jquery.js"></script>
<script>
function fillplayer()
{
var countryv=document.getElementById("country").value;
var url="connectCricket.jsp?country="+countryv;
$.ajax({
url:url,
type:"POST",
success:function(results)
{
document.getElementById('player').innerHTML=results;
},
error:function(data)
{
alert('error'+data);
}
});
}
</script>
</head>
<body>
<form name="nm">
Country<select name="country" id="country" onchange="fillplayer()">
<option value="">Select</option>
<option value="india">india</option>
<option value="pakistan">Pakistan</option>
</select>
<br/>
Player: <select name="player" id="player">
<option value="">Select players</option>
</select>
</form>
</body>
</html>
This above file Contain the two select tag one Country and second is Player. when user change the Country name then fillplayer() function will invokes and the fillplayer() function will send request to connectCricket.jsp file and also i am passing the parameter which is value selected in Country select tag so base on Country select tag value the connectCricket.jsp will give back response and if its successful then
success:function(results) will invoke. if in case connectCricket.jsp file return error then it will invoke the error:function(data) and display error.
if its success then i am writing in success funtion
document.getElementById('player').innerHTML=results;
here
'player'=this is an id of Player select tag
The innerHTML is an property of document which is replace the content of select tag so here 'results' which is response comes from the connectCricket.jsp file i am assigning to player.so it will replace the value of select tag option.
->Third step create connectCricket.jsp file which file called by the jQuery(internally by the AJAX) and send back response.
connectCricket.jsp
<%@ include file="connect.jsp"%>
<%
String country=request.getParameter("country");
sql="select *from players where country='"+country+"'";
rs=stmt.executeQuery(sql);
String buffer="";
while(rs.next())
{
buffer=buffer+"<option value='"+rs.getString("pname")+"'>"+rs.getString("pname")+"</option>";
}
out.println(buffer);
%>
This file which read the 'country' name which send by the Ajax and base on this country value i am fetching data from database and dynamically creating option tag and storing into the one String buffer variable.after assigning all option to buffer variable i am just printing it using 'out.println(buffer)' so here i am printing the buffer variable which is contain the list of option so this output send back as a response.
if above file return list of option value then following function will invoke in the Cricket.jsp file
success:function(results)
now 'results' will contain the list of option
if above file return error message then the error function will invoke in the Cricket.jsp file
error:function(data)
now 'data' is contain the error details.
for above example you need to create database name cricketdb and table names players which have follwoing fields.
country varchar2(10)
pname varchar2(10))
This code is working fine..Thanks to ishwar panjari ..
ReplyDeleteur wecome. i'm glad to here from u... )
ReplyDeletekeep visiting..!