Bingo !

Bien joué, je me suis focalisé sur le JS car tous les exemple du chapitre y sont bout à bout... je croyais à une interference...

Grand merci pour ton aide

Bonjour

Je suis en train de faire l'activité 2 où on ajoute des liens mais je tombe sur un problème je ne peux pas ajouter plusieurs liens. Quand j'en mets un 2ème, il ne le met pas mais en plus il enlève le 1er, est ce que c'est normal et si oui pourquoi?

Merci 

Salut,

faudrait montrer le code que tu as fait.

/*
Activité 2
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web
function lesElements(lien) {

// création de la balise "a" et gestion des couleurs etc...
    var titreLien                  = document.createElement("a");
    titreLien.href                 = lien.url;
    titreLien.style.color          = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight    = "7px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien                   = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    var ligneTitre              = document.createElement("h2");
    ligneTitre .style.margin      = "0px";
    ligneTitre .appendChild(titreLien);
    ligneTitre .appendChild(urlLien);

    var ligneDetails             = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien                = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre );
    divLien.appendChild(ligneDetails);

    return divLien;   //

    }



//Crée fonction creerInputElement
function creerInputElement(placeholder , id) {
    var inputElt = document.createElement("input") ;
    inputElt.setAttribute("type" , "text") ;
    inputElt.setAttribute("required" , "required") ;
    inputElt.setAttribute("placeholder" , placeholder) ;
    inputElt.setAttribute("id" , id) ;
    inputElt.setAttribute("name" , id) ;
    inputElt.style.marginRight = "5px" ;
    return inputElt ;
}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = lesElements(lien);
    contenu.appendChild(lesElements(lien));
});


//Création et positionnement du bouton
var boutonElt = document.createElement("button") ;
boutonElt.textContent = "Ajouter un lien" ;
var pElt = document.createElement("p") ; // Crée un paragraphe pour contenir boutonElt

pElt.appendChild(boutonElt);
document.body.insertBefore(pElt , contenu);

//Ajout évènement click sur boutonElt
boutonElt.addEventListener("click" , function () {
    boutonElt.style.visibility = "hidden" ;
    //Création du formulaire
    var form = document.createElement("form") ;

    //Création des éléments du formulaire
    var inputAuteurElt = creerInputElement("Entrez votre nom" , "auteur") ;
    var inputTitreElt = creerInputElement("Entrez le titre du lien" , "titre") ;
    var inputUrlElt = creerInputElement("Entrez l'URL du lien" , "url") ;

    //Création du type submit sans la fonction
    var inputSubmitElt = document.createElement("input");
    inputSubmitElt.setAttribute("type" , "submit") ;
    inputSubmitElt.setAttribute("id" , "sub") ;
    inputSubmitElt.setAttribute("value" , "Ajouter") ;

    //Insertion des éléments dans le formulaire
    form.appendChild(inputAuteurElt) ;
    form.appendChild(inputTitreElt) ;
    form.appendChild(inputUrlElt) ;
    form.appendChild(inputSubmitElt) ;

    //Insertion du formulaire dans pElt
    pElt.insertBefore(form, boutonElt);

    //Ajout évènement de type submit sur le formulaire
    document.getElementById("sub").addEventListener("click",function(e) {
       e.preventDefault();
        var inputUrlEltValeur = form.elements.url.value ;

        if((inputUrlEltValeur.indexOf("http://") === -1) || (inputUrlEltValeur.indexOf("https://") === -1)) {
            inputUrlEltValeur = "http://" + inputUrlEltValeur ;
        }

        //Crée objet lien
        var lienAjoute = {
            titre: form.elements.titre.value,
            url: inputUrlEltValeur,
            auteur: form.elements.auteur.value
        };

        //Déclaration du nouveau lien à ajouter
        var nouveauLien = lesElements(lienAjoute) ;
         listeLiens.push(nouveauLien);


        //Insertion du nouveau lien
        var contenu = document.getElementById("contenu");
        contenu.insertBefore(nouveauLien,contenu.childNodes[0]) ;

        form.style.visibility = "hidden" ;
        boutonElt.style.visibility = "visible" ;

        //Message de confirmation
        var messageElt = document.createElement("p");
        messageElt.textContent = "Le lien \"" + lienAjoute.titre + "\" a bien été ajouté.";
        pElt.insertBefore(messageElt, boutonElt);

        // Suppresion du message
        setTimeout(function () {
            pElt.removeChild(messageElt);
        }, 2000);




    });

});

Voilà

Le soucis est que tu crées un nouveau formulaire à chaque fois que tu cliques sur le bouton "Ajouter un lien" et c'est dans ce nouveau formulaire que tu appliques le e.preventDefault(), mais comme un id doit être unique, le clic se déroule sur le bouton du formulaire précédent  et hop il est validé (tu auras remarqué que la page se recharge à la 2è action).

Une solution serait donc de créer un seul formulaire.

Pendant le premier clic sur le bouton "Ajouter le lien", faudrait tester d'abord si le formulaire d'ajout de lien existe (en lui donnant un id lors de sa première création et tester la valeur de document.getElementById n'est pas null) et tu changes simplement la visibilité sinon tu crées le formulaire.

J'espère que je ne t'ai pas trop embrouillé.

Merci de ta réponse, j'essayerai quand je pourrai et te dirais si c'est corrigé. Je pense avoir compris faut juste le faire maintenant

EDIT:

/*
Activité 2
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web
function lesElements(lien) {

// création de la balise "a" et gestion des couleurs etc...
    var titreLien                  = document.createElement("a");
    titreLien.href                 = lien.url;
    titreLien.style.color          = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight    = "7px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien                   = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    var ligneTitre              = document.createElement("h2");
    ligneTitre .style.margin      = "0px";
    ligneTitre .appendChild(titreLien);
    ligneTitre .appendChild(urlLien);

    var ligneDetails             = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien                = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre );
    divLien.appendChild(ligneDetails);

    return divLien;   //

    }



//Crée fonction creerInputElement
function creerInputElement(placeholder , id) {
    var inputElt = document.createElement("input") ;
    inputElt.setAttribute("type" , "text") ;
    inputElt.setAttribute("required" , "required") ;
    inputElt.setAttribute("placeholder" , placeholder) ;
    inputElt.setAttribute("id" , id) ;
    inputElt.setAttribute("name" , id) ;
    inputElt.style.marginRight = "5px" ;
    return inputElt ;
}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = lesElements(lien);
    contenu.appendChild(lesElements(lien));
});


//Création et positionnement du bouton
var boutonElt = document.createElement("button") ;
boutonElt.textContent = "Ajouter un lien" ;
var pElt = document.createElement("p") ; // Crée un paragraphe pour contenir boutonElt

pElt.appendChild(boutonElt);
document.body.insertBefore(pElt , contenu);

//Ajout évènement click sur boutonElt
boutonElt.addEventListener("click" , function () {
    boutonElt.style.visibility = "hidden" ;
    //Création du formulaire
    if(document.getElementById("ajoueLien")==null){
    var form = document.createElement("form") ;
    form.setAttribute("id","ajoueLien");

    //Création des éléments du formulaire
    var inputAuteurElt = creerInputElement("Entrez votre nom" , "auteur") ;
    var inputTitreElt = creerInputElement("Entrez le titre du lien" , "titre") ;
    var inputUrlElt = creerInputElement("Entrez l'URL du lien" , "url") ;

    //Création du type submit sans la fonction
    var inputSubmitElt = document.createElement("input");
    inputSubmitElt.setAttribute("type" , "submit") ;
    inputSubmitElt.setAttribute("id" , "sub") ;
    inputSubmitElt.setAttribute("value" , "Ajouter") ;

    //Insertion des éléments dans le formulaire
    form.appendChild(inputAuteurElt) ;
    form.appendChild(inputTitreElt) ;
    form.appendChild(inputUrlElt) ;
    form.appendChild(inputSubmitElt) ;

    //Insertion du formulaire dans pElt
    pElt.insertBefore(form, boutonElt);
    }
    else{
        var form = document.getElementById("ajoueLien");
        form.style.visibility ="visible";
        form.elements.auteur.value="";
        form.elements.titre.value="";
        form.elements.url.value="";
    }
    //Ajout évènement de type submit sur le formulaire
    document.getElementById("sub").addEventListener("click",function(e) {
       e.preventDefault();
        var inputUrlEltValeur = document.getElementById("ajoueLien").elements.url.value ;

        if((inputUrlEltValeur.indexOf("http://") === -1) || (inputUrlEltValeur.indexOf("https://") === -1)) {
            inputUrlEltValeur = "http://" + inputUrlEltValeur ;
        }

        //Crée objet lien
        var lienAjoute = {
            titre: document.getElementById("ajoueLien").elements.titre.value,
            url: inputUrlEltValeur,
            auteur: document.getElementById("ajoueLien").elements.auteur.value
        };

        //Déclaration du nouveau lien à ajouter
        var nouveauLien = lesElements(lienAjoute) ;


        //Insertion du nouveau lien
        var contenu = document.getElementById("contenu");
        contenu.insertBefore(nouveauLien,contenu.childNodes[0]) ;

        document.getElementById("ajoueLien").style.visibility = "hidden" ;
        boutonElt.style.visibility = "visible" ;

        //Message de confirmation
        var messageElt = document.createElement("p");
        messageElt.textContent = "Le lien \"" + lienAjoute.titre + "\" a bien été ajouté.";
        pElt.insertBefore(messageElt, boutonElt);

        // Suppresion du message
        setTimeout(function () {
            pElt.removeChild(messageElt);
        }, 2000);




    });

});

Alors maintenant je peux bien ajouter plusieurs liens mais lors du 1er tout va bien, au 2ème il m'en rajoute 2 puis au 3ème 3 etc. Faudrait que je reset quelque chose je pense mais je sais pas trop quoi.

-
Edité par wil03 9 août 2017 à 14:34:50

wil03 a écrit:

Merci de ta réponse, j'essayerai quand je pourrai et te dirais si c'est corrigé. Je pense avoir compris faut juste le faire maintenant

EDIT:...

Alors maintenant je peux bien ajouter plusieurs liens mais lors du 1er tout va bien, au 2ème il m'en rajoute 2 puis au 3ème 3 etc. Faudrait que je reset quelque chose je pense mais je sais pas trop quoi.

-
Edité par wil03 il y a environ 18 heures

T'as trouvé la solution ? Y'avait un pti trick assez intéressant en tout cas ds ton pb je trouve

Salut,

d'abord tu utilises plusieurs fois document.getElementById('ajoueLien') donc tu peux créer une variable pour ça. Donc tu initialises ton "form" avec document.getElementById('ajoueLien') en dehors du clic de boutonElt.

Pour ajouter les liens, utilise un li plutôt qu'un div puisque tu l'ajoutes à un ul.

Pour éviter que l'événement s'exécute plus d'une fois sur le même bouton #sub, ajoute e.stopImmediatePropation() après ton e.preventDefault(); .

-
Edité par WillyKouassi 10 août 2017 à 15:21:24

Salut

Merci Willy, c'est bien ce qu'il me manquait le e.stopImmediatePropagation(); pour le "form" ça y était mais quand j'ai mis le if et le else il ne trouvait plus la variable mais j'ai corrigé depuis.

Par contre pourquoi l’événement se déclenchait plusieurs fois?

• Réponse courte : parceque tu attaches un nouvel event listener à chaque click

• Réponse longue : Je vais me permettre une réponse un peu longue parceque je trouve que bcp de questions sur ce fils sont liées à une mauvaise compréhension d'un élément fondamental de javascript, bien qu'il ait l'air simple au premier abord (ce qu'à mon avis il n'est pas tant que ça) : le scoping

En ajoutant un eventListener à chaque click de bouton tout en voulant n'avoir qu'une seule action au click du submit , tu te reposes consciement ou non sur cette spécification de addEventListener :

"If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the removeEventListener method."

Maintenant le problème c'est : pourquoi ça marche pas ?

Et la réponse bien sur, c'est le scoping : Comment fais JS pour savoir que c'est les "same parameters" ? Il s'en souvient, l'a en mémoire. Mais que fais une fonction (et c'est là toute son utilié) ? Elle scope localement toutes ses variables, cad, d'une certaine façon, qu'à chaque entrée dans la fonction, le compileur est naif, les variables sont toutes à nouveau nouvelles , exceptées la variables utilisées ds la fonction mais scopées à l'extérieur de la fonction (objet global, autre fonction contenant cette fonction...)

[Note : il y a aussi ici le pb de la fonction anonyme, qui elle aussi n'est pas retenue.]

Métaphore : la dernière fois qu'on t'as demandé de noter un numero de tel, tu ne l'as retenu que qq instant, le tps de l'enregistrer ds ton tel. Si on te demande à nouveau de le noter aujourd'hui, tu ferais le même travail qu'à l'époque, comme si c'était un nouveau numéro puisque tu ne te souviens pas du numéro. A l'inverse, le numéro de ton/ta amoureux(se) t'es sans doute connu de sorte que si je te le disais tu saurais que tu le connais déjà ("same parameter") et qu'il n'est pas besoin de l'enregistrer à nouveau ds ton tel.

A partir de là, deux gd types de solutions (et bcp de possibilités pr chacune, je n'en citerai que qq1) :

• tu continues d'ajouter un EventListener à chaque click, mais tu fais en sortes que seul le dernier soit exécuté. C'est ce que fais stopImmediatPropagation  . Tu aurais aussi pu rajouter un removeEventListener  à la fin de chaque ajout pour qu'il "s'auto efface" à chaque fois.
• plus élégant IMHO, tu fais en sortes de scoper à l'extérieur de la fonction l'eventListener, soit explicitement en créant ton form et l'event listener du submit hors de la fonction appelée au click du bouton, soit implicitement en ajoutant l'eventListener du submit lors de la première création du fom ds ton ton if{...}  (dans ce cas, le fom est ds le DOM, ses attributs et l'eventListener sont déjà connus de JS lors de l'appel de la fonction. Le getElement.. le livre "clefs en main").

Note tu peux vérifier tt ça ds les devtools, en sélectionnant le bouton submit et en regardant les eventListener qui lui sont attachés : tu verras que ds le premier type de solution, tu ajoutes un nouvel eventListener à chaque click (+- effacé à chque fois), alors que ds les deuxieme type de solution, il n'y en a qu'un qui est réutilisé.

-
Edité par 220A37 10 août 2017 à 18:38:43

Ouah merci pour ta réponse complète. Pour le projet je vais garder le stopImmediatPropagation mais je retiens ce que tu as donné pour le futur.

ok

-
Edité par JessyBROS 27 août 2017 à 13:09:57

Bonjour à vous,

Je suis dans l'activité 1.

Afin que chaque lien soit un titre, je voulais savoir s'il était possible de créer un élément qui soit à la fois "a" et "h2". Est-ce possible ?

Bon, j'ai fait quelques tentatives en bricolant et a priori ça ne l'est pas (var titreLien = document.createElement("a h2"); ... non ça ne fonctionne pas >_<). Est-ce que je dois plutôt chercher à ajouter des propriétés Css pour que le titre ressorte en gros et en gras ? (est-ce autorisé). Est-ce que je fais fausse route avec mon histoire de h2 ?

-
Edité par JoQe 8 septembre 2017 à 10:37:07

Bonjour JoQe.

Il faut justement que le titre au click nous redirige vers le lien.

Et le lien il faut tout simplement enlevé le style css sur l'url avec "decoration: none"

(je te laisse dans un premier temps chercher comment l’utiliser.)

Bon courage ;p

Salut à tous,

Je coince sur l'activité 2, tout fonctionne mis à part ce problème :

Je pense que pour valider le formulaire il faut utiliser un bouton submit et j'ai cru voir quelques posts de ce topic qui allaient dans ce sens, seulement, impossible de bloquer son action avec preventDefault(). La page se recharge et je perds tout ce qui a été saisi.

Quand je remplace par "click" dans l'addEventListener tout fonctionne à part la contrainte de remplir chaque case, donc je ne sais pas si c'est moi qui ai mal compris l'utilisation du preventDefault() ou si ça vient d'ailleurs.

//Activité 1

var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

function creerElementLien(lien) {
    var titreLien = document.createElement("a");
    titreLien.href = lien.url;
    titreLien.style.color = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight = "5px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    // Cette ligne contient le titre et l'URL du lien
    var ligneTitre = document.createElement("h4");
    ligneTitre.style.margin = "0px";
    ligneTitre.appendChild(titreLien);
    ligneTitre.appendChild(urlLien);

    // Cette ligne contient l'auteur
    var ligneDetails = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre);
    divLien.appendChild(ligneDetails);

    return divLien;
}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    contenu.appendChild(elementLien);
});

// Activivé 2

//LIEN D'ACCES À LA BALISE FORM DU DOM
var form = document.getElementById("formulaire");
form.style.margin = "10px 0";

//BOUTON DE DÉPLOIEMENT DU FORMULAIRE
var ajoutLien = document.createElement("button");
ajoutLien.textContent = "Ajouter un lien";

//CRÉATION DE LA CARTOUCHE DE CONFIRMATION
var conf = document.createElement("h4");
conf.style.color = "#428bca";
conf.style.padding = "15px";
conf.style.backgroundColor = "#d6ecf6";
conf.style.marginBottom = "10px";

//Fonction qui déploie le formulaire de création de nouveau lien appelé par le bouton
function formNouveauLien(e){

    //VIDAGE DE LA BALISE FORM
    form.innerHTML = "";
    
    //ÉLÉMENTS DU FORMULAIRE D'ENTRÉE
    var entreAuteur = document.createElement("input");
    var entreTitre = document.createElement("input");
    var entreUrl = document.createElement("input");
    var btnAjout = document.createElement("input");
    
    //DISTRIBUTION DES TYPES ET AUTRES ATTRIBUTS DES BALISES INPUT
    entreAuteur.type = "text";
    entreTitre.type = "text";
    entreUrl.type = "text";
    btnAjout.type = "submit";

    entreAuteur.placeholder = "Entrez votre nom";
    entreAuteur.required = true;
    entreTitre.placeholder = "Entrez le titre du lien";
    entreTitre.required = true;
    entreUrl.placeholder = "Entrez l'URL du lien";
    entreUrl.required = true;

    btnAjout.value = "Ajouter";
    
    //ÉVÉNEMENT DU BOUTON D'ENVOI
    btnAjout.addEventListener("submit", function(event){
        //DÉSACTIVE LA FONCTION D'ENVOI --------------------------------------------------------------------------- NE FONCTIONNE PAS !!!
        event.preventDefault();

        //CRÉATION D'UN OBEJT NOUVEAU LIEN POUR LA FONCTION creerElementLien()
         var nouveauLien = [];

        nouveauLien.auteur = entreAuteur.value;
        nouveauLien.titre = entreTitre.value;

        //AJOUT DE L'HTTP:// SI MANQUANT
        if(entreUrl.value.indexOf("http://")===0||entreUrl.value.indexOf("https://")===0)
            nouveauLien.url = entreUrl.value;
        else
            nouveauLien.url = "http://" + entreUrl.value;

        //CRÉATION DU LIEN AVEC LA FONCTION DE LA PREMIÈRE PARTIE
        var lienFinal = creerElementLien(nouveauLien);
        
        //ENVOI DU LIEN AU DÉBUT DE L'ÉLÉMENT CONTENU
        contenu.insertBefore(lienFinal,contenu.childNodes[0]);

        //CONFIRMATION D'AJOUT DE LIEN ET TIMEOUT
        conf.textContent = "Le lien " + nouveauLien.titre + " a bien été ajouté.";
        document.body.insertBefore(conf, form);
         setTimeout(function(){
            document.body.removeChild(conf);
        },2000);

        //VIDAGE DE LA BALISE FORM ET RAJOUT DU BOUTON DE DÉPLOIEMENT
        form.innerHTML = "";
        form.appendChild(ajoutLien);
    });

    //ENVOI DES ÉLÉMENTS DU FORMULAIRE DANS LE DOM
    form.appendChild(entreAuteur);
    form.appendChild(entreTitre);
    form.appendChild(entreUrl);
    form.appendChild(btnAjout);
};

//APPELLE LA FONCTION POUR LE DÉPLOIEMENT DU FORMULAIRE
ajoutLien.addEventListener("click", formNouveauLien);

//ENVOI DU BOUTON DE DÉPLOIEMENT DANS LE DOM
form.appendChild(ajoutLien);

-
Edité par Pastachoco 30 septembre 2017 à 15:16:24

la fonction click qui crée le formulaire

et tu ajoutes le lien avec le submit

le even.preventDefault(); se met bien a la première ligne lorsque tu crée la fonction submit. 

je te laisse continuer

Je n'ai pas bien compris ce que te voulais dire, mais ça m'a permis de trouver donc qu'importe :

-l.102 j'utilise l'addEventListener sur le bouton "submit" alors que c'est un événement qui s'emploie sur le formulaire ! J'ai remplacé par

form.addEventListener("submit", function(event){

et ça marche !

Merci bcp

Si tu as trouvé, c'est cool^^ amuses toi bien pour la suite

Bonjour,

ayant posté il y a qq heures mais ne pouvant pas supprimé mon post. J'y ai tout effacer pour éviter un gros pâté polluer ce forum.

Désolé pour la bourde

-
Edité par Jénova 24 novembre 2017 à 16:44:26

Bonjour tout le monde,

Concernant le chapitre 3

Modifiez la structure de la page

exercice journaux

voici mon code j'aimerais savoir si c'est bien pensé ou pas.

voici le code JS

var journaux = ["http://lemonde.fr", "http://lefigaro.fr", "http://liberation.fr"];

var ul = document.createElement("ul");
ul.id = "journaux";
document.querySelector("#contenu").appendChild(ul);
journaux.forEach(function(journal){
   
    var a = document.createElement("a");
    a.href = journal;
    a.title = "Lien";
    a.classList.add("lienJournal");
    a.textContent = journal;
    
    var jE = document.createElement("li");
    jE.id = journal;
    
    document.querySelector("#journaux").appendChild(jE);   
    document.getElementById(journal).appendChild(a);
    
});

voici le code html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Quelques journaux en ligne</title>
</head>
<body>
    <h1>Quelques journaux en ligne</h1>
    <div id="contenu"></div>

    <script src="../js/journaux.js"></script>
</body>
</html>

Merci

-
Edité par asrion 25 novembre 2017 à 15:06:20

Bonjour,

Peut-être que la question a déjà été posée mais je n'ai pas le courage de tout lire...

J'ai un problème avec la fin du cours  Envoyez des données JSON .

Pas moyen de récupérer le contenu du fichier post_json.log, qui est pourtant bien créé et modifié si je change le contenu de l'objet dans le JS. La réponse envoyée est null. (Le film "" a été envoyé au serveur)

Je suis sur Ubuntu, dans mon fichier apache2.conf, j'ai

	Options Indexes FollowSymLinks
	#AllowOverride None
	Require all granted
    Order Allow,Deny
    Allow from all
    AllowOverride all
#	Header always set Access-Control-Allow-Origin "*"
#	Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
#	Header always set Access-Control-Max-Age "1000"
#	Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
	<IfModule mod_headers.c>
	# Accept cross-domain requests
	Header always set Access-Control-Allow-Origin "*"
	Header always set Access-Control-Allow-Headers "Content-Type"
</IfModule>

J'ai essayé pas mal de choses, c'est pour ça qu'il y a plein de commentaires :-) Je précise bien que tous les autres exemples fonctionnent (ajax avec GET même en JSON,  et POST avec les formulaires etc.)

Pour le reste, le JS que j'ai est le même que dans le cours (j'ai fait du copié-collé pour finir mais ça ne change rien).

J'ai constaté dans les en-têtes de requête et de réponse que le format était défini comme "application/json" pour la requête et "text/html" pour la réponse

 En-têtes de la réponse (299 o)	
Access-Control-Allow-Headers	
Content-Type
Access-Control-Allow-Origin	
*
Connection	
Keep-Alive
Content-Length	
0
Content-Type text/html
Date	
Mon, 15 Jan 2018 20:03:28 GMT
Keep-Alive	
timeout=5, max=99
Server	
Apache/2.4.7 (Ubuntu)
X-Powered-By	
PHP/5.5.9-1ubuntu4.22

 En-têtes de la requête (392 o)	
Accept	
*/*
Accept-Encoding	
gzip, deflate
Accept-Language	
fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Cache-Control	
max-age=0
Connection	
keep-alive
Content-Length	
80
Content-Type application/json
DNT	
1
Host	
localhost
Origin	
null
User-Agent	
Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/57.0

Testé dans Firefox, mais aussi Chromium (le Chrome de linux) sans plus de succès.

J'espère que quelqu'un pourra m'aider, je commence à désespérer ...

Merci d'avance

-
Edité par cecemel7 15 janvier 2018 à 21:20:28

Bonjour,

Je suis bloqué dans l'activité 2, j'ai pu aller jusqu'à la saisie des infos, je l'ai récupéres bien (test console.log), mais j'ai beau essayer pleins de solutions, je n'arrive pas à ajoutez ces infos sur la page.

Ci-dessous mon code( juste la partie qui fonctionne), pouvez vous juste me donnez une infos pour continuer et afficher mon lien comme les précédents ?

Merci d'avance.

/*
Activité 1
*/
 
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
function nouveauLien(lien){
//création de l'info "titre"
    var titreElt = document.createElement("a");
    titreElt.href = lien.url;
    titreElt.style.color = "#428bca";
    titreElt.style.textDecoration = "none";
    titreElt.style.margin = "4px";
    titreElt.appendChild(document.createTextNode(lien.titre));
     
// création de l'info "url"
    var urlElt = document.createElement("span");
    urlElt.appendChild(document.createTextNode(lien.url));
     
// concaténation "titre + url"
    var ligneEnTeteElt = document.createElement("h4")
    ligneEnTeteElt.style.margin = "1px";
    ligneEnTeteElt.appendChild(titreElt);
    ligneEnTeteElt.appendChild(urlElt);
     
// création de l'info "auteur"
    var auteurElt = document.createElement("span");
    auteurElt.appendChild(document.createTextNode("Ajouté par "+ lien.auteur));
    auteurElt.style.margin = "4px";
     
// création d'une div rappellant toute les infos
    var divGlobal = document.createElement("div");
    divGlobal.classList.add("lien");
    divGlobal.appendChild(ligneEnTeteElt);
    divGlobal.appendChild(auteurElt);
     
    return divGlobal;  
     
}
 
// Affichage des infos
var retourInfos = document.getElementById("contenu");
listeLiens.forEach(function(lien){
    var elementLien = nouveauLien(lien);
    contenu.appendChild(elementLien);
});
 
// Activité 2
// TODO  : compléter ce fichier pour ajouter les liens à la page web
// Disparition bouton affichage formulaire
var boutounElt = document.getElementById("bouton");
var formPerso = document.getElementById("form2");
 
formPerso.style.display = "none";
 
boutounElt.addEventListener("click",function (){
    boutounElt.style.display = "none";
    formPerso.style.display = "block";
    });
 
// TEST................................................................
//Création des variables correspondantes au formulaire 
var valid = document.getElementById("validation");
 
valid.addEventListener("click",function(){
    var auteurElt = document.getElementById("nom").value;
    var titreElt = document.getElementById("nomLien").value;
    var urlElt = document.getElementById("url").value;
// test pour voir si le code récupère les valeurs
console.log(auteurElt + " "+ titreElt+" "+ urlElt);
     
});

Il est ou le lien entre ton tableaux et ta function !!!!!

_________

My website: thêu chân mày Ngọc Dung

-
Edité par TranHa 9 avril 2018 à 11:01:03

Bonjour,

J'ai de nouveau besoin de votre aide, j'avance petit à petit, mais là, je bloque encore.

l'exercice, se déroule bien jusqu'à l'ajout du lien, la confirmation est ok, et.... plus rien, comment faire revenir à l'état initial qui demande l'ajout d'un nouveau lien?

Merci d'avance pour vos pistes.

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

function nouveauLien(lien){
//création de l'info "titre"
	var titreElt = document.createElement("a");
	titreElt.href = lien.url;
	titreElt.style.color = "#428bca";
	titreElt.style.textDecoration = "none";
	titreElt.style.margin = "4px";
	titreElt.appendChild(document.createTextNode(lien.titre));
	
// création de l'info "url"
	var urlElt = document.createElement("span");
	urlElt.appendChild(document.createTextNode(lien.url));
	
// concaténation "titre + url"
	var ligneEnTeteElt = document.createElement("h4")
	ligneEnTeteElt.style.margin = "1px";
	ligneEnTeteElt.appendChild(titreElt);
	ligneEnTeteElt.appendChild(urlElt);
	
// création de l'info "auteur"
	var auteurElt = document.createElement("span");
	auteurElt.appendChild(document.createTextNode("Ajouté par "+ lien.auteur));
	auteurElt.style.margin = "4px";
	
// création d'une div rappellant toute les infos
	var divGlobal = document.createElement("div");
	divGlobal.classList.add("lien");
	divGlobal.appendChild(ligneEnTeteElt);
	divGlobal.appendChild(auteurElt);
	
	return divGlobal;	
	
}

// Affichage des infos
var retourInfos = document.getElementById("contenu");
listeLiens.forEach(function(lien){
	var elementLien = nouveauLien(lien);
	contenu.appendChild(elementLien);
});

// Activité 2
// TODO  : compléter ce fichier pour ajouter les liens à la page web
// Disparition bouton affichage formulaire

var boutounElt = document.getElementById("bouton");
var formPerso = document.getElementById("form2");

formPerso.style.display = "none";

boutounElt.addEventListener("click",function (){
	boutounElt.style.display = "none";
	formPerso.style.display = "block";
	});


//Création des variables correspondantes au formulaire	
var valid = document.getElementById("validation");
var formPerso = document.getElementById("form2");

valid.addEventListener("click",function(event){
	var auteurElt = document.getElementById("nom").value;
	var titreElt = document.getElementById("nomLien").value;
	var urlElt = document.getElementById("url").value;
	event.preventDefault();

	 var listeUser = [];	
	listeUser.auteur = auteurElt;
	listeUser.titre = titreElt;
	//controle présence http://
	if(urlElt.indexOf("http://")===0||urlElt.indexOf("https://")===0)
		listeUser.url = urlElt;
	else
		listeUser.url = "http://" + urlElt;	
	var lienFinal = nouveauLien(listeUser);	
	
	//mise du lien en 1ere position
	contenu.insertBefore(lienFinal,contenu.childNodes[0]);
	formPerso.innerHTML = "";
	formPerso.appendChild(boutounElt);
	
	//Confirmation d'ajout du lien
	var confirm = document.createElement("h4");
	confirm.style.color = "#0A2E31";
	confirm.style.padding = "12px";
	confirm.style.backgroundColor = "#3FDDE9";
	confirm.style.marginBottom = "8px";
	confirm.textContent = "Votre lien " + listeUser.titre + " est ajouté à la liste";
	document.body.insertBefore(confirm, formPerso);
	setTimeout(function(){
		document.body.removeChild(confirm);
	},3000);
	
	//Remise à zéro du formulaire
	
	formPerso.innerHTML = "";
	
});

Bonjour !

Je crois que l'accès à https://oc-jswebsrv.herokuapp.com/ a été modifié et que la ligne suivante a été retirée du serveur

header("Access-Control-Allow-Origin: *");

En effet, dans tout les exercices où il faut récupérer des données ou en écrire sur ce serveur via l'API (ici sur les temoignages), je reçois l'erreur suivante :

Failed to load https://oc-jswebsrv.herokuapp.com/api/temoignage: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Est-ce une erreur de code ? Je ne pense pas car même si je prend les codes des solutions, ça me donne la même erreur !

De même, pour le chapitre 3 de la partie 3 "Interagissez avec des serveurs web", les articles du blog ont été "détruits" (voir : https://oc-jswebsrv.herokuapp.com/api/articles ).

Quelqu'un y arrive quand même ou c'est juste chez moi ?

Merci !

Bonjour Holino,

j'ai réutilisé mon code que j'avais fais lors de l'exercice final et tout fonctionne très bien, j'ai vérifié sur le site https://oc-jswebsrv.herokuapp.com/liens et j'ai bien mon lien d'ajouté.

Clément

Bonjour Clément !

Ah bon !

Du coup par acquis de conscience je viens de tester sur Firefox (plutôt que Chrome) et ça fonctionne, en effet. Aucun idée d'où peut provenir ce problème par contre, persistant sur Chrome…

Merci beaucoup !

Cela doit venir de ton Chrome car moi je l'ai fait avec chrome justement  

Vérifies qu'il est à jour, si ce n'est pas le cas met le à jour et si ça ne fonctionne toujours pas efface le cache.

-
Edité par Clément_ 22 mars 2018 à 15:10:39

Problème résolu

-
Edité par CharlyBihel 6 avril 2018 à 10:33:10

Holino a écrit:

Bonjour Clément !

Ah bon !

Du coup par acquis de conscience je viens de tester sur Firefox (plutôt que Chrome) et ça fonctionne, en effet. Aucun idée d'où peut provenir ce problème par contre, persistant sur Chrome…

Merci beaucoup !

Exactement pareil, mon Chrome est à jour, le cache vidé mais le problème persiste... (ça marche avec Firefox)

L'erreur vient de liensweb.html à la ligne 1. Voici mon code source html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 3</title>
</head>

<body>
    <h1>Activité 3</h1>

    <p>
        <button id="ajoutLien">Ajouter un lien</button>
    </p>
    
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>
    
    <script src="../js/ajax.js"></script>
    <script src="../js/liensweb.js"></script>
</body>

</html>

Edit: If you're trying to do a cross-domain XMLHttpRequest via CORS...

1. Make sure you're testing viahttp://. Scripts running viafile://have limited support for CORS.
2. Make sure the browseractually supports CORS. (Opera and Internet Explorer are late to the party)

J'ai testé avec Chrome en mettant les fichiers de l'activité 3 sur mon serveur web (chez free) et ça marche. En gros si l'adresse du fichier liensweb.html commence par http:// ça  marche, si liensweb.html est sur l'ordi (son adresse sera file://) et ça ne marchera pas (avec Chrome en tous cas).

-
Edité par Darakiss 29 mars 2018 à 23:19:49