Allow functions in AjaxURLS option

Author: dabeng

README.md

@@ -172,8 +172,14 @@ var datasource = {
 var ajaxURLs = {
   'children': '/orgchart/children/',
   'parent': '/orgchart/parent/',
-  'siblings': '/orgchart/siblings/',
-  'families': '/orgchart/families/'
+  // It would be helpful to have functions instead of URLs for the AJAX fetching
+  // as it would allow a more flexible treatment of the results.
+  'siblings': function(nodeData) {
+    return '/orgchart/siblings/' + nodeData.id;
+  },
+  'families': function(nodeData) {
+    return '/orgchart/families/' + nodeData.id;
+  }
 };
 
 $('#chart-container').orgchart({
@@ -533,7 +539,7 @@ $('#chartContainerId').orgchart(options);
       <td>toggleSiblingsResp</td><td>boolean</td><td>no</td><td>false</td><td>Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.</td>
     </tr>
     <tr>
-      <td>ajaxURL</td><td>json</td><td>no</td><td></td><td>It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety indicates the URL to which ajax request for different nodes is sent.</td>
+      <td>ajaxURL</td><td>json</td><td>no</td><td></td><td>It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.</td>
     </tr>
     <tr>
       <td>depth</td><td>positive integer</td><td>no</td><td>999</td><td>It indicates the level that at the very beginning orgchart is expanded to.</td>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <dabeng413@gmail.com>"

dist/js/jquery.orgchart.js

@@ -641,7 +641,7 @@
         // start up loading status
         if (startLoading($that, $node, opts)) {
         // load new nodes
-          $.ajax({ 'url': opts.ajaxURL.parent + nodeId + '/', 'dataType': 'json' })
+          $.ajax({ 'url': $.isFunction(opts.ajaxURL.parent) ? opts.ajaxURL.parent(nodeData) : opts.ajaxURL.parent + nodeId, 'dataType': 'json' })
           .done(function(data) {
             if ($node.closest('.orgchart').data('inAjax')) {
               if (!$.isEmptyObject(data)) {
@@ -673,7 +673,7 @@
       } else { // load the new children nodes of the specified node by ajax request
         var nodeId = $that.parent()[0].id;
         if (startLoading($that, $node, opts)) {
-          $.ajax({ 'url': opts.ajaxURL.children + nodeId + '/', 'dataType': 'json' })
+          $.ajax({ 'url': $.isFunction(opts.ajaxURL.children) ? opts.ajaxURL.children(nodeData) : opts.ajaxURL.children + nodeId, 'dataType': 'json' })
           .done(function(data, textStatus, jqXHR) {
             if ($node.closest('.orgchart').data('inAjax')) {
               if (data.children.length) {
@@ -749,9 +749,11 @@
       } else {
         // load the new sibling nodes of the specified node by ajax request
         var nodeId = $that.parent()[0].id;
-        var url = (getNodeState($node, 'parent').exist) ? opts.ajaxURL.siblings : opts.ajaxURL.families;
+        var url = (getNodeState($node, 'parent').exist) ?
+          ($.isFunction(opts.ajaxURL.siblings) ? opts.ajaxURL.siblings(nodeData) : opts.ajaxURL.siblings + nodeId) :
+          ($.isFunction(opts.ajaxURL.families) ? opts.ajaxURL.families(nodeData) : opts.ajaxURL.families + nodeId);
         if (startLoading($that, $node, opts)) {
-          $.ajax({ 'url': url + nodeId + '/', 'dataType': 'json' })
+          $.ajax({ 'url': url, 'dataType': 'json' })
           .done(function(data, textStatus, jqXHR) {
             if ($node.closest('.orgchart').data('inAjax')) {
               if (data.siblings || data.children) {

examples/ondemand-loading-data/scripts.js

@@ -5,7 +5,7 @@
   $(function() {
 
     $.mockjax({
-      url: '/orgchart/children/3/',
+      url: '/orgchart/children/3',
       contentType: 'application/json',
       responseTime: 1000,
       responseText: { 'children': [
@@ -15,14 +15,14 @@
     });
 
     $.mockjax({
-      url: '/orgchart/parent/1/',
+      url: '/orgchart/parent/1',
       contentType: 'application/json',
       responseTime: 1000,
       responseText: { 'id': '6','name': 'Lao Lao', 'title': 'general manager', 'relationship': '001' }
     });
 
     $.mockjax({
-      url: '/orgchart/siblings/1/',
+      url: '/orgchart/siblings/1',
       contentType: 'application/json',
       responseTime: 1000,
       responseText: { 'siblings': [
@@ -37,7 +37,7 @@
     });
 
     $.mockjax({
-      url: '/orgchart/families/1/',
+      url: '/orgchart/families/1',
       contentType: 'application/json',
       responseTime: 1000,
       responseText: {
@@ -70,8 +70,12 @@
     var ajaxURLs = {
       'children': '/orgchart/children/',
       'parent': '/orgchart/parent/',
-      'siblings': '/orgchart/siblings/',
-      'families': '/orgchart/families/' 
+      'siblings': function(nodeData) {
+        return '/orgchart/siblings/' + nodeData.id;
+      },
+      'families': function(nodeData) {
+        return '/orgchart/families/' + nodeData.id;
+      }
     };
 
     $('#chart-container').orgchart({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [