javascript - Table is not refreshed asynchronously AJAX,JQuery and PHP -

I am trying to add a new line to the existing table using Ajax, PHP and Jquery. Ajax call is successful (it is tested by inserting alerts) but it only displays the new line if I refresh the whole page I want the row to be added to the table with the refresh of the whole page, but the flight While refreshing the table on

Example: As I press the Add to Table button, it must add a new one. Fly on line at table

hotTopics_focusAreas_data.php file:

    $ Line [... "Title ']." & Lt; / Td> & Lt; Td id = status: ". $ Line ['id']." Contentedable = 'true' & gt; ". $ Line ['status']." & Lt; / Td> & Lt; Td> & Lt; Button type = 'button' class = 'btn btn-danger' & gt; Remove & lt; / Button & gt; & Lt; / Td> & Lt; / Tr & gt; ";}? & Gt;  

Javascript file:

  $ (" document "). Ready (function () {hotAddClicked ();}) ; Function hotAddClicked () {$ ("# hotadd_clicked") '= hotTopics_focusAreas_data.php can add the role?' Click on (function (e) {endpoint =; $ .ajax ({url:. Endpoint, type: "GET", async: true, success: function (data) {$ ("#hotopics_table"). Append ( Data);}});});}  

Table definition:

  table class = "table" id = "hottopics_table" Gt; & lt; thead & gt; & lt; tr & gt; & lt; th & gt; Title & lt; / or & gt; & lt; th & gt; position & lt; / v & gt; & lt ; Th> gt; & lt; / or & gt; & lt; / tr & gt; & lt; / thead & gt; & lt; tbody & gt; & lt; php $ sql = "select * from hottopics ; "; $ Result_update = mysql_query ($ SQL) or die (" the query will not be executed "Mysql_error ()); while ($ line = mysql_fetch_array ($ result_update, MYSQL_ASSOC)) {echo" & lt; TR & gt; & Lt; TD ID = Title: "... $ line ['id']" contenteditable = 'true' & gt; "$ line [" heading ']. "& Lt; / td & gt; & lt; td id = status : ". $ Line ['id']. "Contentedable = 'true' & gt; $ Line ['status']. "& Lt; / td> gt; & lt; td & gt; & gt; button type =' button 'category = & gt; btn- danger btn'; delete & lt; / button & Gt; & lt; / TD & gt; & lt; / tr & gt; "; }? & Gt; & Lt; / Tbody & gt; & Lt; / Table & gt;   $ (document) .ready (function () {$ (" #hotadd_clicked ") (function (e) {endpoint = 'hotTopics_focusAreas_data.php role = add?'; $ .ajax ({url:. Endpoint, type:" GET ", async: true, success : Function (Data) {$ ("#Hotspix_table Tebs"). Append (Data);}});});}); Check this jQuery script and check whether it works properly.