Question

I have the following that is generate for every record in my database

$allbills = mysql_query("SELECT * FROM outgoings WHERE outgoings.user_id = '$uid'") or die(mysql_error()); 

        echo "<table>";
        while($info = mysql_fetch_array( $allbills )) 
         { 
         echo "<tr>"; 
         echo "<th>bill id:</th> <td>".$info['id'] . "</td> ";
         echo "<th>total:</th> <td>".$info['bill'] . "</td> ";
         echo "<th>bill name:</th> <td>".$info['bill_name'] . "</td> ";
         echo "<th>bill deposit:</th> <td>".$info['bill_description'] . "</td> "; 
         echo "<th>colour:</th> <td>".$info['bill_colour'] . " </td>"; 
         echo "<th>edit:</th> <td>

         <form class='bill-upd'>
             <input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'>
             <input type='hidden' value='".$info['id']."' name='billid' id='billid'>
            Total <input type='text' id='total' name='total' /><br />
            Bill name<input type='text' id='bill-name' name='bill-name' /><br />
           bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br />
            bill colour<input type='text' id='bill-colour' name='bill-colour' />
        <input type='button' value='submit' class='bill-upd-submit' />
        </form>   

         </td>"; 
         echo "</tr>";
         }
         echo "</table>"; 

This updates my users record in a table using AJAX

$(document).ready(function(){   
    $(".bill-upd-submit").click(function() {
        var elem = $(this);
        $.post('update_bill.php', elem.parent('.bill-upd').serialize(), function(data) {
            elem.append(data);
        });
    });
});

Once this is done however, the user needs to refresh the page to see the results, is there a way I can populate the table the user edits, with the latest data after the update query takes place?

Answer 1

I would try a different approach:

1) Add an invisible div right after your button. You can do this dynamically:

$(document).ready(function() {
   $(".bill-upd-submit").after("<div style='display:none'></div>");
    // ...
});

2) Now your post event would be as follows:

 $(".bill-upd-submit").click(function() {
      var elem = $(this);
      $.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data) {
            elem.next("div").html(data);
      });
});

BTW, I’m assuming that there are other buttons in the same page, and that’s the reason for using class (bill-upd-submit) instead of id. If there is just one button, id is faster. Also, I think that bill-upd-submit is of type button. If it is type submit, I would change-it to button or added the following to the click event:

function() {
    // ... the code shown above
    return false;
});

This will prevent the form’s submit to happen.