Chargement asynchrone et javascript inline

Hello à tous,

j'utilise require.js pour charger un fichier jquery.js qui contient donc jquery, jquery tabs et plein d'autre merdier dans ce fichier.

Le tout fonctionnait parfaitement jusqu'à ce que je déterre une partie qui ajoute ceci en bas de la page :

$(document).ready(function(){	
               $('#tabs').tabs('select', 'programme');
              });

(oui, le js inline, c'est mal, pas la peine de discourir, je suis au courant, mais dans ce cas, je ne peux pas faire autrement)
C'est donc pour sélectionner le Jquery tab.

$(document).ready(function(){	

plante et Firebug m'indique que le $ est undefined.

Quelqu'un a une idée pour solutionner ça ?

Merci d'avance, c'est le seul truc qui m'empêche de déployer un chargement asynchrone sur un gros site.

Ayant vu tes appels à l'aidesur twitter, j'ai envie de te répondre, même si je ne suis pas un cador du js.

Selon tes contraintes la solution que j'ai pour toi c'est de sortir jquery de require.js et de l'appeller via le CDN de google ou jquery.
Il se chargera avant ton javascript inline, et sera telechargé de façon asynchrone.


L'autre solution c'est de recoder ton plugin jquery tabs en javascript pur pour qu'il se lance dès le chargement...

La 1ere solution est nettement plus abordable

Good luck

Apparemment tu utilises ton script inline avant que jquery ne soit chargé. D'où l'erreur.

Personne je séparerais jquery des plugins et des scripts perso, en 3 fichiers js quoi et pas tout dans un seul.
Modifié par Patidou (24 Nov 2011 - 23:14)

Merci pour les réponses !

@Patidou : comme je l'ai indiqué plus haut, je ne peux pas pour le moment enlever ce bout de code, il est généré par un plugin du CMS, et je n'ai pas la possibilité de tout recoder (c'est un rewrite d'un rewrite PHP qui sélectionne le bon tab, une horreur en qq sorte).

Suivant qq conseils sur Twitter, j'ai essayé de mettre en callback de require.js une fonction, une bricole du genre :

<script type="text/javascript">
        require([
            "/layout/js/jquery.js",
        ], function(){
                    // si la fonction est définie on la charge
                    if (typeof do_after_load == "function"){
                       do_after_load();
                       }
         });
</script>

Mais j'ai fait chou blanc.

Pas d'autre solution à ma connaissance que d'appeler jQuery directement sans passer par require.js.

Au pire, si l'erreur "$ is undefined" (fort logique) ne te plante pas toute l'exécution de JS mais juste l'exécution de ce script, tu peux la laisser se planter et faire toi même l'initialisation des tabs dans tes propres scripts.