How to execute a js function onload?

Question

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>

Why just dont add `selectCollege('Engineering')` at the end of initViz function — Frankusky, Aug 21 '17 at 00:59
Depends on if you want before or after dom has rendered. You could just run the command without init — Judson Terrell, Aug 21 '17 at 01:02
@PatrickRoberts yes it;s a typo in the question. in my file I have the `quote` i use a color coding editor. So the quote is there, but still doesn't work — john, Aug 21 '17 at 01:20
Well, I also notice that `sheet` isn't initialized until `onFirstInteractive()` is invoked, so maybe what you're requesting is impossible. What does the error log say when you try my suggestion? My guess is that it says `Uncaught TypeError: Cannot read property 'selectMarksAsync' of undefined` — Patrick Roberts, Aug 21 '17 at 01:24
@Frankusky I tried adding it at the end of `initViz` with no result — john, Aug 21 '17 at 01:29
@PatrickRoberts maybe it is impossible. i tried all answers below. None of the solutions work with that code. — john, Aug 21 '17 at 01:33

score 3 · Answer 1 · answered Aug 21 '17 at 01:00

3

Create a new function

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

Then call the init function

window.onload = init;

answered Aug 21 '17 at 01:00

That will make the functions run in parallel, not after the first function – Frankusky Aug 21 '17 at 01:03
Of interest, as I just had to look it up, the effect of `window.onload` is identical to `body onload`, but [there are good reasons to prefer the first](https://stackoverflow.com/a/191318/1270789). – Ken Y-N Aug 21 '17 at 01:05
@Frankusky that statement is completely invalid. JavaScript is single-threaded, and this does indeed invoke `initViz()` and then `selectCollege()` sequentually. – Patrick Roberts Aug 21 '17 at 01:25

score 3 · Accepted Answer · answered Aug 21 '17 at 01:49

In selectCollege() you are attempting to access sheet before it is defined in the callback function from the tableau.Viz options object, namely onFirstInteractive(). In order to solve this, you can call the function after defining sheet in that function:

options = {
  ...
  onFirstInteractive: function () {
    sheet = viz.getWorkbook().getActiveSheet();
    selectCollege('Engineering');
  }
};

And according to this forum, onFirstInteractive() will be called once when your instance of tableau.Viz is first rendered.

THANK YOU VERY MUCH. THIS IS THE ONLY WORKING ANSWER – john Aug 21 '17 at 02:15 — john, Aug 21 '17 at 02:15

score 2 · Answer 3 · answered Aug 21 '17 at 01:06

 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);
        }

Use it like this

score 2 · Answer 4 · answered Aug 21 '17 at 01:19

2

This works for me

function bar() {
  alert("bar");
}
function foo() {
  alert("foo");
}

<!DOCTYPE html>
<html>
<body onload="bar();foo();">

</body>
</html>

answered Aug 21 '17 at 01:19

clabe45

2,354
16
27

score 0 · Answer 5 · answered Aug 21 '17 at 01:32

...
<body>
... All other tags..
<script>
//just before closing body
function(){

}()
</script>
</body>
....

Call your function just before closing body within a script tag.

HTML tree interpreted sequentially. So that's how I add loading message for SPAs.

How to execute a js function onload?

5 Answers5