tuto liste liées

IL faudrait indiquer ce que te retourne ton alert( value ) (erreur ? mauvaise valeur ? ... ).
As-tu assayé de voir ce que donne le code suivant en console?

$('#region').val()

Merci Valllyan

alert (value) ne s'affiche tout simplement pas c'est ce que j'ai voulu vérifier en faisant un alert ('coucou') qui lui affiche bien "coucou".

Comment voir ce que donne

$('#region').val

?

Ouvre ta console chrome ou FF (F12), et tape directement la ligne de code dans ta console

Pardonne moi Vallyan

J'ouvre index.php ou app.js ?

ensuite a quel endroit est-ce j'écris

$('#region').val

?

Bonsoir, ce que veut dire Vallyan c'est d'ouvre la console javascript de chrome (en appuyant sur f12), tu verras peut être des erreurs, et sinon tu peux taper dans la console, essaye donc de taper la commande et de l'exécuter dans la console.

(PS: Cela m'étonnerait que tu sois dans ce cas là mais si tu as des iframes, il faudra d'aborder récupérer la window de celle ci pour être dans le contexte)

nan, on ne s'est pas compris ;) ...

• Ouvre ta page web, celle qui te donne alert('coucou'), et qui ne te donne pas alert( value ).
• Depuis ton navigateur, ouvre la console javascript (F12 sous chrome, soit bien sur de cliquer sur l'onglet 'console')

• tape la ligne

  $('#region').val()

  dans ta console, et dis-moi ce que tu vois ensuite

Alternativement, tu peux aussi remplacer ton script JS par le suivant si c'est plus simple pour toi, et me dire quels alertes tu as :

(function($){
    $('#region').change( function(event){  
        alert('kiki');  
        var value = $(this).val();
        alert(value);
        alert('toto');
        $('#region-'+region_id).show().siblings().hide();
        alert('tutu');
    });     
})(jQuery);

sa y est voila le résultat :

21:36:33,460 L'API de la console de journalisation (console.log, console.info, console.warn, console.error) a été désactivée par un script sur cette page.
21:36:59,181 $('#region').val
21:36:59,191 [object Function]

t'as oublié les parenthèses a la fin:

$('#region').val()

Voici le résultat de la console avec

$('#region').val()

21:46:33,766 document.getElementById(...) is null overlay.js:7333
21:47:39,032 $('#region').val()
21:47:39,035 TypeError: $(...) is null

et le résultat de ce test :

(function($){
    $('#region').change( function(event){ 
        alert('kiki'); 
       var value = $(this).val();
        alert(value);
        alert('toto');
        $('#region-'+region_id).show().siblings().hide();
        alert('tutu');
    });  
})(jQuery);

aucun des alert ne s'affiche ?!?

Bon bah => point d'arrêt

ben je dirais que c'est un probleme d'url quand tu link tes scripts ... ce qui est bizarre aussi c'est que tu as un soucis avec la ligne 7333 d'un fichier js qui s'appelle overlay.js, alors que je ne le vois pas dans dans ton document html.

Tu n'as pas une version en ligne, pour aider a debugger ?

Quand tu dis qu'un alert ('coucou') fonctionne, tu le mets <u>exactement</u> a la place de l'alert(value) ?

attend je teste

Voici le alert coucou qui s'affiche :

(function($){
    $('#region').change( function(event){ 
       var value = $(this).val();
        alert(value);
      $('#region-'+region_id).show().siblings().hide();
    });  
            alert ('coucou');
})(jQuery);

Et j'ai recréé une nouvelle page index avec le bloc note en y mettant le code php.

J'ai ouvert la console et j'ai testé

$('#region').val()

J'ai obtenu ce résultat :

22:08:28,226 $('#region').val()
22:08:28,238 "17"
22:08:28,240 L'utilisation de l'attribut « specified » d'un attribut est obsolète. Cela renvoie toujours « true ». jquery.min.js:2

Qu'en pensez-vous ?

tester l'alert coucou en dehors de la fonction n'apporte pas grand chose, il faudrait que tu test a la place de l'alert value, et je présume que ca ne marchera pas.

Il est alors probable que ce soit cela:

$('#region-'+region_id).show().siblings().hide();

qui foire.

Essaye de commenter cette ligne, et regarde si tu peux faire un alert value, sans elle.

Essaye aussi de faire marcher toute la fonction JS avec ton nouveau script php qui est tout seul dans sa page

J'ai essayé toute la fonction JS dans la nouvelle page et rien toujours pas de réaction la liste des régions de la page index.php

J'ai essayé :

(function($){
    $('#region').change( function(event){ 
       var value = $(this).val();
        alert(value);
      //$('#region-'+region_id).show().siblings().hide();
    });  
})(jQuery);

pas de alert non plus :-(

Est-ce que ceci fonctionne?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
        $( document ).ready(function(){
            $('#region').change(function(event){    
            var value = $(this).val();
            //$('#region-'+region_id).show().siblings().hide();
            alert(value);
        });
        </script>
    </head>
    <body>
        <?php
            require "db.class.php";
            $DB = new DB();    
            $regions = $DB->query('SELECT * FROM regions'); 
            $departements = $DB->query('SELECT * FROM departements'); 
            $DepartementsParRegion = array();
            foreach ($departements as $departement){
            $DepartementsParRegion$departement->region_id]$departement->id]= $departement->name;
            }
        ?>

    <br/>
    <label class="control-label" for="select01">Votre région</label>
    <select id="region" >
        <option value="0">S&eacutelectionner une r&eacutegion </option>
        <?php
            foreach ( $regions as $region ) {
                echo '<option value="'.$region->id.'">'.$region->name.'</option>';
            }
        ?>        
    </select>

    <br/>
    <br/>         
    <br/>             

    <label class="control-label" for="select01">Votre d&eacutepartement</label>
        <?php foreach ( $DepartementsParRegion as $region_id => $departements ): ?>
            <select id="region-<?= $region_id; ?>">
                <?php foreach ( $departements as $id=>$name ): ?>
                    <option value="<?= $id; ?>"><?= $name; ?></option>                      
                <?php endforeach ?>  
            </select>
        <?php endforeach ?>

    </body>
</html>

hélas non

je comprend que veut vérifier en elevant le lien vers le js. Le résultat est identique, lorsque je selectionne des regions je n'est pas le alert qui indique l'ID.

Parfait ! magnifique Vallyan MA GNI FIQUE
Je t'avoue que je n'ai pas compris la sbtilité mais là c'est énorme GE NIAL un grand merci, si t'as deux minutes dit moi ta démarche ...
Merci Vallyan

Je suis pas un gourou jQuery, mais essaye de remplacer

$(document).ready(function(){
//... bla bla bla
});

par ce que tu avais avant:

(function($){
//... bla bla bla
})(jQuery);

Si je ne me plante pas, c'est ca qui fait foirer le truc (ce que tu utilisais, je m'en sert pour des plugins, par pour attendre que le DOM est pret).

Aïe là sa coince (pas de alert qui s'affiche) il y a un problème avec jQuery ?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>

(function($){

    $('#region').change( function(event){ 
       var value = $(this).val();
        alert(value);
      $('#region-'+region_id).show().siblings().hide();
    }); 

})(jQuery);

        </script>
    </head>
    <body>
        <?php
            require "db.class.php";
            $DB = new DB();   
            $regions = $DB->query('SELECT * FROM regions');
            $departements = $DB->query('SELECT * FROM departements');
            $DepartementsParRegion = array();
            foreach ($departements as $departement){
            $DepartementsParRegion$departement->region_id]$departement->id]= $departement->name;
            }
        ?>

    <br/>
    <label class="control-label" for="select01">Votre région</label>
    <select id="region" >
        <option value="0">S&eacutelectionner une r&eacutegion </option>
        <?php
            foreach ( $regions as $region ) {
                echo '<option value="'.$region->id.'">'.$region->name.'</option>';
            }
        ?>       
    </select>

    <br/>
    <br/>        
    <br/>            

    <label class="control-label" for="select01">Votre d&eacutepartement</label>

        <?php foreach ( $DepartementsParRegion as $region_id => $departements ): ?>
            <select id="region-<?= $region_id; ?>">
                <?php foreach ( $departements as $id=>$name ): ?>
                    <option value="<?= $id; ?>"><?= $name; ?></option>                     
                <?php endforeach ?> 
            </select>
        <?php endforeach ?>

    </body>
</html>

Ben c'est bien ce que je raconte. Tu n'utilisais pas la bonne fonction.
La tienne:

(function($){
//... bla bla bla
})(jQuery);

étend jQuery. Elle ne lance pas le script une fois le DOM ready.

La mienne

$( document ).ready(function(){
//... bla bla bla
});

attend que le DOM soit prêt avant de lancer le script.

ok je vois. Je vais reprendre tout ça demain quand je serais un peu plus frais...
Je te remerci bien
Pour moi c'est un exercice difficile ce tuto, et c'est bien de pouvoir échanger avec des gourous !

Merci et encore merci

Pas de pb.
Pense a valider la réponse qui t'as aidée pour clore le topic.

Bonne continuation !