This question already has an answer here:
I have a little problem with Ajax and MySQL in my application. My application it is a some thing like user manager. I have MySQL database with ID, USERNAME, PASSWORD, FIRST_NAME, LAST_NAME and EMAIL field. I made list of users pagination 10 records per page. And now I'm trying to make functionality for adding new users, editing existing users and to delete users one by one. I have next code:
Config.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "password";
$mysql_database = "mybase";
$con = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps error! occurred");
mysql_select_db($mysql_database, $con) or die("Opps error! occurred");
?>
This is database connection
**
index.php
**
<?php
include('config.php');
$per_page = 3;
//getting number of rows and calculating no of pages
$sql = "select count(*) from users";
$result = mysql_query($sql);
$count = mysql_fetch_row($result);
$pages = ceil($count[0]/$per_page);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Users Manager</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="pagination.js"></script>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading {
width: 100%;
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div align="center">
<div style="margin-top:50px;"><b>Title</b>: users Manager</div>
<div id="content" ></div>
<table width="800px">
<tr><Td>
<ul id="pagination">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</Td>
</tr></table>
<div id="loading" ></div>
</div>
</body>
</html>
**
data.php
**
<?php
include('config.php');
$per_page = 10;
if($_GET)
{
$page=$_GET['page'];
}
//getting table contents
$start = ($page-1)*$per_page;
$sql = "select * from users order by id limit $start,$per_page";
$rsd = mysql_query($sql);
if(isset($_POST['buttonsave'])){
$query_sql = "INSERT INTO users (username,firstname,lastname,email) VALUES ('{$_POST[username]}','{$_POST[firstname]}','{$_POST[lastname]}','{$_POST[email]}')";
$result = mysql_query($query_sql);
if($result){
echo "Successful insert";
}
}
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<table id="tbl">
<th>User Name:<input type="text" id="username" name="username" placeholder="User"></th>
<th>First Name:<input type="text" id="firstname" name="firstname" placeholder="First Name"></th>
<th>Last Name:<input type="text" id="lastname" name="lastname" placeholder="Last Name"></th>
<th>E-mail:<input type="email" id="email" name="email" placeholder="Email"></th>
</table>
<input type="button" value="Insert" id="save">
<script type="text/javascript">
$(function(){
$("#save").click(function(){
var uname = $("#username").val();
var fname = $("#firstname").val();
var lname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url: "data.php",
type: "POST",
async: true,
data: {
buttonsave: 1,
username: uname,
firstname: fname,
lastname: lname,
email: email
},
success: function(result){
alert("OK! Good!");
}
});
});
});
</script>
<table id="tbl">
<th><b>Id</b></th>
<th><b>User Name</b></th>
<th><b>First Name</b></th>
<th><b>Last Name</b></th>
<th><b>E-mail</b></th>
<?php
while($row = mysql_fetch_array($rsd))
{
$id = $row['id'];
$uname = $row['username'];
$fname = $row['first_name'];
$lname = $row['last_name'];
$email = $row['email'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $uname; ?></td>
<td><?php echo $fname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $email; ?></td>
</tr>
<?php
} //End while
?>
</table>
<style>
#tbl
{
width:800px;
border:1px solid #2E8AE6;
margin-top:50px;
}
#tbl tr:nth-child(odd) {
background: #C2E0FF;
}
#tbl td{
border:1px solid #2E8AE6;
padding: 5px;
}
#tbl th
{
background: #2E8AE6;
border:1px solid #2E8AE6;
padding: 5px;
}
</style>
and my jQuery file: **
pagination.js
**
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("data.php?page=" + pageNum, Hide_Load());
});
});
So the problem is in my data.php. I tried to insert data using ajax, but it does't work! And it insert nothing to database. But it alerts me
alert("OK! Good!");
I can't understand that is wrong. Please help.
</div>
