Partage

jQuery - Afficher des informations liées à un lien

15 janvier 2017 à 16:12:58

Bonjour,

Je dois arriver à afficher des informations liées à un lien. J'ai réussi à afficher les informations liées au lien #accueil. Je ne peux pas faire trois fonctions différentes. Donc, il faudrait qu'au clic d'un lien cela se passe comme ceci:

#accueil définit listeLiens[0] comme choix,

#descriptif définit listeLiens[1] comme choix,

#contact définit listeLiens[2] comme choix.

Quelle est la meilleure façon de procéder?

Y a-t-il moyen d'y arriver sans mettre un identifiant à chaque a?

MERCI ET BONNE SOIRÉE

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Lien(nom, information)
            {
                this.nom = nom;
                this.information = information;
            }

            var listeLiens = new Array();
            listeLiens.push(new Lien('Accueil', 'Le contenu A est affiché.'));
            listeLiens.push(new Lien('Descriptif', 'Le contenu D est affiché.'));
            listeLiens.push(new Lien('Contact', 'Le contenu C est affiché'));

            $(document).ready(function()
            {
                $('#accueil').click(function()
                {
                    var flux1 = "<h1>Contenu lié à " + listeLiens[0].nom + "</h1>";
                    var flux2 = "<p>" + listeLiens[0].information + "</p>";
                    var flux = flux1 + flux2;
                    $('#affichage').html(flux);
                });
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
		<nav>
                    <ul>
                        <li><a id="accueil" href="#">Accueil</a></li>
                        <li><a id="descriptif" href="#">Descriptif</a></li>
                        <li><a id="contact" href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <div id="affichage"></div>
            <footer id="pied">
            </footer>
        </section>
    </body>
</html>

Bonsoir,

J'ai essayé d'avancer un peu. Malheureusement, la partie jQuery ne fonctionne pas. Il ne veut pas de la variable string. Je ne vois pas d'autre solution pour récupérer l'identifiant et ensuite aller chercher l'information. Je désespère.

Est-ce que quelqu'un a une solution?

MERCI ET BONNE NUIT

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Lien(identifiant, nom, information)
            {
                this.identifiant = identifiant;
                this.nom = nom;
                this.information = information;
            }

            var listeLiens = new Array();
            listeLiens.push(new Lien('accueil', 'Accueil', 'Le contenu A est affiché.'));
            listeLiens.push(new Lien('descriptif', 'Descriptif', 'Le contenu D est affiché.'));
            listeLiens.push(new Lien('contact', 'Contact', 'Le contenu C est affiché.'));

            function afficherLiens()
            {
                var string = "<ul>";
                for(var i = 0; i < listeLiens.length; i++)
                {
                    string += "<li><a id=\"" + listeLiens[i].identifiant + "\" href=\"#\"";
                    string += " class=\"\">" + listeLiens[i].nom + "</a></li>";
                }
                string += "</ul>";
                var selecteur = document.getElementById('menu');
                selecteur.innerHTML = string;
            }

            $(document).ready(function()
            {
                $('a').click(function()
                {
                    var string = new string();
                    string = $(this).attr('id');
                    return string;
                });                
                alert(string);
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
                <nav id="menu"></nav>
            </header>
            <input type="button" onclick="afficherLiens();" value="Tester">
            <div id="affichage"></div>
            <footer id="pied">
            </footer>
        </section>
    </body>
</html>

Bonsoir,

J'ai été un peu plus loin. La partie jQuery ne plante pas. Cependant, elle ne fait rien.

MERCI ET BONNE NUIT

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Lien(identifiant, nom, information)
            {
                this.identifiant = identifiant;
                this.nom = nom;
                this.information = information;
            }

            var listeLiens = new Array();
            listeLiens.push(new Lien('accueil', 'Accueil', 'Le contenu A est affiché.'));
            listeLiens.push(new Lien('descriptif', 'Descriptif', 'Le contenu D est affiché.'));
            listeLiens.push(new Lien('contact', 'Contact', 'Le contenu C est affiché.'));

            function afficherLiens()
            {
                var string = "<ul>";
                for(var i = 0; i < listeLiens.length; i++)
                {
                    string += "<li><a id=\"" + listeLiens[i].identifiant + "\" href=\"#\"";
                    string += " class=\"\">" + listeLiens[i].nom + "</a></li>";
                }
                string += "</ul>";
                var selecteur = document.getElementById('menu');
                selecteur.innerHTML = string;
                console.log(string);
            }
            $(document).ready(function()
            {
                $('a').click(function()
                {
                    if($('a').attr('id') === '#accueil')
                    {
                        i = 0;
                    }
                    if($('a').attr('id') === '#descriptif')                        
                    {
                        i = 1;
                    }
                    if($('a').attr('id') === '#contact')
                    {
                        i = 2;
                    }
                    var flux1 = "<h1>Contenu lié à " + listeLiens[i].nom + "</h1>";
                    var flux2 = "<p>" + listeLiens[0].information + "</p>";
                    var flux = flux1 + flux2;
                    $('#affichage').html(flux);
                });                
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
                <nav id="menu"></nav>
            </header>
            <input type="button" onclick="afficherLiens();" value="Tester">
            <div id="affichage"></div>
            <footer id="pied">
            </footer>
        </section>
    </body>
</html>

-
Edité par AudreyMallus 15 janvier 2017 à 22:45:34

AudreyMallus

17 janvier 2017 à 20:33:04

Bonsoir,

Je reviens vers vous. Les codes sources précédents ne fonctionnent pas. Donc, j'essaie d'aller au plus simple. J'essaie de récupérer l'id du lien cliqué pour pouvoir aller plus loin. Malheureusement, j'ai une erreur (voir code).

Est-ce que quelqu'un a la solution?

MERCI ET BONNE SOIRÉE

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Information(id, texte)
            {
                 this.id = id;
                 this.texte = texte;
            }
            var listeInformaitons = new Array();
            listeInformations.push(new Information('a', '<p>Cette information est liée à A<p>'));
            listeInformations.push(new Information('b', '<p>Cette information est liée à B<p>'));
            listeInformations.push(new Information('c', '<p>Cette information est liée à C<p>'));
            $(document).ready(function()
            {
                var id = $(this).click(function()
                {
                    $this.('a').attr('id');
                    // Uncaught SyntaxError: Unexpected token (
                });
                alert(id);
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
                <nav>
                    <ul>
                        <li><a id="a" href="#">A</a></li>
                        <li><a id="b" href="#">B</a></li>
                        <li><a id="c" href="#">C</a></li>
                    </ul>
                </nav>
            </header>
        </section>
    </body>
</html>

ninjavascript

18 janvier 2017 à 1:49:04

Hello.

En effet.

$this.('a').attr('id'); : le point après ton $this indique que l’interpréteur JavaScript attend un nom de méthode ou de propriété valide, mais tu enchaînes par ('a'), ce qui provoque une SyntaxError.

Tu souhaites obtenir l'ID d'un lien sur lequel tu cliques ? Tout simplement comme ça :

$(document).ready(function()
{
  $('nav li a').click(function() // Indique à jQuery d'écouter les évènements "click" sur les liens de liste de navigation (c.f. ta structure HTML)
  {
    var id = $(this).attr("id"); // $(this) correspondra à l'élément cliqué, cad le <a>, sur lequel on ira chercher l'attribut (attr) nommé 'id'
    alert("L'ID du lien cliqué est : #" + id);
  });
});

-
Edité par ninjavascript 18 janvier 2017 à 1:49:33

AudreyMallus

18 janvier 2017 à 9:31:56

Bonjour jmpp,

Je te remercie pour ta réponse. Mon code ci-dessous fonctionne parfaitement. Cependant, j'aimerais l'améliorer. L'idéal serait de faire une comparaison entre l'id du lien (var id = "#" + $(this).attr("id");) et l'id de l'information (listeInformations[i].id). Quand ils sont identiques, il irait chercher le texte adéquat. Cela éviterait des conditions. Surtout que l'on pourrait changer les id ou ajouter des liens au menu. Je dois partir travailler. Je chercherai dès que possible.

Est-ce que vous auriez des pistes?

MERCI ET BONNE JOURNÉE

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Information(id, texte)
            {
                 this.id = id;
                 this.texte = texte;
            }
            var listeInformations = new Array();
            listeInformations.push(new Information('#a', '<p>Cette information est liée à A<p>'));
            listeInformations.push(new Information('#b', '<p>Cette information est liée à B<p>'));
            listeInformations.push(new Information('#c', '<p>Cette information est liée à C<p>'));
            $(document).ready(function()
            {
                $('nav li a').click(function()
                {
                    var id = "#" + $(this).attr("id");
                    if(id === '#a')
                    {
                        i = 0;
                    }
                    if(id === '#b')
                    {
                        i = 1;                        
                    }
                    if(id === '#c')
                    {
                        i = 2;
                    }
                    var string = listeInformations[i].texte;
                    alert(string);
                });
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
                <nav>
                    <ul>
                        <li><a id="a" href="#">A</a></li>
                        <li><a id="b" href="#">B</a></li>
                        <li><a id="c" href="#">C</a></li>
                    </ul>
                </nav>
            </header>
        </section>
    </body>
</html>

-
Edité par AudreyMallus 18 janvier 2017 à 9:33:11

ninjavascript

18 janvier 2017 à 11:33:07

Effectivement, ça peut se simplifier en quelques lignes, grâce à Array.prototype.reduce()

$('nav li a').click(function()
{
    var id          = "#" + $(this).attr("id");
    var information = listeInformations.reduce(function(accumulator, information) {
      if (information.id === id) {
        return information;
      }
      return accumulator;
    }, '') || {};
    alert(information.texte);
});

Dans cet exemple, à chaque clic sur un <a>, .reduce() va passer en revue tous les éléments du tableau listeInformations et ne conserver au final que l'instance dont l'id correspond à l'ID cliqué. Cette valeur sera stockée dans la var information, qu'il suffira ensuite d'utiliser normalement

Si tu as du mal à comprendre .reduce() (c'est pas évident au début, mais une fois que tu le maîtrise, c'est juste mortel), on pourrais dire que le code équivalent en procédural serait :

$('nav li a').click(function()
{
    var id = "#" + $(this).attr("id");
    for (var i = 0, information; i < listeInformations.length; i++) {
      if (listeInformations[i].id === id) {
        information = listeInformations[i]
      }
    }
    alert(information.texte);
});

Hope that helps

-
Edité par ninjavascript 18 janvier 2017 à 11:36:31

AudreyMallus

20 janvier 2017 à 16:19:33

Bonjour jmpp,

Tout d'abord un grand merci pour les deux fonctions. Cela permet d'être plus compréhensible pour une débutante en jQuery. La première à mon niveau est encore un peu délicate. J'ai essayé d'aller plus loin. Le but est de créer le menu de manière dynamique.

Malheureusement, la fonction ne marche plus. Le menu se crée bien quand je clique sur le bouton. Par contre, la fonction console.log(verif) ne m'affiche rien du tout. Il n'y a pas non plus d'erreur. Je suppose que cela vient du chargement de la page "$(document).ready(function()" qui ne s'effectue qu'au début et pas après la création du menu.

Comment dois-je procéder?

MERCI ET BONNE JOURNÉE

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>jQuery - Afficher des informations liées à un lien</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            function Information(id, nom, texte)
            {
                 this.id = id;
                 this.nom = nom;
                 this.texte = texte;
            }
            var listeInformations = new Array();
            listeInformations.push(new Information('a', 'A', '<p>Cette info est liée à A<p>'));
            listeInformations.push(new Information('b', 'B', '<p>Cette info est liée à B<p>'));
            listeInformations.push(new Information('c', 'C', '<p>Cette infor est liée à C<p>'));
            function creerMenu()
            {
                var string = "<ul>";
                for(var i = 0; i < listeInformations.length; i++)
                {
                    string += "<li><a id=\"" + listeInformations[i].id + "\" ";
                    string += "href='#'" + ">" + listeInformations[i].nom + "</a></li>";
                }
                string += "</ul>";
                console.log(string);
                var selecteur = document.getElementById('menu');
                selecteur.innerHTML = string;
                return string;
            }
            $(document).ready(function()
            {
                $('nav li a').click(function()
                {
                    var id = "#" + $(this).attr('id');
                    for (var i = 0; i < listeInformations.length; i++)
                    {
                        var information = "#" + listeInformations[i].id;
                        var verif = id + "\n" + information;
                        console.log(verif);
                        if (information === id)
                        {
                            var affichage = "";
                            affichage = listeInformations[i].texte;
                        }
                    }
                    alert(affichage);
                });
            });
        </script>
    </head>
    <body>
        <section>
            <header>
                <h1>jQuery - Afficher des informations liées à un lien</h1>
                <nav id="menu">
                </nav>
            </header>
            <div>
                <input type="button" onclick="creerMenu();" value="Créer le menu">
            </div>
            <div id="affichage">                
            </div>
        </section>
    </body>
</html>

ninjavascript

20 janvier 2017 à 16:28:17

Hello

En effet c'est normal qu'il ne se passe rien.

En gros, lorsque ta page se charge une première fois dans ton navigateur, le HTML du menu équivaut à ceci :

<nav id="menu">
 </nav>

Soit un menu vide.

Ensuite s'exécute le $(document).ready(), dans lequel tu attaches un écouteur d'évènements sur nav li a :

$('nav li a').click(function()
{
    // ...
});

Le problème, c'est qu'à ce stade, le sélecteur $('nav li a') tente d'aller chercher une structure HTML qui n'existe tout simplement pas (du moins, pas encore), et donc ce que fait jQuery est qu'il tente de récupérer ces <a> pour leur ajouter le gestionnaire de click, mais évidemment il ne récupère rien, et donc hop, ce code devient inutile et ne s'exécutera jamais.

En JavaScript, il faut savoir que les évènements s'attachent sur des balises. Et qu'une instruction jQuery comme celle-ci $('p').click( ... ); indique d'attacher un nouvel événement aux balises <p>, qui est l'évènement click.

Du coup, pour résoudre ton problème, je te propose d'attacher ton événement sur <nav id="menu"> qui existe dans la page au chargement, et de filtrer ensuite avec ton sélecteur d'origine nav li a. En jQuery, il est très facile de faire ça :

$('#menu').on('click', 'nav li a', function()
{
    // ...
});

Ainsi, l'évènement sera attaché au #menu , qui réagira donc aux clics de l'utilisateur, et ensuite jQuery procédera au filtrage (2ème paramètre) pour récupérer l'élément que tu souhaites, à savoir ici les <a>

-
Edité par ninjavascript 20 janvier 2017 à 16:42:09

AudreyMallus

20 janvier 2017 à 18:38:19

Bonsoir jmpp,

Je te remercie pour ta réponse si rapide. J'ai remplacé $('nav li a').click(function() par $('#menu').on('click', 'nav li a', function(). Cela n'a rien changé. Donc, je suppose qu'il faut que je crée deux fonctions différentes ou utiliser la fonction html() ou append() après la ligne que tu as donnée. Là, je dois m'occuper de mes filles et préparer le souper. Ce n'est pas simple de faire de la programmation en même temps.

J'aurais dû lire tous les tutoriels d'OpenClassrooms avant de me lancer dans cette formation. Les professeurs avancent trop vite. Ils donnent pleins d'exercices. Si ce n'était qu'un ou deux cours, cela irait mais là... Je travaille à mi-temps. J'ai deux filles. Ce n'est pas facile de tout gérer. D'habitude, je n'aime pas ennuyer les gens. Cependant, d'excellents étudiants font en 1 heure ce que je fais en 15 heures (XD).

Je suis nouvelle dans cette école. Donc, ce n'est pas facile d'avoir un coup de pouce. Le niveau est plus élevé que dans l'école précédente. J'ai donné plus de détails sur mon parcours dans un autre sujet (https://openclassrooms.com/forum/sujet/gerer-un-menu-dynamique). Je m'excuse pour le hors sujet. Cela fait du bien parfois de pouvoir exprimer son stress.

MERCI ET BONNE SOIRÉE

ninjavascript

20 janvier 2017 à 21:12:51

Aucun problème Dans quelle école suis-tu une formation si ce n'est pas indiscret ?

C'est normal d'être un peu moins rapide que d'autres qui n'ont pas d'enfants Il faut gérer la vie de famille en plus.

Concernant le code, toutes mes excuses. Je viens de remarquer que je t'ai montré n'importe quoi. Dans ton cas il faudra écrire :

$('#menu').on('click', 'li a', function() // <-- enlever le 'nav' dans le filtre du milieu, vu qu'on sélectionne déjà le #menu
{
    // ...
});

Réessaye comme ceci, ça devrait marcher

AudreyMallus

21 janvier 2017 à 12:08:48

Bonjour jmpp,

Je te remercie pour la correction. Tout fonctionne correctement. Le niveau au-dessus, que d'autres ont fait, serait que le menu se crée sans cliquer sur un bouton. D'ailleurs, ils ont été beaucoup plus loin. Ils créent tout un site Web via le JavaScript sans aucun bouton. Certains ont même parlé d'AngularJS et de Node.js. J'essaie d'écouter le plus possible. Par contre, à mon niveau, cela reste incompréhensible.

Je me suis mise tardivement à la programmation. D'autres sont tombés dedans étant jeunes voir très jeunes. En plus, je crois que je suis une des plus âgées dans l'école. J'adore mes filles. Ce sont mes rayons de soleil. Par contre, cela demande du temps, de la patience, ... de s'en occuper. Comme je me retrouve seules avec elles. Ce n'est pas évident.

Je vis en Belgique. OpenClassrooms est français. Donc, je ne pense pas que vous connaissiez les écoles de notre petite Belgique. Les systèmes sont assez différents. Mon père est d'origine française. Les primaires en Belgique vont de la 1ère année (vers 6 ans) à la 6ème (vers 12 ans). Les secondaires vont de la 1ère année (vers 12 ans) à la 6ème année (vers 18 ans). Parfois dans certaines catégories, il y a une 7ème année secondaire.

En France, vous avez le lycée et le collège (CM1, CM2, ... puis 5ème, 4ème, ...). Concernant le supérieure, chez nous, il y a les bacheliers (BAC+3) et les masters (BAC+5). Chez vous, il y a les BTS, ... Après, je ne connais pas tout le système français. Normalement, depuis quelques années, nos diplômes doivent être équivalents dans toute l'Europe. Quand je vois les différences entre nos deux pays, je reste perplexe.

Pourrais-tu me donner le nom de quelques fonctions qui me permettraient d'aller plus loin?

MERCI ET BONNE APRÈS-MIDI

-
Edité par AudreyMallus 21 janvier 2017 à 12:12:35

ninjavascript

21 janvier 2017 à 13:28:06

Toutes ces technos sont (plus ou moins) complémentaires. AngularJS est un framework JavaScript permettant d'architecturer une application web "single-page" (Google Docs, Trello, Dropbox, ... sont des SPA)

Et Node.js est une plateforme JavaScript permettant de développer des applications côté serveur. On pourrait dire très grossièrement qu'au lieu de programmer en PHP dans un environnement Apache/nginx, tu programmes en JavaScript, dans l'environnement nommé Node.js. C'est un choix de technologie différent.

Si tu veux approfondir ton apprentissage jQuery, jette un oeil ici : https://www.codecademy.com/learn/jquery et là : http://learn.jquery.com

Bonne lecture.

PS: N'oublie pas de marquer ton sujet en Résolu sur le forum

AudreyMallus

21 janvier 2017 à 15:46:26

Bonjour jmpp,

Je te remercie pour toutes les informations. Je vais essayer de lire les tutoriels. Cependant, je t'avoue que je préfère OpenClassroom qui est en français. Je voulais quand même essayer de faire mon menu sans devoir cliquer sur le bouton. C'est pour cela que je n'ai pas mis le sujet en Résolu. Si je n'avance pas d'ici quelques jours soit je reviendrai vers vous soit j'abandonnerai et mettrai le sujet en Résolu.

Est-ce que tu aurais des pistes?

MERCI ET BON WEEK-END