PHP Refresh table content using ajax

Question

I have a form which contains a table which is populated with data dynamically according to selected option in dropdown.

The dropdown contains 2 values "enabled" and "disabled". The first column of each row in table contains a checkbox. The table structure is as follows.

[checkbox ]| user | status

[checkbox1]| jim  | enabled

[checkbox2]| sam  | disabled

The checkbox value is equal to userid.

There is a button for changing the status of selected users.

on button click the selected checkbox value are posted using ajax and status of selected users are changed but the data is only refreshed on page reload.

How can I refresh the table when the status is changed. Here is my script.

 function Status(){
    var checked = []
    $("input[name='select[]']:checked").each(function ()
    {
        checked.push(parseInt($(this).val()));
    });
    if(checked!=''){

                    $.ajax({
                        type:'post',
                        url:site_url()+'/common/changeStatus',
                        data:{'checked':checked},
                        dataType:'json',
                        async:false,
                        success:function(result){

                            if(result!= "false"){
                                $.msgBox({
                                    title:"Success",
                                    content:"Status change successful"
                                });
                                $(function () {
                                    $('.msgButton').click(function (event) {
                                        event.preventDefault();
                                        $("#table").load($(this).attr("#table"));

                                    });
                                });                                
                            }

Here #table is the id of the table containig the data.

@ripa : Dosent using this append the response to the div? Here my response is either true or false — Avinash, Feb 12 '13 at 07:19
in your changeStatus echo the changed status and put it in the status div. success:function(result){$('#response_div_id').html(result); }); — Ripa Saha, Feb 12 '13 at 07:26
suppose if its delete instead of change status and there are more than 10000 values in the table. it will better to refresh the page than appending all values into the table using $('#response_div_id').html(ajax response); — Avinash, Feb 12 '13 at 07:33

score 2 · Accepted Answer · answered Feb 12 '13 at 07:21

2

You have to construct the table with current status in PHP file itself. Then you can send it as response. In the Jquery AJAX response you have to add like this,

$(".table").html(resultTable);

resultTable is the response you are passing from PHP file. If you do like this only, you can get the table with the updated statuses.

answered Feb 12 '13 at 07:21

Edwin Alex

5,118
4
28
50

Dosent using this append the response to the div? Here my response is either true or false – Avinash Feb 12 '13 at 07:25
1

can i do something like refresh page without posting data if true else do nothing. I was using location.reload() previously but the form gets resend again and in firefox it says resending page infoemation alert which is annoying. – Avinash Feb 12 '13 at 07:28
How can you do refresh without reloading? Better pass the result from "changeStatus" controller and construct the table here itself or construct in your controller and pass the response. then replace the existing table with constructed one. – Edwin Alex Feb 12 '13 at 07:33

PHP Refresh table content using ajax

1 Answers1