1 Reply Latest reply on Oct 10, 2016 11:19 AM by Nathan Panuco

    tableau.Viz() causes "Synchronous XMLHttpRequest on the main thread is deprecated..." message.

    Horatiu Negutoiu

      Hello,

       

      I have an angular v1.4 application that makes calls to a tableau server. The code is as follows:

      HTML:

      <tableau-visualization tabvisurl ="{{ visualizationURL }}"></tableau-visualization>

       

      AngularJS - directive:

      .directive('tableauVisualization', function (initiateTableauVisualizationService) {
          return {
              restrict: 'E',
              template: '<div class="tableauVis"></div>',
              replace: true,
              transclude: true,
              scope: {
                  tabvisurl: '@'
              },
              link: function (scope, element, attrs) {
                  // assign an ID to the last visualization added
                  var tableauVisualizations = document.getElementsByClassName("tableauVis");
                  var tableauVisualizationIndex = tableauVisualizations.length - 1;
                  var tableauVisualizationDiv = angular.element(tableauVisualizations[tableauVisualizationIndex]);
                  var tableauVisualizationId = "tabVis" + tableauVisualizationIndex;
                  tableauVisualizationDiv.attr('id', tableauVisualizationId);
      
                  // initiate the visualization using a service
                  var options = {
                      hideTabs: true,
                      hideToolbar: true,
                      width: "100%",
                      height: "800px"
                  };
                  var promise = initiateTableauVisualizationService
                      .initiateTableauVisualization(tableauVisualizationId, scope.tabvisurl, options);
                  console.log(promise);
              }
          };
      });
      

       

      AngularJS - service:

      .factory('initiateTableauVisualizationService', function () {
          return {
              initiateTableauVisualization: function (tableauVisualizationId, url, options) {
                  var containerDiv = document.getElementById(tableauVisualizationId);
                  var viz = new tableau.Viz(containerDiv, url, options);
                  return "Visualization generated!";
              }
          }
          });
      

       

      The single page application is tabbed, and the html content mentioned above is created only when the user clicks on the tab. Every time the user clicks on the tab, the Chrome console issues a warning saying "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/." The visualization/workbook loads, and everything works as expected. I have tried loading the visualization in it's own separate html document and the error is not issued. I have also tried commenting out the initialization and the warning stops.

       

      My question is: What am I doing wrong and how am I supposed to load the visualization using Angular without causing Chrome to issue that warning?

       

      Thank you in advance!

       

      Best regards.