What happens is that I’m able to add and delete records from form using jQuery and PHP scripts to MYSQL database, but I am not able to update data which was retrieved from the database. The file structure is as follows:
index.php is a file with jQuery functions where it displays form for adding new data to MYSQL using save.php file and list of all records are view without refreshing page (calling load-list.php to view all records from index.php works fine, and save.php to save data from form)
-> Delete is an function called from index.php to delete record from MySQL database (function calling delete.php works fine)
-> Update is an function called from index.php to update data using update-form.php by retriving specific record from MySQL table, (works fine)
Problem lies in updating data from
update-form.php to update.php (in
which update query is written for
MySQL)
I have tried in many ways – at last I had figured out that data is not being transferred from update-form.php to update.php; there is a small problem in jQuery AJAX function where it is not transferring data to update.php page. Something is missing in calling update.php page it is not entering into that page.
Please find the link below to download all files which is of 35kb (virus free assurance):
download mysmallform files in ZIPped format, including mysql query
<pre>
<body>
<div class="container">
<form id="submit" method="post">
<fieldset>
<legend>Enter Information</legend>
<label for="Name">Name : </label>
<input id="name" class="text" name="name" size="20" type="text">
<label for="gender">Gender : </label>
<input id="gender" class="text" name="gender" size="20" type="text">
<label for="dob">DoB : </label>
<input id="dob" class="date" name="dob" size="20" type="text"> <button> Add </button>
</fieldset>
</form>
<div class="name_list"></div>
<div class="update_form"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
function loadList(){
$.ajax({
url: "load-list.php",
cache: false,
success : function(html){
$(".name_list").html(html);
}
});
}
loadList();
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var x=window.confirm("Are you sure you want to delete this item?")
var name = $('#name').attr('value');
var gender = $('#gender').attr('value');
var dob = $('#dob').attr('value');
if (x==true){
$.ajax({
type: "POST",
url: "save.php",
data: "name="+ name +"& gender="+ gender +"& dob="+ dob,
success: function(){
loadList();
}
});
}
return false;
});
$(".delete_button").live("click", function(){
//this deletes the row clicked on with an alert and then reloads the list
var id = $(this).attr("id");
var x=window.confirm("Are you sure you want to delete this item?")
if (x==true){
$.ajax({
type: "POST",
url: "delete.php",
data: "id="+ id,
success: function(){
loadList();
}
});
}
return false;
});
$(".update_button").live("click", function(){
//this loads the update form
var id = $(this).attr("id");
$.ajax({
url: "update-form.php",
data: "id="+ id,
cache: false,
success: function(html){
$(".update_form").html(html);
}
});
return false;
});
$("#updateform").ajaxform("submit",function(){
//$("form#update").live("submit",(function() {
// we want to send via ajax and empty the html from the update_form element
var name = $('#name_update').attr('value');
var gender = $('#gender_update').attr('value');
var dob = $('#dob_update').attr('value');
var id = $('#id').attr('value');
alert (name);
$.ajax({
url: "update.php",
type: "POST",
data: "name="+ name +"& gender="+ gender +"& dob="+ dob,
error: function(){
alert('Error loading document');
},
success: function(){
alert (" i am in success below load list ");
$(".update_form").empty();
loadList();
}
});
return false;
});
});
</script> </body>
</pre>
I copy-pasted your code into a php file and get a “$ is not defined” error in javascript. I look at your code tells me that you have not included the jquery file. Try using firefox as the browser and firebug for debugger to avoid such minor issues.