web-dev-qa-db-fra.com

google.setOnLoadCallback avec jQuery $ (document) .ready (), est-ce OK de mélanger?

J'utilise l'API Google Ajax et ils suggèrent d'utiliser google.setOnLoadCallback() pour faire diverses choses liées à leur API, mais j'utilise également $(document).ready() de jQuery pour faire d'autres choses JS, sans rapport avec API Google.

Est-il sûr de mélanger ces deux approches dans un seul document? Je n'ai pas encore remarqué de problème mais je suppose que c'est une question d'échelle.

javascriptjqueryonloadgoogle-ajax-api
56
zgoda

Vous devez à peu près faire ceci:

google.setOnLoadCallback(function() {
  $(function() {
    // init my stuff
  });
});

Vous ne pouvez pas faire $(document).ready() sans que $ (L'objet jQuery) soit disponible, donc cela doit aller à l'intérieur du rappel. Et vous ne pouvez pas être sûr que le document est prêt à l'intérieur du rappel, vous devez donc faire ready() aussi.

68
cletus

Désolé de soulever cela d'entre les morts, mais 1) Cela revient toujours comme une "réponse" à ce problème et 2) J'ai trouvé une meilleure solution.

Il y a un 3e argument optionnel sur le google.load fonction qui prend un objet d'options de configuration. L'une des options est callback. Il supprime également la nécessité d'un appel setOnLoadCallback distinct.

Par exemple.

google.load('visualization', '1.0', {
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me)
});

Donc:

<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
    function mapsLoaded() {
        etc etc etc
    }

    google.load("maps", "2", {"callback" : mapsLoaded});
});
</script>

Voir: https://developers.google.com/loader/#Dynamic

49
Dawn

Si votre code JavaScript réside dans son propre fichier js et non à l'intérieur du document HTML, vous pouvez également le faire dans le document:

<script>
        google.load("jquery", "1.7.0");
        google.load("jqueryui", "1.8.16");
        google.setOnLoadCallback(function() {
             var script = document.createElement("script");
             script.setAttribute("type", "text/javascript");
             script.setAttribute("src", "my.js");
             document.getElementsByTagName("html")[0].appendChild(script);
        });
</script>

Cela charge my.js Une fois que tous les autres éléments sont chargés à partir de Google. Dans votre fichier my.js, Vous pouvez alors faire $(document).ready(...). Votre code d'application est donc indépendant de "chargé par google" ou "chargé directement depuis votre serveur".

6
andy

Pourquoi mélanger quand on peut tout faire avec $(document).ready()? Débarrassez-vous simplement de la fonction google.setOnLoadCallback Et utilisez $(document).ready() de jQuery.

Ce:

google.setOnLoadCallback(chartEnrollment);

devient

$(document).ready(chartEnrollment);
4
Vincent