通过 ajax 回调 Javascript 更新 DOM

Question

我正在开发一个允许用户存储给定日期事件的日历。当我每个月更新日历时，我会创建新节点并为它们分配一个 id，这样我以后就可以向它们附加一些东西，如下所示：

 var i = 1;
  for(var w in weeks){
    var days = weeks[w].getDates();
    // days contains normal JavaScript Date objects.

   // alert("Week starting on "+days[0]);
    var which_week = "week"+i;
    i++;
    for(var d in days){     
      console.log(days[d].toISOString());
      var tr = document.getElementById(which_week);
      if(days[d].getMonth()==month){

        var newDay = document.createElement("div");
        newDay.appendChild(document.createTextNode(days[d].getDate()));
        //alert(newDay.data);
        newDay.setAttribute("id", newDay.lastChild.data);
        $(tr).append('<td><a class="linky" href="#">'+newDay.lastChild.data+'</a></td>');
      }
      else{
        $(tr).append('<td class="disabledCell"><a class="linky disabledLink" href="#">'+days[d].getDate()+'</a></td>');
      }
    }
  }
  getEvents();
}

我修改节点：

function ajaxEventCallback(event){
  var data = event.target.responseText;
  data = JSON.parse(event.target.responseText);
  for  (var i = 0; i < data.length; i++) 
    //alert("event: " + data[i].title);
    //
    var dayOfEvent= data[i].day;
    document.getElementById(dayOfEvent).appendChild(data[i].title);

}

我在最后一行代码中遇到 "cannot read property append child of null" 错误。我认为这是一个范围界定问题，但我不知道从哪里开始解决它。

Answer 1

在全球范围内：

var allWeeks = [];

在第一个函数中：

var i = 1;
for(var w in weeks){
    var days = weeks[w].getDates();
    // days contains normal JavaScript Date objects.

    // week object used to store the days until it is added to the array
    var week = [];

    var which_week = "week"+i;
    i++;
    for(var d in days){     
        console.log(days[d].toISOString());
        var tr = document.getElementById(which_week);
        if(days[d].getMonth()==month){

            // add the day to the temporary week object
            week.push(days[d].getDate());

            $(tr).append('<td><a class="linky" href="#">' + days[d].getDate() + '</a></td>');
        }
        else{
            $(tr).append('<td class="disabledCell"><a class="linky disabledLink" href="#">'+days[d].getDate()+'</a></td>');
        }

    }

    // add the temporary week array to the array of weeks
    allWeeks.push(week);
}

在ajax事件中：

function ajaxEventCallback(event){
    var data = event.target.responseText;
    data = JSON.parse(event.target.responseText);

    for  (var i = 0; i < data.length; i++) {
        var dayOfEvent = data[i].day;
        // Here you add the event to the appropriate day in the array
    }
}

通过 ajax 回调 Javascript 更新 DOM

updating DOM through ajax call back with Javascript

javascript

ajax

dom

scope

dynamic