Update record without refresh all page on my site - php

Question

How can updating record without refreshing page, I have a system where I want to up date a record, change its status between 0 and 1, to turn a feature on or off. This is my form to turn it on or off:
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>nane</th>
<th>time</th>
<th>out</th>
<th>enter</th>
<th>
<div align="center">admin</div>
</th>
<th></th>
</tr>
</thead>
<tbody>
<?php $qu_req=mysql_query( "select * from `exit_request` where `date`='$date_now' order by id desc "); while($row_req=mysql_fetch_row($qu_req)){ ?>
<tr>
<td>
<input type="checkbox">
</td>
<td><?php print($row_req[1]); ?>
</td>
<td>
<?php print($row_req[2]); ?>
</td>
<td>
<?php print($row_req[6]); ?>
</td>
<td>
<?php print($row_req[7]); ?>
</td>
<td>
<div align="center">
<input name="<?php print(" chk_exit ".$row_req[0]); ?>" type="radio" value="0" <?php if($row_req[3]==0){print( 'checked');} ?>/>
<label>accept</label>
<input name="<?php print(" chk_exit ".$row_req[0]); ?>" type="radio" value="1" <?php if($row_req[3]==1){print( 'checked');} ?>/>
<label>not acept</label>
</div>
</td>
<td>
<input class="alt_btn" name="send" type="submit" value="رد الادارة" />
</td>
</tr>
<? } ?>
</tbody>
</table>
code of update
if(isset($_POST['send'])){
$qu=mysql_query("select * from `exit_request` ");
while($row=mysql_fetch_row($qu)){
$id=$row[0];
$chk_str="chk_exit".$id;
$chk_str=$$chk_str;
//if($chk_str==1)
mysql_query("update `exit_request` set `accept`='$chk_str' where id=$id");
print('<meta http-equiv="refresh" content="0;URL=index.php" />');
}
}

Answer 1

http://api.jquery.com/jQuery.ajax/

Answer 2

You can use AJAX request to post your form serialized content as seen in many many tutorials about AJAX in web, if you need to update your form's content after the request is sent to PHP try to send JSON data back to form and parse/update the form, this would make your update of data without changing page.
The procedure it depends on how do you write your form handling
you could jQuery for your AJAX requests see documentation for examples,
also see json_encode for php side of form handling, jQuery UI to make Dialogs.

Answer 3

you can find examples here or see this
There are lots of examples available in net.
Refer this question in stackoverflow How do i update mysql database with ajax and php in innerhtml

Answer 4

This is some code I wrote for a small chatbox, in order to submit a new chat post:
$("#shout").keypress(function(e) {
if(e.keyCode == 13) {
$.ajax({
url: "http://example.com/api.php",
contentType: "text/html; charset=ISO-8859-1",
data: {
action: "shout",
message: $("#shout").val()
},
success: function() {
$("#shout").val("");
}
})
}
});
As soon as you'd press Enter on the input field with the id shout, this would take the value from the input field, put it in an AJAX request, and then send it. Also, after it has been successfully send, it'd clear the input field.
action & data specify the GET parameters of the URL call (that would be http://example.com/api.php?action=shout&message=valueFromInputFieldGoeshere). But you can also use post, just have a look at the options of .ajax().
Hope this gives you an idea on how to send data to the server.
This was the corresponding code, to check if new posts were made to the chatbox, and if so, load them.
$(document).ready(function() {
var lastShout;
// This one gets the timestamp of the last chat entry
$.ajax({
url: "http://example.com/api.php",
contentType: "text/html; charset=ISO-8859-1",
async: false,
data: {
action: "lastshout"
},
success: function(data) {
lastShout = data + 0
}
})
// This one loads the content of the chatbox containing the posts
$.ajax({
url: "http://example.com/api.php",
contentType: "text/html; charset=ISO-8859-1",
data: {
action: "getshouts"
},
success: function(data) {
$("#shouts").html(data);
}
})
// This will be executed every 5 seconds. It takes the timestamp from the beginning, asks the server again for the latest timestamp
// and then checks if the response timestamp is higher than the timestamp from the beginning.
// If so, he'll pull the chatbox content and put it into the specified div
setInterval(function() {
$.ajax({
url: "http://example.com/api.php",
contentType: "text/html; charset=ISO-8859-1",
async: false,
data: {
action: "lastshout"
},
success: function(data) {
data = data + 0
if(data > lastShout) {
lastShout = data;
$.ajax({
url: "http://example.com/api.php",
data: {
action: "getshouts",
init: 1
},
success: function(data) {
if(data != "") {
$("#shouts").html(data);
}
}
})
}
}
})
}, 5000)
})