javascript - How to get newly added data using AJAX without refreshing the page -

i trying add data database using modal-popup. here once data saved not showing newly data on listing page. how show new data without refreshing page.

ajax call

$.ajax({     type: "post",      url: "ajax.php",     data: {request_type:'addedit',a:$("#fileld_a").val(),b:$("#field_b").val(),element_id:tempvarid},      async: false,     success: function(html)     {            data = jquery.parsejson(html);         if(data.status==1)         {              showmsg('success',data.msg,true,'');             settimeout(function(){$('#modal-adducode').modal('hide')},500);          }         else         {             showmsg('danger',data.msg,true,'#document_constant-msg');         }     } });  

html code

<table id="data-table" class="table table-bordered table-striped">                 <thead>                   <tr>                     <th>field a</th>                     <th>field b</th>                     <th>created date</th>                     <th>modified date</th>                                           </tr>                 </thead>                 <tbody>                 <? foreach($alldata $val){ echo $val['familyid'];?>                   <tr>                     <td><?=$val['field_a']?></td>                     <td><?=$val['field_b']?></td>                                         <td><?=date("d m y h:i:s",strtotime($val['datecreated']))?></td>                     <td><?=date("d m y h:i:s",strtotime($val['datemodified']))?></td>                                          </tr>                 <? }                    ?>               </tbody>  </table> 

i've upated anwer corresponding of new added html/php code.

i saw you're using php display list. reason list not updated because list initialised in page loading time. moment when retrive php page, php retrive list in data , contribute html inner <table>. once done, html contributed php has been deliverred browser. php executed when retrive list, that's why when add new line in database not showed in table because moment php contribute list, new data not created.

you can use same way in previous edition list updated. i've adapted code html.

in ajax.php, return want display in list in data, append in <table>:

$.ajax({   type: "post",   url: "ajax.php",   data: {     request_type: 'addedit',     a: $("#fileld_a").val(),     b: $("#field_b").val(),     element_id: tempvarid   },   async: false,   success: function(html) {     data = jquery.parsejson(html);     if (data.status == 1) {        showmsg('success', data.msg, true, '');        // contribute new line , add in list       $('#data-table > tbody').append('<tr>'+                 '<td>'+data.field_a+'</td>'+                 '<td>'+data.field_b+'</td>'+                                     '<td>'+data.date_created+'</td>'+                 '<td>'+data.date_modified+'</td>'+                                      '</tr>');        settimeout(function() {         $('#modal-adducode').modal('hide')       }, 500);       } else {       showmsg('danger', data.msg, true, '#document_constant-msg');     }   } }); 

don't forget format date_created , date_modified in php ^_^.