Today I will tell you How to Bind table and dropdown on selected index change from database using Jquery Ajax.
This tutorial is for beginners. In this tutorial I will show you how to retreive data from database using Jquery Ajax in your php with out refreshing the webpage.
we need to create three php files, In first file our html code present from where we do ajax request. in second file we process the ajax request and return the result to first page and in the third file we create the database connection.
Step 1:- Create a database name "userdatabase"
Step 2:- Run this query on your database
CREATE TABLE IF NOT EXISTS `tbluser` (
`ID` int(11) NOT NULL AUTO_INCREMENT,
`UserName` varchar(100) NOT NULL,
`Userid` varchar(25) NOT NULL,
`Password` varchar(25) NOT NULL,
`Status` int(11) NOT NULL,
PRIMARY KEY (`ID`),
UNIQUE KEY `Userid` (`Userid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=32 ;
INSERT INTO `tbluser` (`ID`, `UserName`, `Userid`, `Password`, `Status`) VALUES
(31, 'zain', 'khan', 'asdasd', 1),
(30, 'Owais', 'asher', 'asas', 1),
(27, 'raheel', 'raheel', 'asdasd', 2);
Step 3:- Create a db_connect.php file and put this code in it.
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('userdatabase');
?>
Step 4:- Create a index.php file and put this code in it.
<?php
include("db_connect.php");
?>
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"post",
url:
"getdata.php",
success:
function(data) {
$("#ddlName").html(data);
}
});
$("#ddlName").change(function(){
var val =
$("#ddlName").val();
$.ajax({
type:"post",
url:
"getdata.php?ID="+val+"",
success:
function(data) {
console.log(data)
$("#ddlLname").html(data);
}
});
});
$("#submit").click(function(){
$.ajax({
url:
'getdata.php?get=1',
type: 'post',
success:
function(response) {
$("#get").html(response);
}
});
});
});
</script>
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title></title>
</head>
<body>
ID:
<select name="ddlName" id ="ddlName"
style="width:105px;margin-left: 58px;">
</select>
</br></br>
User Name:
<select name="ddlLname" id ="ddlLname"
style="width:105px">
<option
value="">--Select--</option>
</select>
<div id
="get">
</div>
<input
type="submit" name="submit" id="submit"
value="Bind Table" style="margin-top: 42px;"/>
</body>
</html>
Step 5:- Create a getdata.php file and put this code in it.
<?php
include("db_connect.php");
if((isset($_REQUEST['ID']))
&& (!empty($_REQUEST['ID'])))
{
BindDropdownByid();
}
if((!isset($_REQUEST['ID']))
&& (!isset($_REQUEST['get'])))
{
BindDropdown();
}
if((isset($_REQUEST['get']))
&& (!empty($_REQUEST['get'])))
{
BindTable();
}
function
BindDropdown()
{
$result = mysql_query("select * from
tbluser");
while($school =
mysql_fetch_array($result)){
echo"<option
value=".$school['ID'].">".$school['ID']."</option>";
}
}
function
BindDropdownByid()
{
$result =
mysql_fetch_array(mysql_query("select * from tbluser where ID =
".$_GET['ID'].""));
echo"<option
value=".$result['ID'].">".$result['UserName']."</option>";
}
function
BindTable()
{
echo "<table
id='resultTable' border='1' style='margin-top: 3px;'>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
</tr>";
$result = mysql_query("select
* from tbluser");
while($row =
mysql_fetch_array($result)) {
echo "<tr>";
echo
"<td>".$row['ID']."</td>";
echo
"<td>".$row['UserName']."</td>";
echo
"<td>".$row['Userid']."</td>";
echo
"<td>".$row['Status']."</td>";
echo "</tr>";
}
echo "</table>";
}
?>
In first dropdown have all IDs and the second drop down fill with respect to User ID.
On button click it Bind all the table with out refreshing your page.
your result will look like this
fdgdfgfd
ReplyDelete