Table is not refreshed asynchronously AJAX,JQuery and PHP

Question

I am trying to add a new row to the existing table using Ajax, PHP and Jquery. Ajax call is successful (tested it by placing alerts). But it displays the new row only if I refresh the entire page. I want the row to be added to the table with out refreshing the entire page, but just with a table refresh on the fly.

example : As I press Add button on the table, it should add a new row to the table on the fly.

hotTopics_focusAreas_data.php file :

<?php
$SQL = "select * from hottopics order by id desc limit 1";


while($row = mysql_fetch_array($SQL,MYSQL_ASSOC)) {
            echo 
          "<tr>
            <td id=title:".$row['id']." contenteditable='true'>".$row['title']."</td>


            <td id=status:".$row['id']." contenteditable='true'>".$row['status']."</td>

            <td><button type='button' class='btn btn-danger'>Delete</button></td>
            </tr>";

    }
?>

Javascript file :

$("document").ready(function() {

hotAddClicked();

});

function hotAddClicked(){
$("#hotadd_clicked").click(function(e) {

        endpoint = 'hotTopics_focusAreas_data.php?role=add';

    $.ajax({
        url : endpoint,
        type : "GET",
        async : true,
        success : function(data) {

            $("#hottopics_table").append(data);

        }
    });


    });
}

Table definition:

      <table class="table" id="hottopics_table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>

      <?php    

  $SQL = "select * from hottopics;";
  $result_update = mysql_query($SQL) or die("Couldn't execute query.".mysql_error());
    while($row = mysql_fetch_array($result_update,MYSQL_ASSOC)) {

          echo 
          "<tr>
            <td id=title:".$row['id']." contenteditable='true'>".$row['title']."</td>


            <td id=status:".$row['id']." contenteditable='true'>".$row['status']."</td>

            <td><button type='button' class='btn btn-danger'>Delete</button></td>
            </tr>";
        }

        ?>

        </tbody>
      </table>

I think the problem might be as simple as this. `$("#hottopics_table tbody").append(data);` You confirmed that the ajax is returning the row you want right? — Shriike, Oct 27 '14 at 13:41
If the AJAX call is succesful, the only thing that matters is the way it is processed. You can leave out all the PHP, and just give us 1) The function that processed the response to add the row and 2) the *exact* input to that function (the result of the AJAX request). All this PHP code isn't helping and should be removed, unless the error is in there. A tip: most browsers contain developer tools (F12), that allow you to debug JavaScript or at least see error messages. — GolezTrol, Oct 27 '14 at 13:41
You should be appending to the tbody `$("#hottopics_table tbody").append(data)` — epascarello, Oct 27 '14 at 13:43
FYI, there is no DOM element of type document, this is not relevant syntax: `$("document")`. You want the property document object of window object: `$(document)`. Your actual syntax fell into this one: `$().ready( handler ) (this is not recommended)` — A. Wolff, Oct 27 '14 at 13:43
Please, [don't use `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php), They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://us1.php.net/pdo) or [MySQLi](http://us1.php.net/mysqli). [This article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you decide. — Jay Blanchard, Oct 27 '14 at 13:51

score 1 · Accepted Answer · answered Oct 27 '14 at 14:41

  $(document).ready(function() {

    $("#hotadd_clicked").click(function(e) {

            endpoint = 'hotTopics_focusAreas_data.php?role=add';

        $.ajax({
            url : endpoint,
            type : "GET",
            async : true,
            success : function(data) {

                $("#hottopics_table tbody").append(data);

            }
        });


        });

    });

Check this jQuery script and check if it works properly.

Table is not refreshed asynchronously AJAX,JQuery and PHP

1 Answers1