Bonjour à tous,
Je vous sollicite car je souhaite tout simplement résoudre un bug sur le déroulement de mes actions de mon formulaire. Je souhaite quand l'utilisateur clique sur Ajouter :
- Ajout d'un nom
- Entrer le titre du lien
- Entrez URL du lien
Pour ces trois champs si pas rempli message d'erreur = veuillez compléter champ
Pour Entrez URL lien j'ai borner la variable en ajoutant http:// ou https
/ si pas rempli
Une fois que l'utilisateur a rentrer toutes les informations un message de 2 sec = Le lien "x" a était ajouté et doit s'afficher en haut de ma liste existante...
Bref mon bug se déroule à la dernière étape je recherche partout et je ne trouve pas c'est un truc bête mais je l'ai fait y a longtemps et du coup j'ai besoin d'un petit coup de pouce...
Comment du coup ajouter mon lien enregistré en haut de la liste existante ?
En vous remerciant pour votre lecture et votre aide.
Excellente journée !
Modifié par axel-bs (31 Jan 2019 - 11:40)
Je vous sollicite car je souhaite tout simplement résoudre un bug sur le déroulement de mes actions de mon formulaire. Je souhaite quand l'utilisateur clique sur Ajouter :
- Ajout d'un nom
- Entrer le titre du lien
- Entrez URL du lien
Pour ces trois champs si pas rempli message d'erreur = veuillez compléter champ
Pour Entrez URL lien j'ai borner la variable en ajoutant http:// ou https
/ si pas rempli Une fois que l'utilisateur a rentrer toutes les informations un message de 2 sec = Le lien "x" a était ajouté et doit s'afficher en haut de ma liste existante...
Bref mon bug se déroule à la dernière étape je recherche partout et je ne trouve pas c'est un truc bête mais je l'ai fait y a longtemps et du coup j'ai besoin d'un petit coup de pouce...
Comment du coup ajouter mon lien enregistré en haut de la liste existante ?
En vous remerciant pour votre lecture et votre aide.
Excellente journée !
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/liensweb.css">
<title>Activité 1</title>
</head>
<body>
<h1>Activité 2</h1>
<p>
<button id="ajoutLien">Ajouter un lien</button>
</p>
<div id="contenu"></div>
<script src="../js/ajax.js"></script>
<script src="../js/liensweb.js"></script>
</body>
</html>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eee;
margin-left: 30px;
margin-right: 30px;
}
span {
font-weight: normal;
font-size: 80%;
}
.lien {
background: white;
padding: 10px;
margin-bottom: 10px;
}
/*
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"
}
];
// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
var titreElt = document.createElement("a");
titreElt.href = lien.url;
titreElt.style.color = "#428bca";
titreElt.style.textDecoration = "none";
titreElt.style.marginRight = "5px";
titreElt.appendChild(document.createTextNode(lien.titre));
var urlElt = document.createElement("span");
urlElt.appendChild(document.createTextNode(lien.url));
// Cette ligne contient le titre et l'URL du lien
var ligneTitreElt = document.createElement("h4");
ligneTitreElt.style.margin = "0px";
ligneTitreElt.appendChild(titreElt);
ligneTitreElt.appendChild(urlElt);
// Cette ligne contient l'auteur
var ligneDetailsElt = document.createElement("span");
ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
var divLienElt = document.createElement("div");
divLienElt.classList.add("lien");
divLienElt.appendChild(ligneTitreElt);
divLienElt.appendChild(ligneDetailsElt);
return divLienElt;
}
ajaxGet(" https://oc-jswebsrv.herokuapp.com/api/liens", function (lien) {
var contenuElt = 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 lienElt = creerElementLien(lien);
contenuElt.appendChild(lienElt);
});
});
// Créer un élément DOM de type input
function creerElementInput(placeholder, taille) {
var inputElt = document.createElement("input");
inputElt.type = "text";
inputElt.setAttribute("placeholder", placeholder);
inputElt.setAttribute("size", taille);
inputElt.setAttribute("required", "true");
return inputElt;
}
var ajouterLienElt = document.getElementById("ajoutLien");
// Gère l'ajout d'un nouveau lien
ajouterLienElt.addEventListener("click", function () {
var auteurElt = creerElementInput("Entrez votre nom", 20);
var titreElt = creerElementInput("Entrez le titre du lien", 40);
var urlElt = creerElementInput("Entrez l'URL du lien", 40);
var ajoutElt = document.createElement("input");
ajoutElt.type = "Submit";
ajoutElt.value = "Ajouter";
var formAjoutElt = document.createElement("form");
formAjoutElt.appendChild(auteurElt);
formAjoutElt.appendChild(titreElt);
formAjoutElt.appendChild(urlElt);
formAjoutElt.appendChild(ajoutElt);
var p = document.querySelector("p");
// Remplace le bouton d'ajout par le formulaire d'ajout
p.replaceChild(formAjoutElt, ajouterLienElt);
//ajoute le nouveau lien
formAjoutElt.addEventListener("submit", function (e) {
e.preventDefault();
var url = urlElt.value;
// Si l'URL ne commence ni par "http://" ni par "https://"
if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) {
// On la préfixe par "http://"
url = "http://" + url;
}
// Création de l'objet contenant les données du nouveau lien
var lien = {
titre: titreElt.value,
url: url,
auteur: auteurElt.value
};
var lienElt = creerElementLien(lien);
// Ajoute le nouveau lien en haut de la liste
//contenuElt.insertBefore(lienElt, contenuElt.firstChild);
// Création du message d'information
var infoElt = document.createElement("div");
infoElt.classList.add("info");
infoElt.textContent = "Le lien \"" + lien.titre + "\" a bien été ajouté.";
p.insertBefore(infoElt, formAjoutElt);
// Suppresion du message après 2 secondes
setTimeout(function () {
p.removeChild(infoElt);
}, 2000);
// Remplace le formulaire d'ajout par le bouton d'ajout
p.replaceChild(ajouterLienElt, formAjoutElt);
});
});
function ajaxGet(url, callback) {
var req = new XMLHttpRequest();
req.open("GET", url);
req.addEventListener("load", function () {
if (req.status >= 200 && req.status < 400) {
// Appelle la fonction callback en lui passant la réponse de la requête
callback(req.responseText);
} else {
console.error(req.status + " " + req.statusText + " " + url);
}
});
req.addEventListener("error", function () {
console.error("Erreur réseau avec l'URL " + url);
});
req.send(null);
}
function ajaxPost(url, data, callback, isJson) {
var req = new XMLHttpRequest();
req.open("POST", url);
req.addEventListener("load", function () {
if (req.status >= 200 && req.status < 400) {
// Appelle la fonction callback en lui passant la réponse de la requête
callback(req.responseText);
} else {
console.error(req.status + " " + req.statusText + " " + url);
}
});
req.addEventListener("error", function () {
console.error("Erreur réseau avec l'URL " + url);
});
if (isJson) {
// Définit le contenu de la requête comme étant du JSON
req.setRequestHeader("Content-Type", "application/json");
// Transforme la donnée du format JSON vers le format texte avant l'envoi
data = JSON.stringify(data);
}
req.send(data);
}
Modifié par axel-bs (31 Jan 2019 - 11:40)