jQuery plugin jsTree does not show up on page.
Hi everybody!
I am new to Javascript and jQuery. Trying to learn. So, forgive me if this appears to be a silly mistake.
I have a jsTree component on one of my aspx page. The tree gets its data via an ajax call to a WebService Method. I can see in the debugger that my WebService method does get called and it returns the data as expected. But the tree doesn't display at all. What am I doing wrong? I have pasted the relevant parts of the files here. The server side is in C# code.
Parts from my aspx file:
<link href="tree_component.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/tree_component.js" type="text/javascript"></script>
<script src="Scripts/css.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#jsTree").tree({
data: {
type: "json",
method: "POST",
async_data: function(NODE) { return { parentId : jQuery(NODE).attr("parentId") || 0 } },
url: "JSTreeService.asmx/GetJSCategories",
async: true
}
});
});
</script>
<body>
<form id="form1" runat="server">
<div id="jsTree">
</div>
</form>
</body>
My WebService Method "JSTreeService.asmx/GetJSCategories":
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<JSTreeNode> GetJSCategories(int parentId)
{
TaxonomiesDataContext catDC = new TaxonomiesDataContext();
IEnumerable<Category> cats;
List<JSTreeNode> nodes = new List<JSTreeNode>();
if (parentId == 0)
cats = catDC.Categories.AsEnumerable()
.Where(t => (t.PKId == t.ParentId) && (t.PKId > 0));
else
cats = catDC.Categories.AsEnumerable()
.Where(t => (parentId == t.ParentId) && (t.PKId != t.ParentId));
foreach (Category eCat in cats)
{
JSTreeNode node = new JSTreeNode();
node.attributes = new Attributes();
node.attributes.id = "Cat" + eCat.PKId.ToString();
node.attributes.parentId = parentId.ToString();
node.hasChildren = eCat.Categories.Count() > 1;
node.attributes.rel = node.hasChildren ? "folder" : "";
node.data = new Data();
node.data.title = eCat.Name;
node.state = "open";
node.attributes.mdata = "{draggable : true}";
nodes.Add(node);
}
return nodes;
}
And the relevant classes that make up the "JSTreeNode":
[Serializable]
public class Attributes
{
string _id;
public string id
{ get { return _id; } set { _id = value; } }
string _parentId;
public string parentId
{ get { return _parentId; } set { _parentId = value; } }
string _rel;
public string rel { get { return _rel; } set { _rel = value; } }
string _mdata;
public string mdata { get { return _mdata; } set { _mdata = value; } }
}
[Serializable]
public class Data
{
string _title;
public string title { get { return _title; } set { _title = value; } }
string _icon;
public string icon { get { return _icon; } set { _icon = value; } }
}
[Serializable]
public class JSTreeNode
{
public JSTreeNode()
{
}
Attributes _attributes;
public Attributes attributes {get{return _attributes;}set{_attributes = value;}}
Data _data;
public Data data { get { return _data; } set { _data = value; } }
string _state;
public string state { get { return _state; } set { _state = value; } }
bool _hasChildren = false;
public bool hasChildren { get { return _hasChildren; } set { _hasChildren = value; } }
List<JSTreeNode> _children;
public List<JSTreeNode> children { get { return _children; } set { _children = value; } }
}