make enough space for users to build up their ajax requests

dabeng · Dec 1, 2023 · 38a2449 · 38a2449
1 parent 3c0b089
commit 38a2449
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -249,10 +249,10 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>data</td>
-      <td>json or string</td>
+      <td>json</td>
       <td>yes</td>
       <td></td>
-      <td>datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.</td>
+      <td>datasource usded to build out structure of orgchart. It should be a json object.</td>
     </tr>
     <tr>
       <td>pan</td>
@@ -413,7 +413,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>no</td>
       <td></td>
-      <td>It can often be useful to know when your table has fully been initialised, data loaded and rendered, particularly when using an ajax data source. It receives one parament: "$chart" stands for jquery object of initialised chart.</td>
+      <td>It can often be useful to know when your table has fully been initialised, data loaded and rendered. It receives one parament: "$chart" stands for jquery object of initialised chart.</td>
     </tr>
     <tr>
       <td>icons</td>

diff --git a/demo/ajax-datasource.html b/demo/ajax-datasource.html
@@ -6,6 +6,16 @@
   <link rel="icon" href="img/logo.png">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    .spinner {
+      line-height: 420px;
+    }
+    .spinner::before {
+      width: 72px;
+      height: 72px;
+      border-radius: 36px;
+    }
+  </style>
 </head>
 <body>
   <div id="chart-container"></div>
@@ -46,10 +56,20 @@
         }
       });
 
-      $('#chart-container').orgchart({
-        'data' : '/orgchart/initdata',
-        'nodeContent': 'title'
-      });
+      $('#chart-container').append(`<i class="oci oci-spinner spinner"></i>`);
+      $.ajax({
+        'url': '/orgchart/initdata',
+        'dataType': 'json'
+      })
+        .done(function(data, textStatus, jqXHR) {
+          $('#chart-container').orgchart({
+            'data': data,
+            'nodeContent': 'title'
+          });
+        })
+        .always(function() {
+          $('#chart-container').children('.spinner').remove();
+        });
 
     });
   </script>

diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
@@ -76,28 +76,13 @@
         this.triggerInitEvent();
       }
       var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
-      if ($.type(data) === 'object') {
+
         if (data instanceof $) { // ul datasource
           this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
         } else { // local json datasource
           this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
         }
-      } else {
-        $chart.append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
-        $.ajax({
-          'url': data,
-          'dataType': 'json'
-        })
-        .done(function(data, textStatus, jqXHR) {
-          that.buildHierarchy($root, that.options.ajaxURL ? data : that.attachRel(data, '00'), 0, that.options);
-        })
-        .fail(function(jqXHR, textStatus, errorThrown) {
-          console.log(errorThrown);
-        })
-        .always(function() {
-          $chart.children('.spinner').remove();
-        });
-      }
+
       $chartContainer.append($chart);
 
       // append the export button

diff --git a/dist/js/jquery.orgchart.min.js b/dist/js/jquery.orgchart.min.js
diff --git a/dist/js/jquery.orgchart.min.js.map b/dist/js/jquery.orgchart.min.js.map
diff --git a/src/js/jquery.orgchart.js b/src/js/jquery.orgchart.js
@@ -76,28 +76,13 @@
         this.triggerInitEvent();
       }
       var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
-      if ($.type(data) === 'object') {
+
         if (data instanceof $) { // ul datasource
           this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
         } else { // local json datasource
           this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
         }
-      } else {
-        $chart.append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
-        $.ajax({
-          'url': data,
-          'dataType': 'json'
-        })
-        .done(function(data, textStatus, jqXHR) {
-          that.buildHierarchy($root, that.options.ajaxURL ? data : that.attachRel(data, '00'), 0, that.options);
-        })
-        .fail(function(jqXHR, textStatus, errorThrown) {
-          console.log(errorThrown);
-        })
-        .always(function() {
-          $chart.children('.spinner').remove();
-        });
-      }
+
       $chartContainer.append($chart);
 
       // append the export button