I am trying to create a feature on my website that automatically updates the database onchange of the textarea below (which is going to be act as a 'post-it note for reminders'). I am new to ajax, and I was wondering if someone can show me a basic example of how I would make an AJAX call to update my database onChange of the textarea below?
<?php
//Create mysql connect variable
$conn = mysql_connect('samplesource', 'example', 'pass');
//kill connection if error occurs
if(!$conn){
die('Error: Unable to connect.' . '<br>' . mysql_error());
}
//connect to mysql database
mysql_select_db("mydb", $conn);
session_start();
$userid = $_SESSION['id'];
$results = ("SELECT * FROM notes WHERE userid='$userid'");
?>
<html>
<head>
<title>practice</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sometext").change(function(){
//make ajax call to update database onChange
});
});
</script>
</head>
<body>
<textarea class="note" style="resize:none; width:300px; height:200px;"> </textarea>
</body>
</html>
I am trying to create a feature on my website that automatically updates the database onchange of the textarea below (which is going to be act as a 'post-it note for reminders'). I am new to ajax, and I was wondering if someone can show me a basic example of how I would make an AJAX call to update my database onChange of the textarea below?
<?php
//Create mysql connect variable
$conn = mysql_connect('samplesource.', 'example', 'pass');
//kill connection if error occurs
if(!$conn){
die('Error: Unable to connect.' . '<br>' . mysql_error());
}
//connect to mysql database
mysql_select_db("mydb", $conn);
session_start();
$userid = $_SESSION['id'];
$results = ("SELECT * FROM notes WHERE userid='$userid'");
?>
<html>
<head>
<title>practice</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sometext").change(function(){
//make ajax call to update database onChange
});
});
</script>
</head>
<body>
<textarea class="note" style="resize:none; width:300px; height:200px;"> </textarea>
</body>
</html>
- 4 you can read api.jquery./jQuery.ajax, what is the problem? – Ram Commented Jul 16, 2012 at 20:39
- As an aside, you may want to (re)set a timer with a small delay (~150ms?) via setTimeout on the textarea's onchange event to avoid per-keystroke database calls. – Gabriel Isenberg Commented Jul 16, 2012 at 20:43
- @Raminson, posting a link without any explanation is useless. – AnchovyLegend Commented Jul 16, 2012 at 20:44
- 1 @MHZ it sounds someone has downvoted 2 questions of mine, note that I haven't downvoted your question. – Ram Commented Jul 16, 2012 at 20:46
- 4 I agree with @Raminson that you should go read the documentation on jQuery's ajax call. We'll help you fix code that you can't get working, but don't rely on the munity to write your code for you – MrOBrian Commented Jul 16, 2012 at 20:49
1 Answer
Reset to default 7First, you'd need to move your database save script into a new file e.g save.php
On your <textarea> i'd add
<textarea onchange="saveChanges(this);"></textarea>
For the javascript save function that's called when a change is made:
function saveChanges(object){
$.ajax({
url: 'save.php',
data: 'content=' + object.value,
cache: false,
error: function(e){
alert(e);
},
success: function(response){
// A response to say if it's updated or not
alert(response);
}
});
}
This is a very quick and dirty way of doing it.