11519 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je cherche à réaliser une paire de widget qui feraient appel à des scripts utilisant la bibliothèque jQuery. Un élément clé est de s'adapter à la page hôte selon qu'elle charge déjà ou non jQuery.

J'ai trouvé un template widget qui a l'air sympa (non ?) mais j'ai du mal à l'adapter. Je bloque sur la notion de jQuery en tant que variable ou en tant que fonction et comment la transmettre.

Dans le template la structure est comme ceci :
- définition d'une fonction loadScript
- load jQuery qui devient une variable (et une fonction ?) et déclenchement d'une fonction main()
- load scripts js après document.ready

En testant le code, je tombe toujours sur 'jQuery is not a function'.
TypeError: jQuery is not a function
	

jQuery(function ($) {


Toujours d'après firebug, les bibliothèques sont correctement chargées :
<script type="text/javascript" src="http://localhost:8888/BAS/bm_widget/code-example.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript" src="http://localhost:8888/BAS/bm_widget/master.js">


Ma question est "pourquoi jQuery n'est plus défini lors de la lecture de master.js ? J'espère que je suis assez clair, voici le code simplifié :

code-example.html
<script src="http://localhost:8888/BAS/bm_widget/code-example.js" type="text/javascript"></script>


master.js
jQuery(function ($) {
    $('#slickQuiz').slickQuiz();
});


code-example.js (template)
(function () {
 
var scriptName = "code-example.js"; //name of this script, used to get reference to own tag
var jQuery; //noconflict reference to jquery
var jqueryPath = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
var jqueryVersion = "1.8.3";
var scriptTag; //reference to the html script tag
 
/******** Get reference to self (scriptTag) *********/
var allScripts = document.getElementsByTagName('script');
var targetScripts = [];
for (var i in allScripts) {
var name = allScripts[i].src
if(name && name.indexOf(scriptName) > 0)
targetScripts.push(allScripts[i]);
}
 
scriptTag = targetScripts[targetScripts.length - 1];
 
/******** helper function to load external scripts *********/
function loadScript(src, onLoad) {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", src);
 
if (script_tag.readyState) {
script_tag.onreadystatechange = function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
onLoad();
}
};
} else {
script_tag.onload = onLoad;
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
 
/******** helper function to load external css *********/
function loadCss(href) {
var link_tag = document.createElement('link');
link_tag.setAttribute("type", "text/css");
link_tag.setAttribute("rel", "stylesheet");
link_tag.setAttribute("href", href);
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(link_tag);
}
 
/******** load jquery into 'jQuery' variable then call main ********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== jqueryVersion) {
loadScript(jqueryPath, initjQuery);
} else {
initjQuery();
}
 
function initjQuery() {
jQuery = window.jQuery.noConflict(true);
main();
}
 
/******** starting point for your widget ********/
function main() {
//your widget code goes here
jQuery(document).ready(function ($) {
//or you could wait until the page is ready
//example jsonp call
//var jsonp_url = "www.example.com/jsonpscript.js?callback=?";
//jQuery.getJSON(jsonp_url, function(result) {
// alert("win");
//});
//example load css
//loadCss("http://example.com/widget.css");
//example script load
loadScript("http://localhost:8888/BAS/bm_widget/master.js", function() { /* loaded */ });



});
}
 
})();


Merci infiniment.[/i][/i]
Modifié par bendjy (19 May 2014 - 12:00)
Bonjour, je pense que tu devrais appeler jquery en premier, ainsi, il serait reconnu dans les fonctions suivantes.
loicbcn a écrit :
Bonjour, je pense que tu devrais appeler jquery en premier, ainsi, il serait reconnu dans les fonctions suivantes.


Bonjour,

Merci pour ta réponse. Je pense que c'est ce qu'il fait. Dans l'ordre :
1 --------
/******** load jquery into 'jQuery' variable then call main ********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== jqueryVersion) {
loadScript(jqueryPath, initjQuery);
} else {
initjQuery();
}


2 -------
Exécution de la fonction loadScript()

3 -------
Exécution de la fonction initjQuery()
function initjQuery() {
jQuery = window.jQuery.noConflict(true);
main();
}


Cette fonction stocke dans la variable jQuery et appelle la fonction main.

4 --------
Exécution de la fonction main() qui contient le chargement de la nouvelle librairie.

L'ordre me parait bon, c'est ça que je ne comprends pas Smiley biggol