IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Jquery is not defined mais cela fonctionne quand même


Sujet :

jQuery

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut Jquery is not defined mais cela fonctionne quand même
    Bonjour,

    Actuelement j'ai intégrer du nouveau code jquery, cela marche très bien, monn seul soucis est que firebug me renvoi ceci:

    ReferenceError: jQuery is not defined
    [Stopper sur une erreur]
    })(jQuery);
    Hors si je retire mon (JQuery) plus rien ne marche , et donc cette erreur me gêne un peu, quelqu'un aurait t'il une idée pour résoudre le problème ?

    Voici mon code:

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    	<head>
    		<title>Shopping List JQuery</title>
     
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<script type="text/javascript" src="js/jquery.shoppingList.js"></script>
    		<!-- Cascading Style Sheets -->
    		<link href="style.css" rel="stylesheet" type="text/css" />
    		<link type="text/css" href="css/jquery.slider.min.css" rel="stylesheet"/>
     
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
            <script type="text/javascript" src="js/jquery.shoppingList.js"></script>
            <script type="text/javascript" src="js/script.js"></script>
    		<!-- Javascript -->
     
     
     
     
     
    	</head>
     
    	<body>
    		<div id="panel03-container01">
     
     
    		<div class="rs-Sub-Menu">
    			<span id="label_alti"> toto</span>
    				<div class=subMenu>
    					<!--Oeil (image) a associer -->	
    					<img class="oeil_actif" src="img/oeilactif.png" style="width:23px; height:19px"/>
    					<!--Barre de slide a associer -->	 
    					<span style="display: inline-block;"><input id="slid_alti" type="slider" name="price" value="50" /></span> 
    				</div>
    		</div>
     
     
    		<div class="rs-Sub-Menu">
    			<span id="label_reseauF"> tata</span>
    				<div class=subMenu>
    					<!--Oeil (image) a associer -->
    					<img class="oeil_actif" src="img/oeilactif.png" style="width:23px; height:19px"/>
    					<!--Barre de slide a associer -->
    					<span style="display: inline-block;"><input id="slid_reseauF" type="slider" name="price" value="50" /></span> 
    				</div>
    		</div>					
     
     
    		<div class="rs-Sub-Menu">
    			<span id="label_carteS">titi</span>
    				<div class=subMenu>
    					<!--Oeil (image) a associer à la couche -->
    					<img class="oeil_actif" src="img/oeilactif.png" style="width:23px; height:19px"/>
    					<!--Barre de slide a associer à la couche -->	
    					<span style="display: inline-block;"><input id="slid_carteS" type="slider" name="price" value="100" /></span> 
    				</div>
    		</div>
    		<div style="visibility:hidden">tutu</div>
    		</div>
     
    		<!--<script type="text/javascript" src="plugin/jquery-ui.js"></script>-->
    		<!--<script type="text/javascript" src="plugin/jquery.slider.all.js"></script>-->
    		<!--<script type="text/javascript" src="js/interaction.js"></script>-->
     
    </body>
     
    </html>





    Code JQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
     
    //Pluginf qui va associer le drag and drop et le deploiement des menus 
    (function($){
     
    	$.fn.shoppingList = function(options) {
     
    		// Options par defaut
    		var defaults = {};
    		var options = $.extend(defaults, options);
     
    		this.each(function(){
     
    			var obj = $(this);
     
     			// Empêcher la sélection des éléments à la sourirs (meilleure gestion du drag & drop)
    			var _preventDefault = function(evt) { evt.preventDefault(); };
    			$(".rs-Sub-Menu").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
     
    			// Initialisation du composant "sortable"
    			$(obj).sortable({
    				axis: "y", /* Le sortable ne s'applique que sur l'axe vertical
    				containment: ".shoppingList", // Le drag ne peut sortir de l'élément qui contient la liste*/
    				handle: ".item", /* Le drag ne peut se faire que sur l'élément .item (le texte)*/
    				distance: 10, /* Le drag ne commence qu'à partir de 10px de distance de l'élément*/
     
                                    // Evenement appelé lorsque l'élément est relaché
    				stop: function(event, ui){
     
                                            // Pour chaque item de liste
    					$(obj).find(".rs-Sub-Menu").each(function(){
     
    						//$(this).find(".item").unbind('click');
    						// On actualise sa position
    						index = parseInt($(this).index()+1);
    						// On la met à jour dans la page
    						$(this).find(".count").text(index);
     
    						//Je désactive le click sur l'élément
    						$(this).find(".item").unbind("click");
    						txt = $(this).text().replace(/^\s+|\s+$/g,'');		
     
                                                    console.log(txt);
     
    					});
     
    				}	
     
    			});
     
    			// Initialisation du composant Droppable
    			$(obj).droppable({
     
    				// Lorsque l'on relache un élément sur la poubelle
    				drop: function(event, ui){
    					/*Je lance ma fonction click au bout d'un temps donné après avoir lacher l'élément*/
    					 setTimeout("click($(this))",1000);
    				}
    			})
     
     			// Pour chaque élément trouvé dans la liste de départ
    			$(obj).find(".rs-Sub-Menu").each(function(){ 
     
    				// On ajoute les contrôles
    				addControls($(this));
     
    			});
     
    		});
     
     
     
     
    		/*
    		* Fonction qui ajoute les contrôles aux items
    		* @Paramètres
    		*  - elt: élément courant (liste courante)
    		*
    		* @Return void
    		*/
     
    		function addControls(elt)
    		{	
    			//On récupère tout les éléments contenu dans la classe html, cela comprend la bare de slid et l'oeil
     			var elem_subM=$(elt).children(".subMenu");
    			//On récupère l'id des onglets 			
    			var id_onglet=$(elt).children().attr("id");
     
     			// On ajoute un par un les block d'éléments 
    			$(elt).html("<span class='item' id='"+id_onglet+"'>"+$(elt).text()+"</span><div class=subMenu>"+elem_subM.html()+"</div>");
     
    			//Au clic sur lélément je le réactive 
    			$(elt).find(".item").bind('click',function f(){
     
    				var img_oeil=$(this).next("div.subMenu").children().first();
     
    		        	// Si le sous-menu etait deja ouvert, on le referme :
    		            	if ($(this).next(".subMenu:visible").length != 0) {
    						$(img_oeil).css("display","none");
    		        			$(this).next(".subMenu").slideUp("normal");
    				}
     
    				// Si le sous-menu est cache, on ferme les autres et on l'affiche :
    				else {
    					$(".subMenu").slideUp("normal");
    					$(this).next(".subMenu").slideDown("normal",
     
    					function(){
    						$(img_oeil).css("display","inline-block");
    				        });
     
    				}
     
    			})
     
    			//On masque la les éléments des couches 			
    			$(".subMenu").hide();
     
    		}
     
     		// On continue le chainage JQuery
    		return this;
    	};
     
    })(jQuery);
     
    //fonction appeller pour réactiver le clic de l'élément
    function click(elem){
     
    	$(".item").bind('click',function f(){
     
    	var img_oeil=$(this).next(".subMenu").children().first();
     
    	       	// Si le sous-menu etait deja ouvert, on le referme :
    	       	if ($(this).next(".subMenu:visible").length != 0) {
    			$(img_oeil).css("display","none");
    			$(this).next(".subMenu").slideUp("normal");
    		}
     
    		// Si le sous-menu est cache, on ferme les autres et on l'affiche :
    		else {
    			$(".subMenu").slideUp("normal");
    			$(this).next(".subMenu").slideDown("normal",
    			function(){
    				$(img_oeil).css("display","inline-block");
    		        });
    		}
    	})
    }

    P.S: Pour faire cela je me suis inspirer du tuto à l'adresse suivante:

    http://www.guillaumevoisin.fr/jquery...ste-des-taches

    On remarque aussi la présence du (JQuery) à la fin et qui ne pause pas de problème ici

  2. #2
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 373
    Points
    19 373
    Par défaut
    Hello,

    Ce serait pas tout simplement l'ordre de tes scripts ?
    Normalement jquery doit être en premier.

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Tu pourrais éviter d'inclure
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="js/jquery.shoppingList.js"></script>
    avant
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    et au passage, intégrer deux fois jQuery à la suite
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    c'est pas terrible, voire légèrement contre productif...

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Bonjour

    Vous chargez deux fois jQuery :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    Il vaut mieux charger une version précise et non obsolète, exemple : "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    Je ne vois pas le premier appel au code jQuery : $( document ).ready( function(){ // votre code }); ou en abbrégé : $( function(){ // votre code });

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut
    N'ayant jamais eu de formation en Jquery et donc étant obliger de m'autoformer dans ce domaine pour le travail, j'ai malheureusement quelque lacune et donc peut faire pas mal de faute

    Toujours est t'il j'ai pris bonne note de vos remarques, et procédé aux modifications, ce qui nous donnent:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
      <head>
        <title>Générateur API Javascript</title>	
     
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    	<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
     
    	<link type="text/css" href="css/jquery.slider.min.css" rel="stylesheet"/>
     
    	<script type="text/javascript" src="plugin/jquery-ui.js"></script>
    	<script type="text/javascript" src="js/generateur/jquery-ui-1.8.custom.min.js"></script>
    	<script type="text/javascript"src="js/generateur/jquery.shoppingList.js"></script>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     
    	<script type="text/javascript" src="js/generateur/liste_deroulante.js" ></script>
    	<script type="text/javascript"src="js/generateur/onload_&_onresize.js"></script>
     
      </head>

    et à la fin du body


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <script type="text/javascript" src="plugin/jquery.slider.all.js"></script>
    <script type="text/javascript" src="js/generateur/interaction.js"></script>
    <script type="text/javascript"src="js/generateur/script.js"></script>
    	</body>
    </html>

    Sauf erreur de ma part ou mauvaises compréhension j'ai fait ce que vous me demandiez, ceci étant cela ne marche toujours pas j'ai toujours la même erreur

    D'avance merci pour votre aide

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Sauf erreur de ma part
    Ben oui... grosses erreurs de ta part dans l'ordre d'inclusion des scripts... et ça n'a rien à voir avec la connaissance ou non de jQuery, mais plutôt du HTML !

    Tu dois importer tes scripts dans l'ordre des dépendances. Tes scripts persos utilisent jQuery-ui, donc jQuery-ui doit être intégré avant tes scripts persos, mais jQuery-ui a besoin de jQuery pour fonctionner, donc jQuery doit être intégré avant jQuery-ui...

    En plus, tu sembles continuer à vouloir intégrer plusieurs fois les mêmes choses... essaye déjà de comprendre qui fait quoi et supprime tous ceux qui font deux fois la même chose.

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut
    Je suis désolé mais l'histoire de comment placer mes script Jquery dans le HTML n'a pas été vu dans ma formation HTML

    Donc sinon cela donne ceci donc dans le HEAD:

    Code HTMl : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    //Le jquery de base
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    //Les jquery ui
    <script type="text/javascript" src="plugin/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    //Puis mes "fonctions" 
    <script type="text/javascript" src="js/jquery.shoppingList.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    Et dans le BODY:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    	<script type="text/javascript" src="plugin/jquery.slider.all.js"></script>
    		<script type="text/javascript" src="js/interaction.js"></script>

    Il doit encore avoir une erreur quelque part

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut
    Après avoir réduit mes appels de scripts en enlevant
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

    Et sans oublier mon doublons que j'avais pas vu sur le coup (peut être du à la fatigue )
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="js/jquery.shoppingList.js"></script>

    Qui était répéter deux fois

    C'est bon je n'ai plus d'erreur, tout marche comme je le voulais

    Problème résolu, merci

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    Bonjour

    Il vaut mieux charger une version précise et non obsolète, exemple : "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    Je ne vois pas le premier appel au code jQuery : $( document ).ready( function(){ // votre code }); ou en abbrégé : $( function(){ // votre code });
    Pour UI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    Pour UI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
    Ok merci c'est fait

    sinon:
    Je ne vois pas le premier appel au code jQuery : $( document ).ready( function(){ // votre code }); ou en abbrégé : $( function(){ // votre code });
    Normal que vous le voyez pas il se trouve dans les autres fichiers Jquery auxquel je fais référence mais dans lequel je ne l'ai pas mis ici

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 13/12/2013, 11h10
  2. jQuery is not defined
    Par mikesquake dans le forum jQuery
    Réponses: 1
    Dernier message: 07/09/2010, 17h39
  3. jQuery is not defined
    Par karen33 dans le forum jQuery
    Réponses: 8
    Dernier message: 17/02/2010, 20h54
  4. [MySQL] mysql_fetch_array renvoi une erreur mais fonctionne quand même
    Par nightcyborg dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 30/09/2009, 11h46
  5. fonction not defined/mais marche en local
    Par stoeck dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 19/06/2007, 11h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo