jQuery的AjaxCall的崩潰所有的瀏覽器

Question

我有一個（重）函數在PHP/SQL獲取一些數據，然後呈現在HTML。當我第一次加載頁面時，我稱這個函數爲一切都很好。當我點擊一個按鈕時，我也會在成功完成其他ajax調用之後調用此函數，但隨後我的瀏覽器會凍結並崩潰。我在Firefox和Chrome中遇到錯誤（頁面無響應）。

這裏（重）功能：

$(document).on("click", ".btn-mark-as-c", function(){ 
    if (confirm("Are you sure you want to mark this attribute as configured?")) { 
     $this = $(this) 
     var id = $this.attr("data-id"); 
     $.ajax({ 
      type : "POST", 
      url  : "/app/ajax/DataminerAjax.php", 
      dataType: "json", 
      data : {updateMinerAttributeState:id, state:1} 
     }).success(function(json){ 
      if (json.status == "success") { 
       // crashes here in this call of the heavy function 
       getMinerAttributesByType(1); 
      } else { 
       alert("There was an error!"); 
      } 
     }); 
    } 
}); 

有人指針：

function getMinerAttributesByType(type) { 
    $.ajax({ 
     type : "POST", 
     url  : "/app/ajax/DataminerAjax.php", 
     dataType: "json", 
     timeout : 8000, 
     data : {getMinerAttributesByType:type} 
    }).success(function(json){ 
     $tableConfigured = $("#keywordsgroupsConf tbody"); 
     $tableConfigured.html(""); 
     $tableUnconfigured = $("#keywordsgroups tbody"); 
     $tableUnconfigured.html(""); 
     $.each(json, function(key, value){ 
      var $table; 
      if (value.configured == 0) { 
       $table = $tableUnconfigured; 
      } else { 
       $table = $tableConfigured; 
      } 
      $table.append('<tr>' + 
          '<td>' + value.name + '</td>' + 
          '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' + 
          '</tr>' + 
          '<tr class="dataset">' + 
          '<td colspan="2" class="subrow">' + 
          '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' + 
          '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+ 
          '<tbody>' + 
          '</tbody>' + 
          '</table>'+ 
          '<div style="margin-left:10px;" class="input-append">'+ 
          '<input type="text" placeholder="Keywordgroup name">'+ 
          '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+ 
          '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' + 
          '</div>' + 
          '</div>' + 
          '</td>'+ 
          '</tr>'); 
     }); 
    }); 
} 

這裏說調用函數和崩潰後的功能？

Answer 1

我沒有50個代表所以我不能評論buuuut，你不能破解HTML格式的一大塊PHP文件，然後使用AJAX來調用PHP並返回結果嗎？然後使用$ table.append（result）？

例）

<script type="text/javascript"> 
    jQuery(document).on('click', '.menuItem', function() 
    { 
     event.preventDefault(); 
     var mainCategory = $(this).attr('id').split('xx')[0]; 
      $.ajax({               
        url: '/php/SubMenuBar.php', <----- Access the PHP file.  
        data: { 
          MainCategory: mainCategory, <---- Parameters for the PHP file (declared using $_GET() in the PHP file) 
         }, 

        success: function(result) <--- Result becomes the output from the PHP file 
        { 
         $table.append(result); 
        } 
       });  

Answer 2

不是一次追加行到DOM一個，將它們連接成一個字符串，然後將它們添加一次性的。

function getMinerAttributesByType(type) { 
    $.ajax({ 
     type : "POST", 
     url  : "/app/ajax/DataminerAjax.php", 
     dataType: "json", 
     timeout : 8000, 
     data : {getMinerAttributesByType:type} 
    }).success(function(json){ 
     var $tableConfigured = $("#keywordsgroupsConf tbody"); 
     var $tableUnconfigured = $("#keywordsgroups tbody"); 
     var rowsConfigured = '', rowsUnconfigured = ''; 
     $.each(json, function(key, value){ 
      var row = '<tr>' + 
       '<td>' + value.name + '</td>' + 
       '<td><button class="btn btn-info" data-toggle="collapse" data-target="#'+ value.id+'-subs" data-id="'+ value.id +'" data-init="0">Config</button></td>' + 
       '</tr>' + 
       '<tr class="dataset">' + 
       '<td colspan="2" class="subrow">' + 
       '<div style="background:#eee;" class="accordian-body collapse" id="'+ value.id+'-subs">' + 
       '<table style="margin-bottom: 10px;" class="table" id="table-' + value.id + '" data-id="' + value.id + '">'+ 
       '<tbody>' + 
       '</tbody>' + 
       '</table>'+ 
       '<div style="margin-left:10px;" class="input-append">'+ 
       '<input type="text" placeholder="Keywordgroup name">'+ 
       '<button class="btn btn-create-keywordgroup" data-id="' + value.id + '"><i class="icon icon-plus"></i> Add</button>'+ 
       '<button class="btn btn-success btn-mark-as-c" data-id="' + value.id + '"><i class="icon-white icon-check"></i> Mark as configured</button>' + 
       '</div>' + 
       '</div>' + 
       '</td>'+ 
       '</tr>'; 
      if (value.configured == 0) { 
       rowsUnconfigured += row; 
      } else { 
       rowsConfigured += row; 
      } 
     }); 
     $tableConfigured.html(rowsConfigured); 
     $tableUnconfigured.html(rowsUnconfigured); 
    }); 
}