I've an html table that is filled by an array which is fed by a database. I can delete a row (in database) by clicking on an html button, it successfully delete the line in the database and if I F5 the page the table is updated.
Of course I would like to refresh this table without having to press F5. I've tried several Jquery methods but I don't think I’m doing it right.
AJAX returns to my JS file the new array, I just have to do something about it but I don't know what. I tried to remove the selected row by using id, to hide the old table and show the new one but it doesn't seem to work.
Here is the last thing I tried :
}).done(function(e){
var aData = jQuery.parseJSON(e);
if(aData['status'] == true){
var sDescription = aData['description'];
var aListe = aData['liste']['Resultat'];
$('table.table td #'+iCategorieId).remove();
};
aData['liste']['Resultat'] contains my new array. My table has a class which is table (very well found) and several tr which countaint the id of my rows.
This is the html which is filled by several PHP/SQL results :
// Inside table $sHtml .= '';
// ID
$sHtml .= '<td class="'.$sCatégorie.'_id">';
$sHtml .= $iCatégorieId;
$sHtml .= '</td>';
// Lib
$sHtml .= '<td class="'.$sCatégorie.'_lib">';
$sHtml .= $sCatégorieLib;
$sHtml .= '</td>';
// Update
$sHtml .= '<td class="'.$sCatégorie.'_maj">';
$sHtml .= $sMiseAJour;
$sHtml .= '</td>';
// Edit
$sHtml .= '<td class="'.$sCatégorie.'_edit">';
$sHtml .= $html->link('<span>edit</span>', array('page_view' => $sActionEdit, $iCatégorieId, 'edit' ), array('class' =>'bouton btn-ico btmodif', 'value' => 'Modifier', 'title' => "Editer le $sCatégorie"));
$sHtml .= '</td>';
// Delete
$sHtml .= '<td class="'.$sCatégorie.'_delete">';
$sHtml .= '<input type="submit" value="Supprimer" class="bouton btn-ico btsupp"/>';
$sHtml .= '</td>';
$sHtml .= '</tr>';
}