Get data throught ajax request

README.md

@@ -247,6 +247,21 @@ Array of Objects.  No default, expects data
 
 This is the core data to be displayed by the tree view.
 
+#### dataUrl
+jQuery Ajax settings object, [as documented here](http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings).
+
+Accepts a set of key/value pairs that configure an Ajax request.  All settings are optional, any provided will be merge with the following default configuration.
+
+```javascript
+{
+  method: 'GET',
+  dataType: 'json',
+  cache: false
+}
+```
+
+> JSON is the only format accepted.
+
 #### backColor
 String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: inherits from Bootstrap.css.
 
@@ -585,6 +600,14 @@ Returns an array of unselected nodes e.g. state.selected = false.
 $('#tree').treeview('getUnselected', nodeId);
 ```
 
+#### reload()
+
+Reload the tree view component.
+
+```javascript
+$('#tree').treeview('reload');
+```
+
 #### remove()
 
 Removes the tree view component. Removing attached events, internal attached objects, and added HTML elements.
@@ -727,6 +750,18 @@ $('#tree').on('nodeSelected', function(event, data) {
 
 ### List of Events
 
+#### Lifecycle Events
+
+> Use callback handlers for lifecycle events otherwise you'll miss the events fired during creation.
+
+`loading (event)`  - The tree has initiated data loading.
+
+`loadingFailed (event, error)`  - The tree failed to load data (ajax error)
+
+`initialized (event, nodes)`  - The tree has initialized itself and data ready for rendering.
+
+#### State Events
+
 `nodeChecked (event, node)`  - A node is checked.
 
 `nodeCollapsed (event, node)`  - A node is collapsed.
@@ -748,7 +783,6 @@ $('#tree').on('nodeSelected', function(event, data) {
 `searchCleared (event, results)`  - After search results are cleared
 
 
-
 ## Copyright and Licensing
 Copyright 2013 Jonathan Miles
 

public/js/bootstrap-treeview.js

@@ -60,6 +60,9 @@
 		multiSelect: false,
 
 		// Event handlers
+		onLoading: undefined,
+		onLoadingFailed: undefined,
+      onInitialized: undefined,
 		onNodeChecked: undefined,
 		onNodeCollapsed: undefined,
 		onNodeDisabled: undefined,
@@ -83,6 +86,12 @@
 		revealResults: true
 	};
 
+   _default.dataUrl = {
+		method: 'GET',
+		dataType: 'json',
+		cache: false
+	};
+
 	var Tree = function (element, options) {
 
 		this.$element = $(element);
@@ -100,6 +109,9 @@
 			init: $.proxy(this.init, this),
 			remove: $.proxy(this.remove, this),
 
+         // Reload method
+			reload: $.proxy(this.reload, this),
+
 			// Get methods
 			getNode: $.proxy(this.getNode, this),
 			getParent: $.proxy(this.getParent, this),
@@ -150,20 +162,74 @@
 
 		this.tree = [];
 		this.nodes = [];
-
-		if (options.data) {
-			if (typeof options.data === 'string') {
-				options.data = $.parseJSON(options.data);
-			}
-			this.tree = $.extend(true, [], options.data);
-			delete options.data;
-		}
+		this.initialized = false;
 		this.options = $.extend({}, _default.settings, options);
 
 		this.destroy();
 		this.subscribeEvents();
-		this.setInitialStates({ nodes: this.tree }, 0);
-		this.render();
+		this.triggerEvent('loading', null, _default.options);
+
+		this.load(options)
+			.then($.proxy(function (data) {
+				// load done
+				return this.tree = $.extend(true, [], data);
+			}, this), $.proxy(function (error) {
+				// load fail
+				this.triggerEvent('loadingFailed', error, _default.options);
+			}, this))
+			.then($.proxy(function (treeData) {
+				// initialize data
+				return this.setInitialStates({ nodes: treeData }, 0);
+			}, this))
+			.then($.proxy(function () {
+				// render to DOM
+				this.render();
+      }, this));
+	};
+
+   Tree.prototype.load = function (options) {
+		var done = new $.Deferred();
+		if (options.data) {
+			this.loadLocalData(options, done);
+		} else if (options.dataUrl) {
+			this.loadRemoteData(options, done);
+		}
+		return done.promise();
+	};
+
+	Tree.prototype.loadRemoteData = function (options, done) {
+		$.ajax($.extend(true, {}, _default.dataUrl, options.dataUrl))
+			.done(function (data) {
+				done.resolve(data);
+			})
+			.fail(function (xhr, status, error) {
+				done.reject(error);
+			});
+	};
+
+	Tree.prototype.loadLocalData = function (options, done) {
+		done.resolve((typeof options.data === 'string') ?
+								$.parseJSON(options.data) :
+								$.extend(true, [], options.data));
+	};
+
+	Tree.prototype.reload = function () {
+		this.load(this.options)
+			.then($.proxy(function (data) {
+				// load done
+				return this.tree = $.extend(true, [], data);
+			}, this), $.proxy(function (error) {
+				// load fail
+				this.triggerEvent('loadingFailed', error, _default.options);
+			}, this))
+			.then($.proxy(function (treeData) {
+				// initialize data
+				return this.setInitialStates({ nodes: treeData }, 0);
+			}, this))
+			.then($.proxy(function () {
+				// render to DOM
+				this.render();
+      }, this));
 	};
 
 	Tree.prototype.remove = function () {
@@ -189,6 +255,9 @@
 	Tree.prototype.unsubscribeEvents = function () {
 
 		this.$element.off('click');
+		this.$element.off('loading');
+		this.$element.off('loadingFailed');
+      this.$element.off('initialized');
 		this.$element.off('nodeChecked');
 		this.$element.off('nodeCollapsed');
 		this.$element.off('nodeDisabled');
@@ -207,6 +276,18 @@
 
 		this.$element.on('click', $.proxy(this.clickHandler, this));
 
+		if (typeof (this.options.onLoading) === 'function') {
+			this.$element.on('loading', this.options.onLoading);
+		}
+
+		if (typeof (this.options.onLoadingFailed) === 'function') {
+			this.$element.on('loadingFailed', this.options.onLoadingFailed);
+		}
+
+		if (typeof (this.options.onInitialized) === 'function') {
+			this.$element.on('initialized', this.options.onInitialized);
+      }
+
 		if (typeof (this.options.onNodeChecked) === 'function') {
 			this.$element.on('nodeChecked', this.options.onNodeChecked);
 		}
@@ -248,6 +329,12 @@
 		}
 	};
 
+   Tree.prototype.triggerEvent = function (event, data, options) {
+		if (options && !options.silent) {
+			this.$element.trigger(event, $.extend(true, {}, data));
+		}
+	};
+
 	/*
 		Recurse the tree structure and ensure all nodes have
 		valid initial states.  User defined states will be preserved.
@@ -321,20 +408,20 @@
 		var target = $(event.target);
 		var node = this.findNode(target);
 		if (!node || node.state.disabled) return;
-		
+
 		var classList = target.attr('class') ? target.attr('class').split(' ') : [];
 		if ((classList.indexOf('expand-icon') !== -1)) {
 
 			this.toggleExpandedState(node, _default.options);
 			this.render();
 		}
 		else if ((classList.indexOf('check-icon') !== -1)) {
-			
+
 			this.toggleCheckedState(node, _default.options);
 			this.render();
 		}
 		else {
-			
+
 			if (node.selectable) {
 				this.toggleSelectedState(node, _default.options);
 			} else {
@@ -516,7 +603,7 @@
 				.addClass(node.state.checked ? 'node-checked' : '')
 				.addClass(node.state.disabled ? 'node-disabled': '')
 				.addClass(node.state.selected ? 'node-selected' : '')
-				.addClass(node.searchResult ? 'search-result' : '') 
+				.addClass(node.searchResult ? 'search-result' : '')
 				.attr('data-nodeid', node.nodeId)
 				.attr('style', _this.buildStyleOverride(node));
 
@@ -548,13 +635,13 @@
 
 			// Add node icon
 			if (_this.options.showIcon) {
-				
+
 				var classList = ['node-icon'];
 
 				classList.push(node.icon || _this.options.nodeIcon);
 				if (node.state.selected) {
 					classList.pop();
-					classList.push(node.selectedIcon || _this.options.selectedIcon || 
+					classList.push(node.selectedIcon || _this.options.selectedIcon ||
 									node.icon || _this.options.nodeIcon);
 				}
 
@@ -569,7 +656,7 @@
 
 				var classList = ['check-icon'];
 				if (node.state.checked) {
-					classList.push(_this.options.checkedIcon); 
+					classList.push(_this.options.checkedIcon);
 				}
 				else {
 					classList.push(_this.options.uncheckedIcon);
@@ -935,7 +1022,7 @@
 		this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
 			this.toggleExpandedState(node, options);
 		}, this));
-		
+
 		this.render();
 	};
 
@@ -1085,7 +1172,7 @@
 
 		$.each(identifiers, $.proxy(function (index, identifier) {
 			callback(this.identifyNode(identifier), options);
-		}, this));	
+		}, this));
 	};
 
 	/*
@@ -1156,9 +1243,9 @@
 		});
 
 		if (options.render) {
-			this.render();	
+			this.render();
 		}
-		
+
 		this.$element.trigger('searchCleared', $.extend(true, {}, results));
 	};