Question

I’m populating a table with values from my database. I have included a delete icon in rows which can be deleted. The image has an onclick='deleteCat(id);' property, the id is taken from a json array trough a loop like so:

string = "<td align='center'><a href=''><img border='0' src='../images/Bullet-Delete.png' alt='delete' onclick='deleteCat("+json[i]['id']+");'/></a></td>";

This is my deleteCat function:

function deleteCat(id){
    var dataString = "catId=" + id;
    $.ajax({
        type: "POST",  
        url: "../ajax/categorie_verwijderen.php",
        data: dataString,  
        success: function(data) {
                //$("#allecat").find("tr:gt(0)").remove();
                //update_table();                
        }
   });   
   //alert(id);
}

My function works when I put an alert after the ajax. The table refreshes and the row is removed from my db. However when I remove the alert my function does not work, the table is refreshed and the row is still present in the table and db.

Thanks in advance.

Answer 1

You need to prevent the default event for the click – ie the page is being reloaded each time you click on the image

function deleteCat(id){
    var dataString = "catId=" + id;
    $.ajax({
        type: "POST",  
        url: "../ajax/categorie_verwijderen.php",
        data: dataString,  
        success: function(data) {
                $("#allecat").find("tr:gt(0)").remove();
                update_table();                
        }
   });   
   return false; // prevent the browser following the href
}

You will also need to change your html :

onclick='return deleteCat("+json[i]['id']+");