Update Cell content not working

ericgrosvald

Hello! I'm having the following problem. There's this system in which you can activate a user, so whenever you do that, the icon should be removed. I have had no problems updating cell content in the past, but for some reason this one is not working.

This is where i create the table:

    $('#tableusers').DataTable( {
            "language": {
            "url": "scripts/language.json"
            },
            data: response,
            rowId: 'id',
           "columns": [
            { "title":"Login",
              "data": "user" },
            { "title":"Nombre", 
              "data": "name" },
            { "title":"Apellido", 
              "data": "lastname" },
            { "title":"Rol", 
              "data": "role" },
            { "title":"Teléfono", 
              "data": "phone" },
            { "title":"Alta", 
              "data": "start" },
            { "title":"Baja", 
              "data": "end" },
            { "data": null,
               "render": function ( data, type, row, meta ) {
               var act = ''; 
               if (row.active == 0) { act = '<i id="'+row.id+'" class="material-icons activateuser" title="Activar usuario">how_to_reg</i>'};
                   return '<i id="'+row.id+'" class="material-icons deleteuser" title="Eliminar">delete</i>\n\
                        <i id="'+row.id+'" class="material-icons detail" title="Ver detalle">description</i>'+
                           act;
               },
              "orderable": false}
          ],    
        })

and this is where i'm trying to remove the icon:

     //Activate User
         $('#tableusers tbody').on( 'click', 'td i.material-icons.activateuser',function(e){
      e.stopImmediatePropagation();
       var id = $(this).attr("id");
       $.ajax({
        method: 'POST',
        url: './services/activateuser.php',
        data: { id: id }
              })
      .done(function(response) {
                  if (response > 0){
        var t = $('#tableusers').DataTable();
        t.cell('#'+id, 7).data('<i id="'+id+'" class="material-icons deleteuser" title="Eliminar">delete</i>\n\
                        <i id="'+id+'" class="material-icons detail" title="Ver detalle">description</i>'
                ).draw(true);

        $.notify("Se ha activado el ususario correctamente", "success");
    }else {
        $.notify("No se ha podido eliminar el usuario.", "error");
    }
         })
                                                        
      .fail(function() {
         $.notify("Ha ocurrido un error eliminando al usuario. Por favor intente nuevamente.", "error");  
              }) ;          
        }); 

Funny thing is, if i modify this for the 6th column instead of the 7th (even tho it's not the column i wanted to do the change but one before the correct one), the job is done.

bindrid

you are pushing html into your data object.
You should only be setting the data object with a data value (I assume active = 1)
and let the render take care of it.

  t.cell('#'+id, 7).data(response).invalidate().draw();

ericgrosvald

Thanks for the info bindrid! that did not work, but i could fix it understanding that the render function had to take care of it .

Done it by modifying the data parameter used on the table creation, replaced null with "active":

{ "data": "active",
               "render": function ( data, type, row, meta ) {
               var act = ''; 
               if (row.active == 0) { act = '<i id="'+row.id+'" class="material-icons activateuser" title="Activar usuario">how_to_reg</i>'};
                   return '<i id="'+row.id+'" class="material-icons deleteuser" title="Eliminar">delete</i>\n\
                        <i id="'+row.id+'" class="material-icons shifts" title="Ver turnos">list</i>'+
                           act;
             },

and then modified the update part with

  t.cell('#'+id, 7).data(response).draw();