Discussion :

[Kasko]

bonjour à tous,
J'ai un problème avec un code Jquery qui marche souvent et qui refuse de fonctionner par fois.
en l'exécutant si tout va bien j'ai l'image suivante :



Donc en cliquant sur une des croix en rouge le menu se reduit en n'affichant que les titres du menu à savoir Client,Agent et Procès.
Par exemple quand je clique sur client les sous menus au niveau de l'Agent et Procès
doivent être cacher c'est-à-dire Liste et enregistrement ainsi que voir état du dernier procès.

Quand ça ne marche pas j'ai l'image suivante :



Et là les plus restent bloqués même si je clique rien ne change(c'est-à-dire les sous menus ne se cachent pas.)

En vérifiant dans la console du navigateur google chrome j'ai trouvé l'erreur suivante :



Voici le code Jquery:

Code :

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
 
(function($){
$(document).ready(function(){
 
$('#cssmenu li.active').addClass('open').children('ul').show();
	$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp(200);
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown(200);
			element.siblings('li').children('ul').slideUp(200);
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp(200);
		}
	});
 
});
})(jQuery);// ligne 24 du fichier script.js

Voici le code CSS :

Code :

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
 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  margin-top:-30px; 
  margin-left:0px;
  margin-bottom:0px;
 font-family: "Courier New", Courier, monospace;
  color: #ffffff;
  /* height : 1000px; */
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #5cae6c;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: red;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: red;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #dddddd;
  background: #003300;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #5cae6c;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #dddddd;
}
#cssmenu ul li a:hover {
  color: black;
}

Voici le code JSP :

Code :

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
 
<!doctype html>
<html lang=''>
<head>
<div class ="head">
<img src="Image/logo_acep.jpg" width="120" height="100" class = "niger"/><%--<img src="Image/IAI-NIGER.jpg" width="120" height="60" align = "right" class = "aia"/> --%>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <link type="text/css" rel="stylesheet" href="inc/style.css"/>
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Menu</title>
</div>
</head>
<body>
 
    <iframe id="mainFrame" scrolling="yes"  width="83%" height ="70%" name="mainFrame" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<div id='cssmenu'>
  <ul>
    <li class='active has-sub'>
    <a href='#'>CLIENT</a>
    <ul>
      <li>
      <a href='<c:url value = "/listeClients"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
 
      <li><a href='<c:url value = "/FormClient"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a>
 
      </li>
      </li>
    </ul>
    </li>
 
    <li class='active has-sub'>
    <a href='#'>AGENT</a>
    <ul>
      <li><a href='<c:url value = "/listeAgents"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
      <li><a href='<c:url value = "/FormAgent"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a>
 
      </li>
    </ul>
    </li>
 
    <li  class='active has-sub'>
    <a href='#'>PROCES</a>
    <ul>
      <li><a href='<c:url value = "/ListeProces"/>' target="mainFrame"><i class="fa fa-list" title = "LISTE"></i> LISTE</a>
      </li>
 
      <li><a href='<c:url value = "/FormProces"/>' target="mainFrame"><i class="fa fa-plus-square" title = "ENREGISTREMENT"></i> ENREGISTREMENT</a></li>
 
      <li> <a href = "<c:url value = "/VoirEtatDernierProces"/>" class = "etat" target="mainFrame"><i class="fa fa-eye" title = "VOIR"></i> Dernier procès.</a></li>
      </li>
    </ul>
    </li>

Merci de prendre la peine de m'aider.

[SpaceFrog]

"failed to load source" ...
en gros l'erreur veut dire qu'il n'a pas pu charger la ressource
donc jquery n'est pas chargé
Sans doute des souci de disponibilité ...
Change de CDN ou télécharge jquery sur ton serveur ...

[Kasko]

Bonjour,
CDN veut dire quoi et comment dois-je télécharger Jquery sur mon serveur.Merci d'avance!!!

[SpaceFrog]

CDN content delivery network = un serveur externe publique qui mets à disposition des ressources ...

pour mettre jquery sur ton serveur il te suffit de télécharger le fichier jquery.js ou une version minifiée, la mettre sur ton serveur web et au liue d'appeler ton script js depuis le cdn tu l'appelle avec une balise script src qui poibte vers ton fichier js sur ton serveur

[Kasko]

L'appelée comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script src="script.js"></script>

Si oui c'est ce que j'ai fait.

[SpaceFrog]

non...

tu n'as pas compris :
ton script jquery tu ne vas pas le chercher sur ton serveur vu que tu l'appelle sur cette url :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

http://code.jquery.com/jquery-latest.min.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

l'idée est de lappeler depusi TON serveur
colle le fichier jquery-latest.min.js sur TON serveur et appelle le :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="jquery-latest.min.js" type="text/javascript"></script>