jquery ajax call successfully running but page not updating

Question

my jquery ajax call is updating my database but its not updating the page. I m not clear about the success parameter please help

jquery:

<script type="text/javascript">
   function changeStatus(userStatus,userId) {
      var getParameters = "userStatus = " + userStatus + "&userId = " + userId;
      $.ajax({
         type: 'GET',
         url: 'blogUsers.php',
         data: getParameters,
         success: function() {
         }
      });
   }
</script>

php:

<?php
   if( isset( $_GET['userId'] ) && isset( $_GET['userStatus'] ) ) {
      $userId = $_GET['userId'];
      $userStatus = $_GET['userStatus'];
      switch( $userStatus ) {
         case "1":
            $changeStatus=0;
            break;
         case "0":
            $changeStatus=1;
            break;
        default:
            $changeStatus="";
   }
   $Query = "UPDATE blog_users SET blog_user_status='$changeStatus' WHERE blog_user_id='$userId'";
   $Result = mysql_query( $Query );
}
?>

this is how the user grid is showing on page:

function viewUsers() {
$Query="SELECT * FROM blog_users";
$Result=mysql_query($Query);
while ($row=mysql_fetch_array($Result)) {
    $userId=$row['blog_user_id'];
    $userName=$row['blog_user_name'];
    $userEmail=$row['blog_user_email'];
    $userStatus=$row['blog_user_status'];
?>
<tr><td><?php echo $userId; ?></td>
<td><?php echo $userName; ?></td>
<td><?php echo $userEmail; ?></td>
<td><?php if($userStatus==1){echo "Active";}else echo "Banned"; ?></td>
<?php
$action="";
switch($userStatus){
    case "1":
        $action="Ban User";

        break;
    case "0":
        $action="Activate User";
        break;
    default:
        $action="";
}
?>
<td><a href="#" onclick="changeStatus(<?php echo $userStatus; ?>,<?php echo $userId; ?>);"><?php echo $action; ?></a></td>
<?php } } ?>

this is how i call function"

<td><a href="#" onclick="changeStatus(<?php echo $userStatus; ?>,<?php echo $userId; ?>);"><?php echo $action; ?></a></td>

and thsi is the part that needs to be updated:

<table class="tablesorter" cellspacing="0"> 
    <thead> 
        <tr> 
        <th class="header">userId</th> 
        <th class="header">userName</th> 
        <th class="header">userEmail</th>
        <th class="header">userStatus</th>
        <th class="header">Actions</th>                     
        </tr> 
    </thead> 
    <tbody> 
        <?php viewUsers(); ?>
    </tbody> 
</table>

In actual the $action variable should be changed to Activate user or Bann user on click !

Answer 1

You've got to remember that jQuery and PHP are completely independent of one another, and simply updating data in the database will not update the data on your page until you refresh, as the PHP code will only run when the page first loads, and not after. What you need to do is use your success method in the jQuery ajax call. Change your ajax call to

$.ajax({
    type:'GET',
    url:'blogUsers.php',
    data:getParameters,
    success:function(data, status, jqxhr) {
      ... set users in view here ...
    }
  });
}

What format are you returning the data in from the server here? Is the blogUsers.php returning HTML, or is it returning a JSON array of users? If html, you can simply set the body of your response function to

$(".tablesorter tbody").html(data)

But I assume you're most likely returning JSON?

If you are, then you'll need to generate the HTML from within the success method. Something like this should work :

$(".tablesorter tbody tr").remove();
$.each(data, function(user){
  $(".tablesorter tbody").append(
      $("<tr></tr>").append(
          $("<td></td>").append(
              $("<a></a>", {
                  href: "#",
                  onclick: "changeStatus(" + user.userStatus ", " + user.userId + ")",
                  text: user.action
              })
          )
      )
  )
})

This snippet assumes your user objects have the properties name, userId, userStatus, and action, and that the users response is simply an array of user objects.

Obviously you'll want to build up the html in the format you want, this will just generate

<tr>
    <td>
        <a href="#" onclick="updateStatus(status, id);">Action here</a>
    </td>
</tr>

But it gives you a rough idea of how it'll work