2017-08-21 3 views
1

Voici un code fonctionnel et fonctionnel. Lorsque je copie le coller dans un fichier texte testFile.html puis l'ouvrir avec un navigateur, cela fonctionne très bien.Comment exécuter une fonction js onload?

Mais je veux la fonction selectCollege à exécuter juste après la fonction initViz

J'ai essayé

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

Mais cela n'a pas fonctionné. Comment puis-je exécuter la fonction selectCollege juste après le 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> 
+3

' '(notez le' 'manquant' " 'dans l'exemple que vous avez donné) –

+0

Pourquoi ne pas simplement ajouter' selectCollege ('Engineering') 'à la fin de la fonction initViz – Frankusky

+0

Dépend de si vous voulez avant ou après dom a rendu. Vous pouvez simplement exécuter la commande sans init –

Répondre

2

En selectCollege() vous essayez d'accéder sheet avant qu'elle soit définie dans la fonction de rappel de l'objet tableau.Vizoptions, à savoir onFirstInteractive(). Pour résoudre ce problème, vous pouvez appeler la fonction après avoir défini sheet dans cette fonction:

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

Et selon this forum, onFirstInteractive() sera appelée une fois lorsque votre instance de tableau.Viz est d'abord rendu.

+1

MERCI BEAUCOUP. CECI EST LA SEULE RÉPONSE DE TRAVAIL – john

3

Créer une nouvelle fonction

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

Ensuite, appelez la fonction init

window.onload = init; 
+0

Cela va faire fonctionner les fonctions en parallèle, pas après la première fonction – Frankusky

+0

D'intérêt, comme je viens de le chercher, l'effet de 'window.onload' est identique à' body onload', mais [il y a de bonnes raisons pour préférer le premier] (https://stackoverflow.com/a/191318/1270789). –

+0

@Frankusky cette déclaration est complètement invalide. JavaScript est mono-thread, et cela invoque en effet 'initViz()', puis 'selectCollege()' par la suite. –

2

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

utiliser comme ceci

2

Cela fonctionne pour moi

function bar() { 
 
    alert("bar"); 
 
} 
 
function foo() { 
 
    alert("foo"); 
 
}
<!DOCTYPE html> 
 
<html> 
 
<body onload="bar();foo();"> 
 

 
</body> 
 
</html>

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

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

Appelez votre fonction juste avant la fermeture de corps dans une balise de script.

Arborescence HTML interprétée de manière séquentielle. C'est comme ça que j'ajoute un message de chargement pour les SPAs.