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 :

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


Sujet :

jQuery

  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut Nécessité de # dans l'url pour bonne execution du code jquery
    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

  2. #2
    Invité
    Invité(e)
    Par défaut
    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');
    	});
    });

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    Merci pour votre réponse
    Je regarde ça de plus près

  4. #4
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut Comportement étrange
    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

  6. #6
    Invité
    Invité(e)
    Par défaut
    On manque d'info.

    tu utilises de l'Ajax ?

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

  7. #7
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  8. #8
    Invité
    Invité(e)
    Par défaut
    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).

  9. #9
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  10. #10
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  11. #11
    Invité
    Invité(e)
    Par défaut
    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...

  12. #12
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  13. #13
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  14. #14
    Invité
    Invité(e)
    Par défaut
    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(){

  15. #15
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    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

  16. #16
    Invité
    Invité(e)
    Par défaut
    jQuery


    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)

  17. #17
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2017
    Messages : 55
    Par défaut
    ok,

    merci beaucoup

    Cdt

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

Discussions similaires

  1. Réponses: 10
    Dernier message: 12/08/2010, 15h03
  2. [ZF 1.7] Zend_form et id dans l'url pour insertion en base
    Par miya dans le forum Zend_Form
    Réponses: 18
    Dernier message: 28/01/2009, 13h14
  3. Réponses: 1
    Dernier message: 09/10/2007, 21h53
  4. Réponses: 3
    Dernier message: 07/03/2007, 14h46
  5. [JpGraph] Passage d'un tableau en paramètre dans une URL pour JPgraph
    Par crazydiver_e2 dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 16/01/2006, 16h15

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