Nécessité de # dans l'url pour bonne execution du code jquery

Version imprimable

Bonjour,

j'ai le code html suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="div_form_tags">
			<input type="text" placeholder=" Nouveau Tag" /><p> Ou</p> 
			<select class="selectpicker form-control" id="select_tags">
				<optgroup label="Ajouter un Tag existant">		
				<option value="0" selected="selected">Ajouter un Tag existant</option>
				<option value="Tag 1">Tag 1</option>
				<option value="Tag 2">Tag 2</option>
				<option value="Tag 3">Tag 3</option>
				</optgroup>
			</select>
		</div>

et dans mon fichier jquery :

Code:

1
2
3
$('#tag_btn').click(function(){		
		$('#div_form_tags').toggle('slow');
	});

si j'appelle ma page avec un # a la fin de l'url, pas de souci, mais sans, le code de n'execute pas

Quelqu'un sait il pourquoi ?

Par avance merci

Bonjour,

Code:

1
2
3
4
5
$(function(){
	$('#tag_btn').on('click', function(){		
		$('#div_form_tags').toggle('slow');
	});
});

20/04/2017, 13h57
henneka

Merci pour votre réponse
Je regarde ça de plus près
20/04/2017, 14h02
henneka

Meme resultat

Le code semble vouloir s'executer mais rien ne s'affiche

J'ai l'impression quça fait un .show() immediatement suivi d'un .hide() ....

Cdt
20/04/2017, 14h08
henneka

Comportement étrange
Après vérification, il s'avère que mon code s'execute bien

Si je fais
Code:

1 2 3 $('#tag_btn').click(function(){ $('#div_form_tags').show(); });
Ma div va apparaitre puis disparaitre la seconde d'apres

Comportement que je n'ai pas en ajoutant # a la fin de l'url de ma page

Cdt
20/04/2017, 14h13
Invité

On manque d'info.

tu utilises de l'Ajax ?

Il se peut aussi que ce code soit copié 2 fois.

Je suis en train d'apprendre .............

Voici l'integralité de mon code :

Code:

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
$(function() {
var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
];
 
$( "#search" ).autocomplete({
	source: availableTags
});
// tests activation jquery / jquery ui
//$('#testdrag').draggable();
//$('#testdrag').css('background','red').css('opacity','0.2');
/*
$( "#ser_btn" ).click(function() {
	$('#select_group').show();
});
*/
	$('#ser_btn').click(function(){		
		$('#div_list_serv').toggle('slow');
	});
 
	$('#tag_btn').click(function(){		
		$('#div_form_tags').toggle('slow');
	});
	/*
	$('#tag_btn').on('click', function(){		
		$('#div_form_tags').toggle('slow');
	});*/
 
	  $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
});

Pour info (et c'est peut etre une piste), la fonction

$

Code:

1
2
3
('#tag_btn').on('click', function(){		
		$('#div_form_tags').toggle('slow');
	});*/

declenche $( "#dialog-confirm" ).dialog a chaque fois qu elle est appelée dans le cas ou l'url de la page est sans le # (mapage.php) mais pas quand l'url de la page est avec lez # (mapage.php#)

Etrange, non ?

Cdt
cdt

20/04/2017, 14h45
Invité
Code:

1 2 3 4 5 6 7 $('#ser_btn').click(function(){ $('#div_list_serv').toggle('slow'); }); $('#tag_btn').click(function(){ $('#div_form_tags').toggle('slow'); });
Le problème se présente aussi pour les autres ?

La question est surtout : "comment est inclus ce fichier dans la page ?"

Il se peut qu'il soit inclus 2 fois (à 2 endroits différents et/ou via Ajax).

Voici mon code html complet

la page admin.php

Code:

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Administration</title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="../css/styles.css">
	<!--<link rel="stylesheet" href="jquery-ui/development-bundle/themes/base/jquery.ui.all.css" />-->
	<link rel="stylesheet" href="../jquery-ui/jquery-ui.min.css" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body> 
  <div id="cont_img"></div>
	<div id="container">
		<h1 id="titre">titre</h1>
		<h2 id="titre">h2</h2>
		<div id="infos_connect"><p id="cont_infos"><?php echo $donnees['prenom_auth_user']." ".$donnees['nom_auth_user']." ".$dateDuJour; ?></p></div>
		<!--test du dialog confirm-->
		<div id="dialog-confirm" title="Confirmer la suppression ?">
			<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Les données supprimées sont définitevement perdues !</p>
		</div>
		<!-- fin test du dialog confirm-->
		<div id="cont_menuandsearch">
		<div id="cont_menu">		
			<nav id="menu">
				<ul>		
					<li><button class="btn  btn-default" type="button">Insérer</button></li>
					<li><button class="btn  btn-default" type="button">Modifier</button></li>	
					<li><button class="btn  btn-default" type="button">Supprimer</button></li>
					<li><button class="btn  btn-default" type="button">Gestion des Droits</button></li>			
				</ul>
			</nav>
		</div>
		<div id="cont_search">
			<form class="navbar-form navbar-right inline-form">
				<div class="form-group">
					<input type="search" class="input-sm form-control" placeholder="Mots Clés" id="search" autocomplete="off">
					<button type="submit" class="btn btn-primary btn-sm" id="search_btn"><span class="glyphicon glyphicon-search"></span> Chercher</button>
				</div>
			</form>			
		</div>
		</div>
		<?php require_once ($page);?>
 
	</div>	
<!-- Les composants Jasvacripts de Boostrap -->
	<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../jquery-ui/external/jquery/jquery.js"></script>
	<script src="../jquery-ui/jquery-ui.min.js"></script>
	<script src="../js/glossaire.js"></script>
	<script src="../js/jquerycolor/jquery.color.js"></script>
  </body>
 
</html>

plus la page $page inclue

Code:

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
<div id="container">
	<div id="contenu">
		<form id="form_mod">
		<div class="form-group">
			<label for="inp_terme" id="lab_terme">Libellé</label>
			<input type="text" class="form-control" id="inp_terme" placeholder="Ex.... ..."/>
		</div>
		<br />
		<div class="form-group">
			<label for="inp_desc" id="lab_desc" >Description:</label>
			<textarea class="form-control" rows="5" id="inp_desc" placeholder="Definition ou explication du terme ..."></textarea>
		</div>	
		<br />
		<div class="form-group" id="button_group">
			<button  class="btn btn-primary" id="tag_btn">Ajouter un Tag</button>
 
			<button  class="btn btn-primary" id="ser_btn">Lier à un service</button>
			<button  class="btn btn-success" id="enr_btn">Enregistrer</button>
		</div>	
		<div class="form-group" id="div_list_serv">
			<div class="item_serv">
				<label for="ser1">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser2">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser3">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser4">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser5">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser6">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser7">Service 1</label><input type="checkbox" class="meschecks">
			</div>
			<div class="item_serv">
				<label for="ser8">Service 1</label><input type="checkbox" class="meschecks">
			</div>	
		</div>	
		<div id="div_form_tags">
			<input type="text" placeholder=" Nouveau Tag" /><p> Ou</p> 
			<select class="selectpicker form-control" id="select_tags">
				<optgroup label="Ajouter un Tag existant">		
				<option value="0" selected="selected">Ajouter un Tag existant</option>
				<option value="Tag 1">Tag 1</option>
				<option value="Tag 2">Tag 2</option>
				<option value="Tag 3">Tag 3</option>
				</optgroup>
			</select>
		</div>
		</form>
	</div>
</div>

Cdt

Bonjour,

Le probleme se verifie pour toutes les fonctions jquery de la page

Le fichier est inclus avant la fermeture de la balise body, comme ceci :
Code:

1 2 3 4 5 6 7 8 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="jquery-ui/external/jquery/jquery.js"></script> <script src="jquery-ui/jquery-ui.min.js"></script> <script src="js/glossaire.js"></script> <script src="js/jquerycolor/jquery.color.js"></script> </body> </html>
Je sèche .....

D'autant plus que si je rajoute un # a la fin de mon url, le code s'execute sans souci

Cdt

25/04/2017, 15h45
Invité

Bonjour,

1/ Repars d'une page test "basique" : le minimum de code.

2/ Ajoute un à un les différents éléments / scripts /..., pour savoir à quel moment ça part en vrille, et quel élément est en cause.

Si tu avais une page en ligne, on pourrait peut-être en dire plus...
26/04/2017, 10h58
henneka
Je fais le test suivant :

Je remplace
Code:

1 2 3 $('#tag_btn').click(function(){ $('#div_form_tags').toggle('slow'); });
par
Code:

1 2 3 $('#test').click(function(){ $('#div_form_tags').toggle('slow'); });
et dans mon html, juste en dessous de l'element qui porte l'id tag_btn (qui est unique après vérifications), j'insere un div, ou un p, portant l'id test

Et ça marche.

Ce pourrait qu'il y ait un conflit avec bootstrap sur les boutons ?

Cdt
26/04/2017, 11h24
henneka

Bon, apparement, c'est la balise form qui pose problème avec les buttons

Si je la supprime ou sort mon bouton, ça marche

Par contre, je ne comprend pas pourquoi

Je laisse cette discussion ouverte pour plus d'infos ...

Cdt
26/04/2017, 11h44
Invité

OK. Vu.

Par défaut, les <button> sont de type "submit".
Du coup, au clic, tu soumets de formulaire.

Il faut leur mettre le type "button" :

Code:

<button type="button" class="btn btn-primary" id="tag_btn">Ajouter un Tag</button>

D'autre part, il est préférable d'écrire :

Code:

$('#tag_btn').on('click', function(){
26/04/2017, 11h54
henneka

Merci beaucoup,

Donc le # force a rester sur la page courante, d'ou le pourquoi de la bonne marche du script ?

Autre chose svp, pouvez vous m'expliquer pourquoi préferer Le.on comme syntaxe ?

Cdt
26/04/2017, 12h04
Invité
jQuery
- .on()
- .click() = raccourci de .on('click',...)
On peut définir plusieurs actions :

Code:

$('#btn').on('click change mouseover', function(){

Une autre utilisation intéressante du on(), quand on a par exemple un bouton créé dynamiquement (qui n'existait pas à la création du DOM) :

Code:

$('body').on('click', '#tag_btn', function(){

On "s'accroche" à un élément déjà présent dans le DOM (ici, 'body', mais ça peut être un autre élément, plus proche)
26/04/2017, 13h42
henneka

ok,

merci beaucoup

Cdt