CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdatatables
dert detg
dert detg

Reputation: 303

Jquery run function on success

I have ajax code and function drawVisualisation();

When I load page I have code:

$(document).ready(function() {
    drawVisualization();
});

and code work well, but when I call ajax on success function I also call function:

success: function(data) {
    $('#myModal').modal('hide');
    drawVisualization();
    console.log('SUCCESS'); 
    $('#addFieldForm').each (function(){
        this.reset();
    });

but this time the function was called but my #example div dont want to refresh

How to refresh the #example when I call second time function drawVisualisation();?

Function:

function drawVisualization() {
   $('#example').dataTable({
       "ajax": "getN.php",
       paging: false,
       //"dom":' <"search"f><"top"l>rt<"bottom"ip><"clear">',
       "fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
           var columnas = [2, 3, 4]; //the columns you wish to add            
           for (var j in columnas) {
               var columnaActual = columnas[j];
               var total = 0;
               for (var i = iStart; i < iEnd; i++) {
                   total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
               }
               $($(nRow).children().get(columnaActual-1)).html(total);
           }
       }, // end ,
       "columns": 
       [
           {"data": "ID"},
           {"data": "naziv"},
           {"data": "ha"},
           {"data": "ar"},
           {"data": "m2"},
           {"data": "lokacija"},
           {"data": "osnov"},
           {"data": "kat_kul"},
           {"data": "akcija"}
       ],
       "columnDefs": 
       [
           {
               "targets": 8,
               "data": "akcija",
               "render": function(data, type, full, meta) {
                   // return data; 
                   return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button class="btn btn-info">Izvestaj o parceli</button> <i class="fa fa-times"></i></div>';
               }
           },
           {"targets": 0, "visible":false}
       ]
   });
};

Upvotes: 1

Views: 334

Answers (2)

Artur Filipiak
Artur Filipiak

Reputation: 9157

You need to destroy datable on your element first, then you can init datables for that element again:

success: function(data) {
    $('#myModal').modal('hide');
    // destroy old:
    $('#example').dataTable().fnDestroy();
    drawVisualization();
    console.log('SUCCESS'); 
    $('#addFieldForm').reset();
}

Upvotes: 2

Kamelkent
Kamelkent

Reputation: 329

You can try this to force your element to refresh. I've used it sometimes and it works as longs as you have the problem with webkit but I guess it should work for other browsers as well if you just remove "-webkit-"

element.style.webkitTransform = 'scale(1)';

Upvotes: 1

Related Questions