Partage
  • Partager sur Facebook
  • Partager sur Twitter

MOOC jQuery

Dynamisez vos développements JavaScript avec jQuery

    21 octobre 2017 à 10:32:14

    Bonjour,

    Pourquoi JQuery ne répond pas ?

    Cordialement.

    Gydee.

    • Partager sur Facebook
    • Partager sur Twitter
      23 octobre 2017 à 11:19:41

      Bonjour a tous Merci pour ce forum qui nous tous 

      en effet je coince sur un sujet en js charts je voudrais débuter certains de mes graphe en milieu de graphe comme dans l 'image ma ligne en gris doit commencer 3  des X la ligne rouge au point 9 des X

      //user.oc-static.com/upload/2017/10/23/15087503535647_Capture.png

      • Partager sur Facebook
      • Partager sur Twitter
        29 octobre 2017 à 9:29:27

        Bonjour,

        J'ai deux questions sur la partie 4 du mooc:

        mes questions vont peut être vous paraître simple mais bon je les pose quand même.

        1. dans la consigne il est dit de créer un fichier texte unique pour "label", mais avec une fichier texte on perd l'encodage utf-8 non , à moins qu'on doivent le passer en paramètre? (j'ai fait le fichier en html provisoirement)

        2. ce que je suis en train de faire fonctionne super bien sur firefox mais pas sur google chrome, on me dit que :"Failed to load file:///E:/Nouveau%20dossier/Message.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." Ya t il une subtilité ou un plugin à installer peut être ?

         Merci d'avance 

        Cordialement

        -
        Edité par CerjerPerpi 29 octobre 2017 à 9:31:22

        • Partager sur Facebook
        • Partager sur Twitter
          6 novembre 2017 à 13:06:52

          Salut tout le monde,

          Petit problème concernant l'activité de la partie 1 que le ctrl+F dans ce forum n'a pas pu solutionner. En fait concernant les balises <button> , je ne sais pas comment les faire réagir au clic... ou plus précisément je sais comment faire avec les méthodes .on('click', function(){}) ou .click(function(){}) (paraît que la première est plus récente et préférable) mais à ce stade du cours ce ne sont pas des méthodes apprises.

          J'arrive à sélectionner mon bouton avec $('button:contains("Label")') mais je n'arrive pas à obtenir à partir de là un état ('true' ou 'on') exploitable dans une condition, la méthode .val() renvoie "" et le pseudo-selecteur :checked ne fonctionne que pour les boutons radio ou cases à cocher et pas pour les balises <button> .

          Ma question est la suivante : est-ce que je me prends la tête pour rien ou y a-t-il une façon de réagir au clic sans eventListenner ? Merci par avance de vos réponses !


          Ci-dessous mon code mais à ce stade rien de bien folichon :

          $(function() {
            console.log($('button:contains("Label")').val());
          })
          






          -
          Edité par ArnaudFontaine1 7 novembre 2017 à 1:29:04

          • Partager sur Facebook
          • Partager sur Twitter
            7 novembre 2017 à 11:34:03

            @Arnaud tu crée un id au niveau des boutons tu utilises le sélecteur jquery et tu prends la méthode .val()

            par exemple:

            tu dois mettre le tout dans une fonction qui agira au click 

            jQuery('#btn1').click(function() {

            $('#label').val();

            });

            C'est  juste un exemple basique pour te faire comprendre le fonctionnement !

            -
            Edité par CerjerPerpi 7 novembre 2017 à 11:35:26

            • Partager sur Facebook
            • Partager sur Twitter
              7 novembre 2017 à 12:57:22

              @CerjerPerpi Merci c'est ce que j'ai fini par faire, mon problème c'était plus de savoir si il y avait une autre manière de faire car cette méthode n'a pas encore était abordée dans ce cours alors je me disais que ce n'était peut-être pas ce qui était demandé dans l'exercice. Après celles/ceux qui l'ont rendu savent si c'est pénalisant dans le barème ? (clin d'œil clin d'œil)

              -
              Edité par ArnaudFontaine1 5 février 2018 à 14:57:23

              • Partager sur Facebook
              • Partager sur Twitter
                9 novembre 2017 à 13:04:25

                Du coup ! Ayant finalement envoyé mon travail (en oubliant comme un boulet de changer la source de ma bibliothèque jQuery qui fonctionnait en local, petite vérif' pas inutile o_O), il s'avère que l'activité de la partie 2 demande l'utilisation d'une méthode qui n'est vue qu'au chapitre d'après :

                La fameuse méthode jQuery .click(function) qui peut aussi s'écrire .on('click', function) (syntaxe pas mal car on peut multiplier les événements cf. w3schools), n'hésitez pas à jeter un oeil sur le chapitre suivant avant de vous y lancer donc ;)

                • Partager sur Facebook
                • Partager sur Twitter
                  17 janvier 2018 à 9:17:45

                  Bonjour à tous,

                  j'ai une question concernant la question 3 de l'actitivé3

                  "Ajout du bouton Annuler, à droite du bouton OK pour permettre à l'utilisateur d'annuler l'insertion d'un label, d'une zone de texte ou d'un bouton."


                  En effet, j'ai du mal à comprendre le comportement qu'il est demandé. Cela concerne-t-il l'insertion du label dans la partie gauche? Dans ce cas, le bouton "annuler" disparait avec le conteneur quand on valide avec le bouton "ok"?


                  Ou bien le bouton "annuler" doit-il "vider" la zone d'input de la partie droite dans laquelle on renseigne le nom du label?

                  Merci d'avance :) 

                  • Partager sur Facebook
                  • Partager sur Twitter
                    5 février 2018 à 11:33:56

                    Salut,

                    est ce que l'apprentissage de se cours nécessite la maitrise du javascript ?

                    • Partager sur Facebook
                    • Partager sur Twitter
                      5 février 2018 à 12:08:44

                      Bonjour, 

                      en réalité il vaut mieux comprendre le javascript pour faire ce cours, tu peux toujours faire sans mais ça prendra plus de temps.

                      Bonne journée

                      • Partager sur Facebook
                      • Partager sur Twitter
                        7 février 2018 à 19:59:30

                        Bonjour,

                        Merci pour ce cours assez génial.

                        La partie de ce cour " Trouver et utiliser un plugin ", le lien http://www.jquerylist.com/ est malheureusement inaccessible.

                        • Partager sur Facebook
                        • Partager sur Twitter
                          21 février 2018 à 10:06:14

                          Bonjour, dans l’activité 4 il est expliqué de faire un fichier texte pour l'aide(pour moi un fichier texte c'est: fichier.txt) et quand on voit la correction c'est un fichier html. il faudrait être un peu plus cohérent avec les consignes.
                          • Partager sur Facebook
                          • Partager sur Twitter
                            28 février 2018 à 22:55:51

                            Bonjours

                            J'ai un problème de compréhension de l'énoncé de l'activitée 1 du cours.

                            Lien vers l'énoncé de l'activitée: http://exercices.openclassrooms.com/assessment/364?courseIdentifier=simplifiez-vos-developpements-javascript-avec-jquery&login=7646023&tk=7954626b1f94fc7262d1488f66cb1332&sbd=2016-02-01&sbdtk=2466d6bae51e373d89ac8e3f74213199

                            Mon problème est que dans le "3.Générer le formulaire"

                            Insérez le code jQuery et CSS nécessaire pour réagir aux clics sur les boutons et insérer les contrôles dans la partie gauche de la page. Une fois le code mis en place, générez le formulaire suivant :

                            Mon code affiche bien la même chose, mais dans le code HTML je n'ai pas mis de balise form et je ne sais pas si il faut en mettre ou non et si oui pourquoi ajouté une balise span au lieu de label.

                            Epuis j'aimerai savoir si ce formulaire généré doit être sauvegarder sur la page ou non.

                            Merci d'avance de votre aide.

                            Bonne soirée.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              5 mars 2018 à 10:12:44

                              Bonjour à tous, 

                              comme beaucoup, j'ai un problèle avec l'activité 1 

                              je ne comprends pas pourquoi, mon bouton apparait dans la div #gauche mais au lieu du nom de la variable, le button se remplit avec [object Object], donc la valeur du bouton est bien définit par pas envoyé

                              Voici un codepen avec tout mon code 

                              https://codepen.io/ametthey/pen/MQdQdG?editors=1111

                              help ...

                              merci d'avance

                              • Partager sur Facebook
                              • Partager sur Twitter
                                9 mars 2018 à 14:16:12

                                Bonjour, 

                                Je suis en train de bloquer au chapitre "Plus loin avec AJAX". J'utilise la technologie "Wamp" pour la partie serveur.

                                Mon problème, c'est que je n'arrive pas à récupérer les données dans le fichier fichier.json

                                <!DOCTYPE html>
                                <html lang="fr">
                                	<head>
                                		<meta charset="utf-8" />
                                		<title>Charger des Données Codées en JSON</title>
                                	</head>
                                
                                	<body>
                                		<button id="charger">Charger et traiter les données</button>
                                		<div id="r">Cliquez sur "Charger et traiter les données" pour lancer la lecture et le traitement des données JSON</div>
                                
                                		<script src="jquery.js"></script>
                                		<script>
                                		  $(function() {
                                		    $('#charger').click(function() {
                                		        $.getJSON('http://localhost/simplifiez-vos-developpements-javascript-avec-jquery/chapitre17-premiers-pas-avec-ajax/fichier.json', function(donnees) {
                                		        $('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
                                		        $('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
                                		        $('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
                                		        $('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');
                                		      });
                                		    });  
                                		  });
                                		</script>
                                	</body>
                                </html>

                                {
                                  "nom": "Pierre Durand",
                                  "age": "27",
                                  "ville": "Paris",
                                  "domaine": "HTML5, CSS3, JavaScript"
                                }

                                Merci pour votre aide.

                                Mac


                                • Partager sur Facebook
                                • Partager sur Twitter
                                  12 mars 2018 à 11:40:45

                                  Bonjour à tous,

                                  je suis aussi coincé sur l'Activité_Partie 2 :lol:

                                  Mes formulaires marchent mais quand je veux créer un deuxième formulaire de même type, ça ne marche pas. Je rentre (par exemple) le nom du nouveau label mais il m'affiche la valeur du premier label que j'ai entré.

                                  Mes formulaires stockent le premier input que je valide et après ils n'affichent plus que ceux là....

                                  J'ai essayé de réinitialiser les valeurs des formulaires avec :

                                  .removeAttr()
                                  

                                  ou encore

                                  .val()

                                  mais rien y fait.

                                  Merci d'avance pour votre aide :D

                                  Edit :

                                  C'est bon j'ai trouvé ! J'ai utilisé :

                                  .remove()

                                  sur mes éléments



                                  -
                                  Edité par James Averill 12 mars 2018 à 13:29:49

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    26 mars 2018 à 12:03:27

                                    Mac11 a écrit:

                                    Bonjour, 

                                    Je suis en train de bloquer au chapitre "Plus loin avec AJAX". J'utilise la technologie "Wamp" pour la partie serveur.

                                    Mon problème, c'est que je n'arrive pas à récupérer les données dans le fichier fichier.json

                                    <!DOCTYPE html>
                                    <html lang="fr">
                                    	<head>
                                    		<meta charset="utf-8" />
                                    		<title>Charger des Données Codées en JSON</title>
                                    	</head>
                                    
                                    	<body>
                                    		<button id="charger">Charger et traiter les données</button>
                                    		<div id="r">Cliquez sur "Charger et traiter les données" pour lancer la lecture et le traitement des données JSON</div>
                                    
                                    		<script src="jquery.js"></script>
                                    		<script>
                                    		  $(function() {
                                    		    $('#charger').click(function() {
                                    		        $.getJSON('http://localhost/simplifiez-vos-developpements-javascript-avec-jquery/chapitre17-premiers-pas-avec-ajax/fichier.json', function(donnees) {
                                    		        $('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
                                    		        $('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
                                    		        $('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
                                    		        $('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');
                                    		      });
                                    		    });  
                                    		  });
                                    		</script>
                                    	</body>
                                    </html>

                                    {
                                      "nom": "Pierre Durand",
                                      "age": "27",
                                      "ville": "Paris",
                                      "domaine": "HTML5, CSS3, JavaScript"
                                    }

                                    Merci pour votre aide.

                                    Mac


                                    Je rencontre exactement le même problème que Mac11. 

                                    Merci de votre aide.

                                    EDIT :

                                    -------

                                    Le code ci-dessus est parfaitement fonctionnel....

                                    Mais attention pour le fichier fichier.json, il faut surtout ne pas faire de copier-coller du fichier du cours.

                                    Bien penser à l'écrire "à la main" et bien l'indenter.

                                    Et alors... Tout fonctionne à merveille...



                                    -
                                    Edité par christianleroc'h 26 mars 2018 à 15:23:34

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      3 juin 2018 à 13:41:34

                                      SébDesch a écrit:

                                      Bonjour,

                                      Une petite question sans doute bête... Je suis en train d'étudier la partie sur Ajax, et de réaliser le TP de Chat en jQuery. 

                                      J'ai un petit soucis car malgré la recopie conforme du code fourni en correction, cela ne fonctionne pas. J'aurais aimé savoir si le fichier "ac.htm" sensé stocker les lignes de discussion du chat doit avoir un formatage particulier? J'ai peut-être loupé une étape mais je ne crois pas avoir jamais lu quoi que ce soit sur ce fichier .htm auparavant, et le rédacteur du cours semble nous dire de l'utiliser comme une évidence, sans plus d'explications.

                                      En comparaison, je fichier JSON qu'on voit rapidement dans le cours nécessite un formatage "particulier" des données qui lui sont envoyées / stockées.

                                      Merci par avance pour vos éclaircissements! 

                                      EDIT : Je voulais juste préciser que c'est le côté "php" de la chose qui semble ne pas fonctionner. Rien ne s'inscrit dans le fichier "ac.htm".

                                      -
                                      Edité par SébDesch 8 mars 2016 à 10:55:53

                                      SébDesch a écrit:

                                      Guettoudou a écrit:

                                      Voilà le problème ! Ton fichier ac.htm doit être vide au départ, sans toutes les balises html...

                                      Tu verras, les messages s'écrivent sous la forme " pseudo > mon message<br> ", et s'ajoutent de droite à gauche, comme en arabe ou en hébreu. Au début, çà surprend...

                                      Cordialement

                                      -

                                      Edité par Guettoudou il y a environ 14 heures


                                      Rien n'y fait, malgré cette modification ça ne fonctionne pas. Pourtant je lance bien le fichier via mon serveur apache, le PHP est bien interprété puisque mon "mouchard" inséré dans le PHP fonctionne. C'est simplement l'accès, écriture au fichier "ac.htm" qui ne fonctionne pas.

                                      Eventuellement si qqn a qques minutes pour partager son code fonctionnel, que je vois si ça marche chez moi et si oui, quelle différence il peut y avoir. Sinon ça restera un mystère non élucidé! 





                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        4 juin 2018 à 18:45:16

                                        Hello, 

                                        je suis sur la partie jQuery UI   https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery/jquery-ui

                                        Et à "animation des couleurs" , j'obtiens un drôle de truc , la <div> s'efface lorsqu'on ouvre la page. 

                                        Exemple donné par le cours :

                                        https://course.oc-static.com/ftp-tutos/cours/jquery/partie%205/animation.html 

                                        Quel est le souci ? J'ai le même souci du coup  :(

                                        Merci à vous !

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          21 juin 2018 à 2:40:27

                                          finalement c'est bon ^^

                                          -
                                          Edité par YannOzier 21 juin 2018 à 6:34:25

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            24 octobre 2018 à 13:46:04

                                            Bonjour,

                                            concernant la partie ajax : "Simplifiez votre générateur avec des messages d'aides" : il est impossible de lire un fichier txt/html avec la methode load() avec un chemin local si le fichier n'est pas sur le meme serveur web(ca leve une erreur "cross origin request")

                                            la solution est de déployer le site sur un serveur web ( par exemple wamp ) mais ce n'est pas precisé du tout dans le sujet.

                                            est ce bien la solution attendue ? 

                                            j'ai peur que si j'applique cette solution je sois noté négativement sur cet exercice en fonction du barème.

                                            Merci .

                                            -
                                            Edité par Kerzhain 26 octobre 2018 à 8:32:29

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              25 octobre 2018 à 6:44:17

                                              Bonjour Clément,

                                              Ton fichier html avec les informations d'aide doit être dans le même répertoire que ton fichier qui contient la méthode load(), tu n'auras pas d'erreur "cross origin".

                                              J'ai fait mon TP comme ça et aucun soucis.


                                              Clement a écrit:

                                              Bonjour,

                                              concernant la partie ajax : "Simplifiez votre générateur avec des messages d'aides" : il est impossible de lire un fichier txt/html avec la methode load() avec un chemin local si le fichier n'est pas sur le meme serveur web(ca leve une erreur "cross origin request")

                                              la solution est de déployer le site sur un serveur web ( par exemple wamp ) mais ce n'est pas precisé du tout dans le sujet.

                                              est ce bien la solution attendue ? 

                                              j'ai peur que si j'applique cette solution je sois noté négativement sur cet exercice en fonction du barème.

                                              Merci .



                                              -
                                              Edité par seb606 26 octobre 2018 à 13:22:20

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                3 janvier 2019 à 12:55:58

                                                salut tous le monde 
                                                ce code ne fonctionne pas pouvez vous m'aidé
                                                $(function(){
                                                    var $caroussel = $('#caroussel');
                                                    var $imgs = $('#caroussel img');
                                                    var indexImg = $imgs.length - 1;
                                                    var i = 0;
                                                    var $currentImg = $imgs.eq(i);
                                                    $imgs.css('display', 'none');
                                                    $currentImg.css('display', 'block');
                                                    $caroussel.append('<div id="control"><span class="prev">Prev</span><span class="next">Next</span></div>');
                                                    $('.next').on('click', function(){
                                                        i++;
                                                        if(i <= indexImg){
                                                            $imgs.css('display', 'none');
                                                            $currentImg = $imgs.eq(i);
                                                            $currentImg.css('display', 'block');
                                                        }else{
                                                            i = 0;
                                                        }
                                                    });
                                                    $('.prev').on('click', function(){
                                                        i--;
                                                        if(i >= 0){
                                                            $imgs.css('display', 'none'); 
                                                            $currentImg = $imgs.eq(i);
                                                            $currentImg.css('display', 'block');
                                                        }else{
                                                            i = indexImg;
                                                        }
                                                    });
                                                    function slideImg(){
                                                        setTimeout(function(){
                                                            if(i < indexImg){
                                                                i++;
                                                            }else{
                                                                i = 0;
                                                            }
                                                            $imgs.css('display', 'none');
                                                            $currentImg = $imgs.eq(i);
                                                            $currentImg.css('diplay', 'block');
                                                            slideImg();
                                                        }, 7000);
                                                    }
                                                    slideImg();
                                                });
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  15 janvier 2019 à 17:07:29

                                                  Bonjour,

                                                  Je tiens à apporter une précision pour la première activité de ce cours.

                                                  Nombreux sont ceux qui ont été confronté au problème de la consigne : "Utilisez after()".

                                                  Personnellement, je ne voyais pas l'utilité. La méthode est utilisée sur l'élément <hr> du div de droite.

                                                  Il s'avère que le code de base fourni lors de cette activité ne comporte pas ce <hr> ! Il apparaît miraculeusement dans la correction dans le corps de l'HTML... et n'a pas été généré via jquery.

                                                  En espérant que cela aidera les futurs étudiants et qu'un membre d'OCR passes par là pour modifier le code de base fourni.

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Emeric Hochart
                                                    Staff 15 janvier 2019 à 17:41:24

                                                    Bonjour,

                                                    Hello @OC

                                                    Afin de vous assurer d'avoir une réponse le plus rapidement possible, je vous invite à directement contacter l'équipe du site via l'adresse hello@openclassrooms.com. En effet, l'équipe du site ne passant que très rarement sur les forums, il sera beaucoup plus efficace de les contacter directement.

                                                    Par ailleurs, tu peux aussi essayer de contacter l'auteur du cours pour lui signaler la modification à apporter ;)

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

                                                    MOOC jQuery

                                                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                    • Editeur
                                                    • Markdown