Error: div is null Source file: chrome://schooxextension/content/jquery.js Line: 4481

Error: div is null Source file: chrome://schooxextension/content/jquery.js Line: 4481

Hello everyone I am developing an firefox extension and decided to use treeview plugin in order to view data into a tree. The problem that I am facing is that I am taking the following error when data binding is executed

Error: div is null Source file: chrome://schooxextension/content/jquery.js Line: 4481


Here is my javascript and XUL code

Javascript
=========
  1. var treeView = new function(){
     
      this.GetChildren = function(source){
        var children = new Array(source.length);
        children.push("<ul>");
        for(var i=0; i<source.length; i++){
          children.push("<li><span PageCategoryID='{0}' PagesNum='{2}' CourseId='{3}' class='file'>{1}</span></li>".format(
                  source[i].PageCategoryID,
                  source[i].CategoryName,
                  source[i].PagesNum,
                  source[i].CourseId));
        }
        children.push("</ul>");
        return children.join("");
      }
      this.BindData = function(){
       
        $("#treeContainer").treeview({
            animated: "medium",
            collapsed: false
        }
        );
       
        $.ajax({
          type: "POST",
          url: GET_CONTENT_URL,
          data: "",
          dataType: "json",
          success: function(response){
            if(response.Succeeded){
              alert('Success! Msg:' + JSON.stringify(response));
              var content = response.Body;
              var nodes = new Array(content.length);
              for(var i=0; i<content.length; i++){
                nodes.push("<li><span class='file'>{0}</span>{1}</li>".format(
                      content[i].CourseName,
                      treeView.GetChildren(content[i].Children)
                      ));
              }
              nodes = nodes.join("");

              var nodes = $(nodes).appendTo("#treeContainer");
             
              $("#treeContainer").treeview({
              add: nodes
              });
            }
            else{
              if(response.IsSystemError){                     
                util.ShowSystemError(response.Errors[0]);                   
              }
              else{
                util.ShowErrors(response.Errors);                      
              }
            }
          },
          error: function(xhr, errStatus){
            util.ShowSystemError('Status: ' + errStatus);
          }
        });
      } 
    }




























































XUL code
========
  1. <vbox flex="1" id="boxTreeView">
          <html:div id="treeContainer">       
          </html:div>
      </vbox>



Has anyone faced something similar on the past guys?


Thanks,
Alex