Question

我对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;
        }

我的问题：我在这个scriptpart中找不到我做错了什么，因为调试器（firebug）能够在调试时优化代码，所以它工作得很好。但是如果我不处于调试模式，则只显示表格的“标题”（缺少信息）。

感谢您的帮助。

Answer 1

这个问题与DOM中的查找元素有关。有时Js比DOM快，Js在html DOM中找不到特定的元素。您需要在onLoad中定义js代码。

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

OR

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

重要信息：如果包含jQuery，请不要使用JS特定的功能。有时它会崩溃jquery。只需使用jQuery函数。

实施例：不好：document.getElementById("outputTable") good ：'$.("#outputTable")'

Answer 2

好的，我自己解决了这个问题：我必须将以下部分放入jQuery请求调用的函数中（函数（结果，状态）.....）

tBody = tBody +＆＃34;＆lt; / tbody＆gt; ＆LT; /表＆gt; ＆LT; / DIV＆GT;＆＃34 ;; tHead = tHead + tBody; document.getElementById（＆＃34; outputTable＆＃34;）。innerHTML = tHead;

我的JavaScript / AJAX函数仅在调试时有效

2 个答案: