How to Update a Record With Ajax
There are many ways to update a record with Ajax using various integrated tools, such as jQuery. With this tool you can easily modify or update your existing database records and you can even apply a bit of animation with the changes you make. You have total control of your files with Ajax and jQuery, which means you can update and delete any existing data with a few lines of code, or you can easily create records as you feel necessary.
Other People Are Reading
Instructions
-
-
1
Paste the following code to create a database table that will house or contain the records you will input and modify later on:
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);
-
2
Enter the code below to enable the "update" and "delete" functions in a single code, so you can run them interchangeably by disabling the element you do not want to run and setting the other component to "true" setting to execute it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
//Update Message...
$(".update_button").click(function() {
var boxval = $("#content").val();
var dataString = 'content='+ boxval;
if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
URL: "update_data.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
//Delete Message..
$('.delete_update').live("click",function()
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
URL: "delete_data.php",
data: dataString,
cache: false,
success: function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3>
<textarea name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="update_button"/>
</form>
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
<div id='old_updates'>
// Display old updates form messages table.
</div>
You may create separate code for these two functions for easier records management.
-
-
3
Paste the following PHP code to display the records that you inserted in your database:
<?php
include('db.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}
?>
<li class="bar<?php echo $msg_id; ?<">
<div align="left">
<span ><?php echo $msg; ?> </span>
<span class="delete_button"><a href="#" id="<?php echo $msg_id; ?>" class="delete_update">X</a></span>
</div>
</li>
-
4
Enter the following PHP code to delete records from your database. This is extremely useful when you want to minimize the amount of contents housed in your database:
<?php
include("db.php");
if($_POST['msg_id'])
{
$id=$_POST['msg_id'];
$id = mysql_escape_String($id);
$sql = "delete from messages where msg_id='$id'";
mysql_query( $sql);
}
?>
-
5
Input the following Cascading Style Sheet (CSS) code to change the look of your database. This will also update the appearance of your records:
*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:55px;
width:499px;}
ol.timeline li:first-child{
border-top:1px dashed #000;}
-
1
Tips & Warnings
Join discussion forums and ask questions from expert users of Ajax and jQuery to learn more about these dynamic tools.
Tutorials abound online so learn as much as you can from these free instructions.
References
- Photo Credit Jupiterimages/Photos.com/Getty Images
