3 Replies Latest reply on May 26, 2017 6:13 AM by Maciek La

    Switching Tableau Viz using JS API in React

    Johann Quassowski

      I'm working on a portal using React. When I first select a Tableau Viz to render, it works fine. However, if I select another Tableau Viz (from a different site or workbook, or the same) to switch to, the "old" Viz remains in place - even though the initTableauViz function is actually called and executed again - and the rest of the component is updated correctly.

       

      As an error from the function, I get the following:

      1. tableau-2.1.0.js:7465 Uncaught [object Object]
        1. VizImpl$Create@tableau-2.1.0.js:7465
          $tableauSoftware_Viz@tableau-2.1.0.js:4790
          initTableauViz@tableau-view.js:40

       

      If I use a simple iFrame embed again, instead of the Tableau JS API, I can switch between different Viz as intended (just by changing the URL in the src attribute), but as this form of integration might have some limitations, compared to the JS API, it would be better to get it to work with the API as well.

        • 1. Re: Switching Tableau Viz using JS API in React
          Tamas Foldi

          you should always call .dispose() if you'd like to use the same div for

          different viz

          • 2. Re: Switching Tableau Viz using JS API in React
            Johann Quassowski

            Thanks for your response, Tamas. After some more trial-and-error, that has fixed it.

             

            I had tried using .dispose() before, but apparently what I did wrong was defining my viz variable within the initTableauViz function, rather than outside, before it, as for in the Dynamic Load example. (That way I could not actually dispose of the Viz previously created, while it would work during the same run of initTableauViz, for example in the onFirstInteractive block.)

            • 3. Re: Switching Tableau Viz using JS API in React
              Maciek La

              Your comment saved me from pulling my hair out. thx.

              for those who wander here:

               

              for embedding viz, instead of this:

               

              function initViz(variable) {

                  var containerDiv = document.getElementById("vizContainer2"),

                   url="http://link_to_your_dashboard",

                  options = {           

                                 hideTabs: false,

                                 hideToolbar: true

                            };

                  var viz = new tableau.Viz(containerDiv, url);

              }

               

              do this:

               

              var viz;

               

              function initViz(variable) {

                  var containerDiv = document.getElementById("vizContainer2"),

                   url="http://link_to_your_dashboard",

                  options = {           

                                 hideTabs: false,

                                 hideToolbar: true

                            };

                       if (viz ==undefined)

                       {

                         return false;

                        } else {

                        viz.dispose();

                        }

                  viz = new tableau.Viz(containerDiv, url);

              }

               

               

              I know that this is polluting the namespace slightly but at least it works.