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

**henneka** · 20/04/2017, 12h02

Bonjour,

j'ai le code html suivant :

Code html :

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

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 :

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

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

Invité · 20/04/2017, 12h08

Bonjour,

Code JavaScript :

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

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

**henneka** · 20/04/2017, 13h57

Merci pour votre réponse
Je regarde ça de plus près

**henneka** · 20/04/2017, 14h02

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

**henneka** · 20/04/2017, 14h08

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

Si je fais

Code :

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

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

Invité · 20/04/2017, 14h13

On manque d'info.

tu utilises de l'Ajax ?

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

**henneka** · 20/04/2017, 14h36

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

Voici l'integralité de mon code :

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
$(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 :

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

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

Invité · 20/04/2017, 14h45

Code :

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

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).

**henneka** · 20/04/2017, 15h38

Voici mon code html complet

la page admin.php

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
<!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 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
<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

**henneka** · 25/04/2017, 15h17

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 :

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

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

Invité · 25/04/2017, 15h45

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...

**henneka** · 26/04/2017, 10h58

Je fais le test suivant :

Je remplace

Code :

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

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

par

Code :

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

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

**henneka** · 26/04/2017, 11h24

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

Invité · 26/04/2017, 11h44

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 html :

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

			<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 jQuery :

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

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

**henneka** · 26/04/2017, 11h54

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

Invité · 26/04/2017, 12h04

jQuery

.on()
.click() = raccourci de .on('click',...)

On peut définir plusieurs actions :

Code :

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

$('#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 :

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

$('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)

**henneka** · 26/04/2017, 13h42

ok,

merci beaucoup

Cdt

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

jQuery

Discussions similaires

Partager

Partager