javascript - How to execute a js function onload?

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=".min.js"></script>

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

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "",
                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>

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./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./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>

Share Improve this question edited Aug 21, 2017 at 1:44 Patrick Roberts 52.1k10 gold badges117 silver badges163 bronze badges asked Aug 21, 2017 at 0:56 john 7076 gold badges25 silver badges55 bronze badges

3 <body onload="initViz();selectCollege('Engineering');> -> <body onload="initViz();selectCollege('Engineering');"> (note the missing " in the example you gave) – Patrick Roberts Commented Aug 21, 2017 at 0:59
Why just dont add selectCollege('Engineering') at the end of initViz function – Frankusky Commented Aug 21, 2017 at 0:59
Depends on if you want before or after dom has rendered. You could just run the mand without init – Judson Terrell Commented Aug 21, 2017 at 1: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 Commented Aug 21, 2017 at 1: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 Commented Aug 21, 2017 at 1:24

| Show 2 more ments

5 Answers 5

Sorted by: Reset to default 3

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.

Create a new function

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

Then call the init function

window.onload = init;

 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

This works for me

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

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

</body>
</html>

...
<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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to execute a js function onload? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)