admin管理员组

文章数量:1432627

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>
  • javascript
  • initialization
  • tableau-api
  • onload
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 johnjohn 7076 gold badges25 silver badges55 bronze badges 7
  • 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

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.

本文标签： javascriptHow to execute a js function onloadStack Overflow

版权声明：本文标题：javascript - How to execute a js function onload? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745534230a2662198.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。