3

We are using Tableau API to embed two workbooks. each workbook is embedded in an iframe. The issue is when we go from one workbook to another we get the error "tableau-2.0.0.min.js:147 Uncaught Error: Another viz is already present in element 'div#iFrameDiv'."

here is how our process runs in a nutshell.

when the users access our customized web page, we initialize a workbook using this code:

function initializeVizSummary() {
   var placeholderDiv = document.getElementById("iFrameDiv"),

    url = "https://10ay.online.tableau.com/t/site/views/workbook1/Summary",
        options = {
            width: "100%",
            height: 1250,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function () {
                workbook = viz.getWorkbook();
                activeSheet = workbook.getActiveSheet();                
            }
        };
    viz = new tableau.Viz(placeholderDiv, url, options);
}  

then the user clicks on a link that initializes another workbook by using this function:

function initCustomDashboard(){
    var placeholderCustomDiv = document.getElementById("iFrameDiv2");
    var customUrl = "https://10ay.online.tableau.com/t/site/views/workbook2/summary2";
    options = {
            width: "100%",
            height: 1250,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function () {
                workbook = viz.getWorkbook();                   
        }   
    };

    viz = new tableau.Viz(placeholderCustomDiv, customUrl,options);
}

The above works fine but when the user want to go the first workbook, we get the error "tableau-2.0.0.min.js:147 Uncaught Error: Another viz is already present in element 'div#iFrameDiv'."

Going thru the documentation (https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm). It seems the solution is to use the dispose method

So I issue viz.dispose() right before the second call to initializeVizSummary() but that doesn't seem to work because when I do viz.getWorkbook(). It gets the second workbook.

What am I doing wrong?

Thanks

somesingsomsing
  • 3,182
  • 4
  • 29
  • 46

1 Answers1

0

So Dispose works fine after all. My mistake was using two elements to populate each workbook #iFrameDiv #iFrameDiv2. So the correct setup is to have one DOM elements to populate the workbook, just make sure to issue viz.dispose() before loading the workbook

somesingsomsing
  • 3,182
  • 4
  • 29
  • 46