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'.
Toujours d'après firebug, les bibliothèques sont correctement chargées :
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
master.js
code-example.js (template)
Merci infiniment.[/i][/i]
Modifié par bendjy (19 May 2014 - 12:00)
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)