我的JavaScript/AJAX功能只在調試時才起作用

我對JavaScript和AJAX不是很熟悉。我的JavaScript/AJAX功能只在調試時才起作用

我正在開發一個網頁，顯示通過§.getJSON/ JQuery請求返回的信息。但是這個功能只有在我開始調試的時候才起作用。我知道調試器糾正了這個主題的其他帖子的時間和範圍。但我找不到我的錯誤。我並不需要長時間的解釋，因爲我之前說過我對JavaScript/AJAX不是很熟悉。這是在頁面的腳本部分（你可以忽略addDropDown（）和departmentSelected（）函數（據我所知））：

<script type="text/javascript"> 
var isSelected = []; 

$(addDropDown); 

function addDropDown(){ 
    $.getJSON("./api/persence/departments/all", function(data, status){ 
     if(status !== "success"){ 
      alert(status); 
     }else{ 
      var dropdownHead = "<button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>Abteilungen<span class='caret'><\/span><\/button>"; 
      var dropdownBody = "<ul class='dropdown-menu'>"; 
          var i; 
      for(i = 0; i < data.length; i++){ 
       dropdownBody = dropdownBody + "<li><a href='javascript:departmentSelected(" + i + "," + data[i].departmentId + ");'>"; 
       dropdownBody = dropdownBody + data[i].departmentName; 
       dropdownBody = dropdownBody + " - "; 
       dropdownBody = dropdownBody + data[i].departmentCity; 
       dropdownBody = dropdownBody + "<\/a><\/li>"; 
      } 
      dropdownBody = dropdownBody + "<\/ul>"; 
      dropdownHead = dropdownHead + dropdownBody; 
      $("#dropdown-list").append(dropdownHead); 
          isSelected.length = i + 1; 
     } 

    }); 
    } 

    function departmentSelected(position, value){ 
     if((isSelected[position] !== value)){ 
      isSelected[position] = value; 
     }else{ 
      isSelected[position] = "false"; 
     } 
     loadTable(); 
    } 

    function loadTable(){ 
     var tHead = "<br><div class='table-responsive'><table class='table'><thead><tr><th>#</th><th>Name<\/th><th>Beruf<\/th><th>Anwesend<\/th><th>Arbeitsplatz<\/th><\/tr><\/thead>"; 
     var tBody = "<tbody>"; 
     for(var i = 0; i < isSelected.length; i++){ 
         var counter = 0; 
      if(isSelected[i] !== "false"){ 
       $.getJSON("./api/persence/departments/" + isSelected[i]).then(function(result, status){ 
        if(status !== "success"){ 
         alert(status); 
        }else{ 

         for(var i = 0; i < result.length; i++) { 
          var employee = result[i]; 
          tBody = tBody + "<tr> <td>" + counter + "<\/td>"; 
          tBody = tBody + "<td>" + employee.academicTitle + " " + employee.lastName + " " + employee.firstName + "<\/td>"; 
          tBody = tBody + "<td>" + employee.job + "<\/td>"; 
          tBody = tBody + "<td>"; 
          if(employee.persenceStatus === "Y"){ 
           tBody = tBody + employee.persenceSince; 
          }else{ 
                  // if(employee.absenceReason !== null){ 
           tBody = tBody + employee.absenceReason; 
                   // } 
                   //else{ 
                    // tBody = tBody + " "; 
                   //} 
          } 
          tBody = tBody + "<\/td>"; 
          tBody = tBody + "<td>" + employee.workplace + "<\/td>"; 
                  tBody = tBody + "<\/tr>"; 
                  counter++; 
         } 
        } 
       }); 
      } 
     } 
     tBody = tBody + "<\/tbody> <\/table> <\/div>"; 
     tHead = tHead + tBody; 
     document.getElementById("outputTable").innerHTML = tHead; 
     }

我的問題：我無法找到我在這個腳本部分做了什麼錯誤，因爲調試器（firebug）能夠在調試時優化代碼，所以它工作得很好。但是如果我不在調試模式下，只會顯示錶格的「標題」（信息缺失）。

感謝您的幫助。

來源

2016-03-10 M.Büßemeyer

當你沒有調試時，控制檯是否有錯誤？ – hurricane

控制檯僅顯示請求（例如，GET：http：// localhost：8080/PersenceProject/api/persence/departments/2）成功（代碼200）。如果我在另一個選項卡中打開請求，我會得到正確的JSON。所以我認爲功能的其他部分不起作用，但我不知道爲什麼。 –

好吧，我解決了自己的問題：我不得不把下面的部分進入由jQuery的要求調用的函數（函數（結果，狀態）.....）

TBODY = TBODY + 「</TBODY> </TABLE> </DIV>」; tHead = tHead + tBody; document.getElementById（「outputTable」）。innerHTML = tHead;

來源

2016-03-14 20:12:37

此問題與DOM中的查找元素有關。有時Js比DOM和Js更快在html DOM中找不到特定的元素。你需要在onLoad中定義js代碼。

$(function() { 
    $(addDropDown); 
});

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

Inportant信息：如果包括jQuery的不使用JS特定功能。有時它會和jquery一起崩潰。只需使用jQuery函數。

實例：不好：document.getElementById("outputTable") 好：'$.("#outputTable")'

來源

2016-03-10 14:29:01 hurricane

1.感謝您的幫助。我做了你所說的：'$（「＃outputTable」）.html（tHead）;'在該調用之前，我添加了'console.log（tHead）;'但變量不會打印到控制檯中。所以我不知道爲什麼？ –

我的JavaScript/AJAX功能只在調試時才起作用

回答

相關問題