I'm having a go at making a simple ajax script with PHP and jQuery. Basically it's a list that I want to be able to update without refreshing the page.
So far I can add new items to the list (which is working fine) but I want the query that gets the list to reload when you add a new item and I would also like to be able to delete items without refreshing the page aswell.
Can anybody show me or point me in the direction on how to do this?
So far I have this code:
Code:
<?php
session_start();
$UserName = $_SESSION['UserName'];
include("action/restrict.php");
//Connect to the database
include("config/connect.php");
//Include the functions file
include("config/functions.php");
//include settings file
include("config/settings.php");
$IDQuery = "select UserID from tbl_users where UserName = '$UserName'";
$IDResult = mysql_query($IDQuery);
$IDr = mysql_fetch_array($IDResult);
$UserID = $IDr['UserID'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function add(){
$.ajax({
type: "POST",
url: "action/add_item.php",
data: "listtext=" + document.getElementById("listtext").value +
"&userid=" + document.getElementById("userid").value,
success: function(html){
$("#response").html(html);
}
});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<br/><a href="action/logout.php">Logout</a>
</div>
<div id="content">
<table class="listtable">
<?php
$query = "SELECT * from tbl_list WHERE fld_UserID = '$UserID'";
$result = mysql_query($query);
$rownum = "0";
while ($row = mysql_fetch_assoc($result)) {
$rownum = $rownum+1;
if ($rownum&1) {
$rowclass = "row1";
} else {
$rowclass = "row2";
}
echo "<tr class=\"$rowclass\">";
echo '<td>';
echo "$rownum";
echo '</td>';
echo '<td>';
echo '<img src="images/delete.png" class="listimage"/>';
echo '</td>';
echo '<td>';
echo '<img src="images/edit.png" class="listimage"/>';
echo '</td>';
echo '<td>';
echo $row['fld_listtext'];
echo '</td>';
echo '</tr>';
}
?>
</table>
<form action="" method="post">
<input type="text" name="listtext" id="listtext"/>
<input type="hidden" name="userid" id="userid"/>
<input type="button" name="submit" id="submit" value="Add" onclick="add()"/>
</form>
<div id="response"><!-- Our message will be echoed out here --></div>
</div>
</div>
</body>
</html>