Chart displays but 'init.orgchart' does not fire if using ajax

[andyp05]

Love the package, but I have run into a problem.

When using ajax, the initcompleted function fires but the DOM has not been updated so adding an onclick event does not work. additionally, oc.$chart.on('init.orgchart', function(e) {...} never fires.

var oc = $('#chart-container').orgchart({
      'data': '/api/overview/',
      'nodeContent': 'title',
      'verticalLevel': 3,
      'direction': 't2b',
      'visibleLevel': 4,
      'parentNodeSymbol': '',
      'nodeId': 'id',
      'initCompleted': function($chart) {
        // nodes are not rendered in the DOM at this point, so the find() returns nothing
         $chart.find('.et-1').click(function() {
          window.location.href = '/et/1/';
        });
      },
    });

    // this never fires:
    oc.$chart.on('init.orgchart', function(e) {...}

If I use a local datasource, they both work as expected.

How can I add an onclick event to nodes with a certain className when using ajax?

Thanks for your help.

[dabeng]

I'm very appreciated for your applying orgchart plugin in your project 😊

Do you got the same error when using latest version 2.1.9 ?

[andyp05]

2.1.9 does not fix the issue.

If I set 'data' the 'initCompleted' fires with the DOM updated.

If I set 'url', 'initCompleted' fires with no DOM for the orgchart. Therefore I cannot set an onclick event.

[shahimclt]

Yes. same goes for on-demand loading. it would be nice to fire an event every time new nodes are added so that we can initialize tooltips and such. Let me know if you need me to send a PR.

[DigitalSkateboarder]

I have come across this in the latest version. When using an Ajax datasource, initCompleted runs straight away and not actually when it has all been loaded

[diogenesc]

I have come across this in the latest version. When using an Ajax datasource, initCompleted runs straight away and not actually when it has all been loaded

Same here

[philipnorton42]

I encountered the same problem as discussed here. I'm thinking it's because of the promises based call to the ajax backend that causes the init callback to be called before the content is loaded. This meant that I couldn't centre the chart since the chart didn't exist at that point.

If you're interested, I think I have a (somewhat hacky) solution to this problem. By using a MutationObserver it's possible to detect when the hierarchy is added and force my centre function to be called.

      var mo = new MutationObserver(function (mutations) {
        centreOrgChart:
          for (var i = 0; i < mutations.length; i++) {
            for (var j = 0; j < mutations[i].addedNodes.length; j++) {
              if (mutations[i].addedNodes[j].classList.contains('hierarchy')) {
                centreChart();
                mo.disconnect();
                break centreOrgChart;
              }
            }
          }
      });
      mo.observe(document.querySelector("#chart-container"), { childList: true, subtree: true });

The centreChart() function just applies a scrollLeft function to the chart, which I have seen on other issues for this project.

      function centerChart() {
        var $container = $('#chart-container');
        $container.scrollLeft(Math.max($container[0].scrollWidth - $container.width(), $container.width())/2);
      }