how the page content will reload after ajax success - php

Question

How to reload only the page content, not the whole page after jquery ajax success function for the given php and javascript code. In that initially it displays
success
and after ajax call it will display as
failed
with reloading the whole page..
Php code :
<?php
require 'dbconnect.php';
$sql="select * from tbl_status where id='1'";
$res=mysql_query($sql);
$row=mysql_fetch_array($res);
if($row['status']=='1')
{
?>
Success <div class="status" style="visibility:hidden;">0</div>
<?php
}
else
{
?>
Failed
<div class="status" style="visibility:hidden;">1</div>
<?php
}
?>
<input type="submit" class="send"/>
Javascript code :
<script type="text/javascript">
$(function(){
$('.send').click(function(){
var status=$('.status').text();
$.ajax({
type: 'POST',
url: 'http://localhost/status/updatestatus.php',
data: 'status='+status,
success : function (e)
{
var response=e;
alert(response);
},
error: function()
{
alert('error');
}
});
});
});
</script>

Answer 1

Try.Sorry for if there are some issues as it was written in notepad.
index.php
<?php
require 'dbconnect.php';
$sql="select * from tbl_status where id='1'";
$res=mysql_query($sql);
$row=mysql_fetch_array($res);
<div id="response">
if($row['status']=='1')
{
?>
Success <div class="status" style="visibility:hidden;">0</div>
<?php
}
else
{
?>
Failed
<div class="status" style="visibility:hidden;">1</div>
<?php
}
?>
</div>
<input type="submit" class="send"/>
<script type="text/javascript">
$(document).ready(function(){
$('.send').click(function(){
var status=$('.status').text();
$.ajax({
type: 'POST',
url: 'http://localhost/status/updatestatus.php',
data: 'status='+status,
success : function (data, status)
{
$("#response").html(data.status);
},
error: function()
{
alert('error');
}
});
});
});
</script>
updatestatus.php
<?php
require 'dbconnect.php';
$sql="update tbl_status set status=$_POST['status'] where id='1'";
$res=mysql_query($sql);
$count = mysql_affected_rows();
if($count > 0){
return json_encode(array('status'=>$count));
}else{
return json_encode(array('status'=>0));
}
?>

Answer 2

If you are having problem with reloading the page then you can use
window.location.href=window.location.href;
Hope this helps

Answer 3

use load instead reload in your success
...
success : function (e)
{
$('your id or class name').load(php_file_name +'your_id_or_class_to_refresh');
var response=e;
alert(response);
location.reload();
},
....
// location.reload(); // <-- does not work so

Answer 4

considering your ajax is working fine... and the response you are getting is HTML
you don't need to call location.reload()..
you just need to append the response to the DOMtree..
updated
HTML
....
?> //close php tag
<div id="displayStatus"> //create new div with id displayStatus
<?php
if($row['status']=='1')
{
?>
Success <div class="status" style="visibility:hidden;">0</div>
<?php
}
else{
?>
Failed <div class="status" style="visibility:hidden;">1</div>
<?php
}
?>
</div> //end the div
JQUERY
success : function (e)
{
var response=e;
alert(response);
$('#displayStatus').html(response); //replace the content in that
},
updatestatus.php
$status= $_POST['status'];
//make you query ..update your table
if($status == '0'){
echo 'Failed <div class="status" style="visibility:hidden;">1</div>';
}else{
echo 'Success <div class="status" style="visibility:hidden;">0</div>';
}

Answer 5

The problem is: your jQuery part and your PHP part are not compatible.
You didn't really change your return status, just text. To signal "Failed" use some header on PHP side. For example:
in PHP:
header('HTTP/1.0 403 Forbidden');
die('Failed');
Then you ajax will raise an "error" handler instead of "success".
OR you should use only "success" handler and test returned text in in:
in JavaScript:
success: function(data) {
if (data == 'Failed') {
alert('ERROR');
location.reload();
} else {
alert('Success');
}
},

Answer 6

I have used this code to change the status and show the changed value on the page. This is a Javascript function that uses an Ajax request to PHP that changes the value of status in the database.
function changeStatus(divID,id,action,frontOrAdmin)
{
xmlhttp=getobject();
var query="id="+id+"&action="+action+"&frontOrAdmin="+frontOrAdmin;
$oldStatus = document.getElementById(divID).innerHTML;
document.getElementById(divID).innerHTML='<img src="images/loading_icon.gif">';
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
var response = xmlhttp.responseText;
var responseArr = response.split(",");
if(($.trim(responseArr[1])=="0")||($.trim(responseArr[1])=="1")){
document.getElementById(divID).innerHTML=responseArr[0];
}
else{
alert(responseArr[0]);
document.getElementById(divID).innerHTML=$oldStatus;
}
}
}
xmlhttp.open("GET","pass.php?type=changestatus&"+query,true);
xmlhttp.send(null);
}