Jquery 成功运行函数答案

【问题标题】：Jquery run function on successJquery 成功运行函数
【发布时间】：2015-01-29 15:18:51
【问题描述】：

我有ajax代码和函数drawVisualisation();

当我加载页面时，我有代码：

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

代码运行良好，但是当我在成功函数上调用 ajax 时，我也调用函数：

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

但这次调用了函数但我的#example div 不想刷新

当我调用第二次函数drawVisualisation();时如何刷新#example？

功能：

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}
       ]
   });
};

【问题讨论】：

我在你的代码中看到了这个：$('#addFieldForm').each (function(){，这让我想知道你实际上有多少带有id="addFieldForm" 的元素。不止一个？
这不是问题，ajax 工作正常，但我调用 drawVisualisation 用新数据刷新 div #example

标签： javascript jquery html ajax datatables

【解决方案1】：

您需要先在您的元素上destroy datable，然后您可以再次为该元素初始化数据：

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

【讨论】：

【解决方案2】：

你可以试试这个来强制你的元素刷新。我有时会使用它，只要你有 webkit 的问题，它就可以工作，但我想如果你只是删除“-webkit-”，它也应该适用于其他浏览器

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

【讨论】：

我使用数据表，所以这可能是问题所在？在准备好文档时一切正常，但是当我尝试调用 witout doc ready 时就会出现问题
当我通过 CONSOLE.LOG 调用 DRAWVISUALISATION 时，我收到消息：未定义
尝试在您的浏览器中调试您的 javascript 以查看未定义的位置。如果您在 $(document).ready() 中声明了该函数，则不能从该函数外部调用它。