J'ai rien compris à ton message, je te propose de mettre un lien vers la page du cours, et de mettre le code (dans la balise </> au-dessus du message) qui correspond à ton problème ("en dehors de la div contenu", "afficher les liens") là tu n'as mis que le code de createElement sans le contexte du code. Pour centrer le message verticalement, c'est du CSS, regarde "center text vertically css" sur Google).
Bonjour, je voudrais recuperer des donnees ajax et les mettre dans les cases d'un calendrier,,, C'est pour un projet que je dois remettre aujourd'hui et c'est vraiment pas complet.....
les cases des jours du mois qui est affiche sont crees dynamiquement par une boucle do...while... Avant d'entrer dans la boucle je recupere les donnees ajax
que je stocke dans une variable ( myPref qui est un tableau[ ]).... Lorsque j'entre dans la boucle qui genere les cases des jours je veux que se cree un element div, si les dates stockees dans le tableau myPref correspondent a la date dans la case.
Mon probleme est que quand j'appelle la variable myPref elle apparait autant de fois qu'il ya de jours dans le mois....(A cause de la boucle do...while). Donc la comparaison n'est pas possible..
Si quelqu'un peut m'aider ou me conseiller une autre facon de faire cela me sauvera ... Je suis dessus depuis plus d'une semaine
Voici mon code
// here my ajax request start
var pref = {};
pref.get = function (url, data, succes, error){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.onreadystatechange = function(event){
//console.log(xhr.readyState)
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <= 300){
/* console.log('Good...')
console.log(JSON.parse(xhr.responseText))
console.log(xhr.getAllResponseHeaders())*/
succes(xhr.responseText);
}
else{
//console.log("Bad Request !!!")
error(xhr.status,xhr.statusText, xhr);
}
}
};
xhr.send();
};
pref.get('/preferences', null,succes, error);
//console.log(pref.get)
console.log(pref.get)
var myPref = []
function succes (data){
var d = JSON.parse(data);
for(var i=0;i<d.length;i++){
var out = d[i].date
myPref.push(out);
}
}
function error(err){
console.log(err)
}
//start to create the table
var html = '<table id="tek" class="ui celled table">';
// Write selected month and year
html += '<thead><tr>';
html += '<th colspan="7">' +"Calendrier" + '</th>';
html += '</tr></thead>';
// Write the header of the days of the week
html += '<tr >';
for(var i=0; i < this.JourSem.length;i++) {
html += '<td class="ndays">' + this.JourSem[i] + '</td>';
}
html += '</tr>';
// Write the days
var i=1;
do {
var dow = new Date(y, m, i).getDay();
// If sunday, satrt the row
if ( dow ==0) {
html += '<tr>' ;
}
// if not sunday, write fisrt of the month
// write also the days of the previous month
else if ( i == 1 ) {
html =html+ '<tr class="vak">';
var k = derJourDerMois - premJourMois+1;
for(var j=0; j < premJourMois; j++) {
html += '<td class="yow"><p>'+ '</p></td>';
k++;
}
}
// Write the current day in the loop
var chk = new Date();
var chkY = chk.getFullYear();
var chkM = chk.getMonth();
if (chkY == this.anneeActuel && chkM == this.moisActuel && i == this.auj) {
html += '<td class="today" ><p>' + i +'</p></td>';console.log(chkM);
}
else {
html += '<td id="td" class="jour_normal" >'
html += '<div class="blokp">' + i+' '+ this.Mois[m]+' '+this.anneeActuel + '</div>';
html += '<div class="events"><ul >'
var dato = this.anneeActuel+'-'+0+(this.moisActuel+1)+'-'+i;
myPref.forEach(function(el){
if(el==dato){
html+='<li class="pref"></li></ul></div></td>';
}
})
}
// if Saturday, close the row
if ( dow == 6 ) {
html += '</tr>';
}
// If not Saturday, but last day of the selected month
// it will write the next few days from the next month
else if ( i == derJourMois ) {
var k=1;
for(dow; dow < 6; dow++) {
html += '<td class="not-current"><p>' + '<p></td>';
k++;
}
}
i++;
}
while(i <= derJourMois);
// Close table
html += '</table>';
// Write HTML to the div
document.getElementById(this.divId).innerHTML = html;
};
j'ai des soucis avec le serveur. Je suis au premier exemple. Une erreur à Req.send(null).
Je ne comprends pas. quelqu'un aurait-il une idée?
var req = new XMLHttpRequest();
// Requête HTTP GET synchrone vers le fichier langages.txt publié localement
req.open("GET", "http://localhost/javascript-web-srv/data/langages.txt", false);
// Envoi de la requête
req.send(null);
// Affiche la réponse reçue pour la requête
console.log(req.responseText);
Bonjour, je voudrais recuperer des donnees ajax et les mettre dans les cases d'un calendrier,,, C'est pour un projet que je dois remettre aujourd'hui et c'est vraiment pas complet.....
Salutations, en espérant pouvoir aider, d'après ce que j'ai compris de ton code :
Il semble requis par le code que toutes les dates du mois ( à l'exception de celle correspondant à i=this.auj ) soient des "td" ayant pour classe "jour_normal" et possédant une div "blokp" et une div "events". (ligne 83)
La seule "erreur" pour moi (si le formatage de la date "dato" est correcte) est que les balises de fermetures ne sont présentes qu'à la condition que la date "i" matche un et un seul élément du tableau "myPref" (ligne 90).
Donc soit on est certain que toutes les dates du mois matchent un et un seul élément de myPref (et on ne veut pas l'afficher si c'est la date "this.auj") et le code me parait valide, soit ce n'est pas le cas et il faudrait ne créer les éléments HTML correspondant qu'à la condition d'un match (à l'intérieur du "forEach").
Pas sur d'avoir bien compris le problème néanmoins.
NB C'est sans doute voulu (éléments manquants par soucis de simplification ?) mais les variables "k" lignes 70 et 101 semblent inutiles, ainsi que les concaténations dans les boucles attenantes)
Bonjour, personnellement je ne vois que 2 problèmes possibles :
est ce que "http://localhost/javascript-web-srv/data/langages.txt" est effectivement accessible (rentrée dans la barre d'adresse) ?
et/ou est ce qu'il n'y a aucun problème de sécurité (control access origin bien configuré dans le httpd.conf, décris dans le cours)
NB si des modifications sont faites après la tentative d'affichage de la page, il est utile de forcer la mise à jours du cache navigateur (ctrl+f5 sur firefox, ou le désactiver quand la console est affichée ce qui est toujours une bonne chose à mon avis) et bien sur du serveur (redémarrer)
Je rencontre un problème sur la partie "Envoyez des données à un serveur web".
Après avoir configuré le fichier httpd.conf, redémarré mon serveur apache et édité chaque fichiers comme convenu dans le cours, le fichier post_form.log ne se crée pas. même après l'avoir crée à la main rien ne s'affiche dans se fichier.
Est-ce que quelqu'un à déjà rencontré ce problème et saurait m'expliquer pourquoi cela ne fonctionne pas?
Bonsoir souci avec l'exercice ajout d'un article. J'ai testé avec l'extension RESTClient. Les liens avec la méthode get fonctionne et pas avec la méthode post. J'ai testé plusieurs liens donnés dans le cours et j'ai toujours une erreur.
Je vous donne mon code et le test avec RESTClient. En parcourant le forum apparemment plusieurs soucis avec les liens et le serveur, si un esprit brillant pouvait me donner un début de piste. J'ai testé avec RESTClient le lien méthode get fonctionne mais erreur avec le lien donné pour la méthode post. Pour finir le module ça va être chaud.
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault();
var article = new FormData(form);
ajaxPost("http://oc-jswebsrv.herokuapp.com/article", article, function (reponse) {
var messageElt = document.createElement("p");
messageElt.textContent = "L'article a bien été ajouté.";
document.getElementById("resultat").appendChild(messageElt);
});
});
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
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);
}
// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
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);
}
Bonsoir souci avec l'exercice ajout d'un article. J'ai testé avec l'extension RESTClient. Les liens avec la méthode get fonctionne et pas avec la méthode post. J'ai testé plusieurs liens donnés dans le cours et j'ai toujours une erreur.
Je vous donne mon code et le test avec RESTClient. En parcourant le forum apparemment plusieurs soucis avec les liens et le serveur, si un esprit brillant pouvait me donner un début de piste. J'ai testé avec RESTClient le lien méthode get fonctionne mais erreur avec le lien donné pour la méthode post. Pour finir le module ça va être chaud.
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault();
var article = new FormData(form);
ajaxPost("http://oc-jswebsrv.herokuapp.com/articles", articles, function (reponse) {
var messageElt = document.createElement("p");
messageElt.textContent = "L'article a bien été ajouté.";
document.getElementById("resultat").appendChild(messageElt);
});
});
Respectez les noms de variables et l'url de l'api, j'ai ôté les 's':
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault();
var article = new FormData(form);
ajaxPost("http://oc-jswebsrv.herokuapp.com/article", article, function (reponse) {//Pas de 's' ni dans l'url, ni dans la donnée envoyée, vous avez nommé la variable article sans 's' !
var messageElt = document.createElement("p");
messageElt.textContent = "L'article a bien été ajouté.";
document.getElementById("resultat").appendChild(messageElt);
});
});
Je pensais avoir fait l'erreur du débutant donc j'ai remplacé "articles" par "article"
J'ai testé les 2. voilà le résultat en méthode post. Si c'est un souci de serveur que faut il faire?
LA syntaxe de la requête est erronée, exécutez votre fichier .html et saisissez les paramètres requis (par exemple le titre de l'article) ! Il faut une donnée à poster tout de même !
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault();
var article = new FormData(form);
ajaxPost("http://oc-jswebsrv.herokuapp.com/article", article, function (reponse) {
var messageElt = document.createElement("p");
messageElt.textContent = "L'article a bien été ajouté.";
document.getElementById("resultat").appendChild(messageElt);
});
});
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
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);
}
// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
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);
}
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
e.preventDefault();
var article = new FormData(form);
ajaxPost("http://oc-jswebsrv.herokuapp.com/article", article, function (reponse) {
var messageElt = document.createElement("p");
messageElt.textContent = "L'article a bien été ajouté.";
document.getElementById("resultat").appendChild(messageElt);
});
});
// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
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);
}
// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
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);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajout d'un article</title>
</head>
<body>
<h3>Ajout d'un article</h3>
<form>
<p>
<label for="nom">Votre nom</label> :
<input type="text" name="nom" id="nom" required> <!-- Il faut un champ dont le name est "titre" et NON "nom"-->
</p>
<p>
<label for="contenu">Contenu</label></br>
<TEXTAREA ROWS ="4" COLS="30"> </TEXTAREA> <!-- De même il faut un champ "contenu", ajouté l'attribut name (obligatoire) et id-->
</p>
<input type="submit" value="ajouter">
<div id="resultat"></div>
</form>
<script src="../js/ajax.js"></script>
<script src="../js/article.js"></script>
</body>
</html>
C'est normal, il faut fournir des champs dont les name sont : "titre" et "contenu" un titre et un contenu ! Donc l'api exige que vous nommez vos champs ainsi (Code html rectifié) :
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://oc-jswebsrv.herokuapp.com/article. Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « (null) ».
du coup rien ne marche.. je n'arrive pas à afficher les articles que je veux, je n'arrive pas à corriger... je ne sais pas si c'est une question de Cross Origin ou l'URL qui ne fonctionne plus
Je ne suis pas développeur (webdesigner) et je souhaite apprendre javascript (Le premier cours est réussi). Toutefois, je commence à avoir du mal à digérer les nombreuses manières de modifier le dom + les différents événements. Je commence à n'y voir plus très clair, à confondre.
Comment faire pour bien retenir ces différentes manières de coder? Parfois j'ai l'impression que je dois utiliser une boucle alors que pas du tout (exemple: l'exercice compteurClics de la section "réagissez à des événements")
Tu peux créer un bloc qui englobe toutes les infos.
// Tu créé ton bloc englobant
var divBlocElt = document.createElement("div");
//Tu supprimes tout tes fonds blanc et tu l'appliques seulement au div
divBlocElt.style.backgroungColor = "#ffffff";
//Tu lui intègre chaque élément
divBlocElt.appendChild(titreElt); // titre + lien
divBlocElt.appendChild(paragrapheElt);
//Et tu intègre seulement le bloc complet à la page html
document.getElementById("contenu").appendChild(divBlocElt);
J'ai écrit le code en live donc j'ai peut-être fait une faute de frappe mais voila l'idée.
J'en profite pour poser ma question concernant la boucle for et la fonction forEach().
Pour la fonction forEach() j'obtiens ce que je veux :
var questions = [
{
enonce: "Combien font 2+2 ?",
reponse: "2+2 = 4"
},
{
enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
reponse: "1492"
},
{
enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
reponse: "La lettre N"
}
];
var numeroQuestion = 1;
questions.forEach( function (question) {
var blocElt = document.createElement("p");
var questionElt = document.createElement("strong");
questionElt.textContent = "Question " + numeroQuestion + " : ";
questionElt.style.fontSize = "1.2em";
numeroQuestion++;
var enonceElt = document.createElement("span");
enonceElt.textContent = question.enonce;
enonceElt.style.fontStyle = "italic";
var brElt = document.createElement("br");
var blocReponseElt = document.createElement("span");
var boutonElt = document.createElement("button");
boutonElt.textContent = "Afficher la réponse";
boutonElt.addEventListener("click", function(e){
blocReponseElt.textContent = question.reponse;
});
blocReponseElt.appendChild(boutonElt);
blocElt.appendChild(questionElt);
blocElt.appendChild(enonceElt);
blocElt.appendChild(brElt);
blocElt.appendChild(blocReponseElt);
document.getElementById("contenu").appendChild(blocElt);
});
Par contre j'ai essayé de retranscrire dans une boucle for mais ça ne fonctionne pas :
var questions = [
{
enonce: "Combien font 2+2 ?",
reponse: "2+2 = 4"
},
{
enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
reponse: "1492"
},
{
enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
reponse: "La lettre N"
}
];
for (i = 0 ; i < questions.length ; i++) {
var blocElt = document.createElement("p");
var questionElt = document.createElement("strong");
questionElt.textContent = "Question " + (i+1) + " : ";
questionElt.style.fontSize = "1.2em";
var enonceElt = document.createElement("span");
enonceElt.textContent = questions[i].enonce;
enonceElt.style.fontStyle = "italic";
var brElt = document.createElement("br");
var blocReponseElt = document.createElement("span");
var boutonElt = document.createElement("button");
boutonElt.textContent = "Afficher la réponse";
boutonElt.addEventListener("click", function (e) {
blocReponseElt.textContent = questions[i].reponse;
});
blocReponseElt.appendChild(boutonElt);
blocElt.appendChild(questionElt); // On inclus le titre "question x"
blocElt.appendChild(enonceElt); // on inclus l'énoncé
blocElt.appendChild(brElt); // le saut de ligne
blocElt.appendChild(blocReponseElt);
document.getElementById("contenu").appendChild(blocElt);
};
J'ai un message : TypeError: questions[i] is undefined (au niveau de eventListener)
J'ai remplacé par du texte brut (cad = "test"; ). Je n'ai plus le message d'erreur mais peu importe sur lequel des 3 boutons j'appuie, ça modifie à chaque fois le 3ème bloc et pas les 2 autres.
Quelle serait la solution pour utiliser une boucle FOR, svp?
J'ai un message : TypeError: questions[i] is undefined (au niveau de eventListener)
J'ai remplacé par du texte brut (cad = "test"; ). Je n'ai plus le message d'erreur mais peu importe sur lequel des 3 boutons j'appuie, ça modifie à chaque fois le 3ème bloc et pas les 2 autres.
Quelle serait la solution pour utiliser une boucle FOR, svp?
En fait, quand tu cliques sur un bouton, tu ne peux pas récupérer le contenu de la réponse parce que ta variable i n'existe plus !
Il faut que tu crée le contexte pour capturer la valeur de i et aussi le bouton parce qu'à chaque passage dans la boucle for, tu écrases le bouton. C'est pour ça qu'en mettant du texte brut, ça modifie toujours le 3ème qui a été le dernier à être déclarer.
Un exemple, essaie de remplacer les lignes 36 à 38 par ça :
J'ai testé ton code et en effet c'est mieux. Enfin ça remplace le texte à l'intérieur du bouton au lieu de remplacer le bouton par du texte.
Mais je comprends le principe.
n1col4s a écrit:
[...] parce qu'à chaque passage dans la boucle for, tu écrases le bouton. C'est pour ça qu'en mettant du texte brut, ça modifie toujours le 3ème qui a été le dernier à être déclarer.
Et avec la fonction forEach() ce n'est pas le cas? A chaque passage dans forEach(), question.reponse change de valeur, non ?
× 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.
Ciscoo91