QBoard » Advanced Visualizations » Viz - Tableau » How to execute a js function onload?
User Dashboard

How to execute a js function onload?

Back To Topics
Tags : javascript tableau-api initialization onload
  • 259
    Below is a fully functional and working code . When I copy paste it to a text file testFile.html and then open it with a browser it works fine.

    But I want the selectCollege function to execute right after the initViz function

    I tried this

    <body onload="initViz();selectCollege('Engineering');"> . . .

    But it didn't work. How can I make the selectCollege function to execute right after the initViz ?

    <!DOCTYPE html>
<html>

<head>
    <title>Select Marks</title>

    <script type="text/javascript" 
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

    <script type="text/javascript">
        var viz, sheet;

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
                options = {
                    "Academic Year": "",
                    hideTabs: true,
                    onFirstInteractive: function () {
                        sheet = viz.getWorkbook().getActiveSheet();
                    }
                };

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

        function selectCollege(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
        }

     </script>
</head>

<body onload="initViz();">
    <div id="vizContainer"></div>
    <br />    
    <button onclick="selectCollege('Engineering');">Select a value</button>

</body>

</html>​



      August 19, 2021 2:10 PM IST
    0
  • 346 3

    Create a new function

    function init(){
  initViz();
  selectCollege('Engineering');
}

     

    Then call the init function

    window.onload = init;
      September 4, 2021 12:34 PM IST
    0
  • 319 1 
    function initViz(college_name) {
 //your code

            viz = new tableau.Viz(containerDiv, url, options);
            
            //then
            selectCollege('engineering');
        }

        function selectCollege(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
        }
      November 30, 2021 12:32 PM IST
    0
  • 461
    The onload event occurs when an object has been loaded.

    onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

    The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

    The onload event can also be used to deal with cookies (see "More Examples" below).

    Using onload on an <img> element. Alert "Image is loaded" immediately after an image has been loaded:

    <img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

<script>
function loadImage() {
  alert("Image is loaded");
}
</script>​
      August 20, 2021 12:27 PM IST
    0
  • 317

    If you want the onload method to take parameters, you can do something similar to this:

    window.onload = function() {
  yourFunction(param1, param2);
};

     

    This binds onload to an anonymous function, that when invoked, will run your desired function, with whatever parameters you give it. And, of course, you can run more than one function from inside the anonymous function.

     
      January 13, 2022 1:31 PM IST
    0