Ceragan
-
Modifié le 12 avril 2023 à 19:25
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 2023
-
2 mai 2023 à 06:06
Bonjour,
J'ai un problème avec un code tout bête, le problème doit être certainement un conflit quelque part. Dans la console je n'ai pas d'erreur (en rouge). ça fait 2 semaines que je bloque dessus, même chatGPT ne trouve pas, AU SECOURS
l'input maintenanceID est censé être en hidden mais je l'ai mis en text pour voir s'il récupère une valeur..rien
Quand je clique sur le bouton valider du formulaire, la page infos-maintenance.php possède juste une ligne vardump($_POST), là aussi toujours pas de valeur dans l'input maintenance-id
Pareil dans cet input qui était à la base en display: none; j'ai enlevé le none pour le laisser apparaître j'ai bien les bonnes valeurs dans, qui correspond à ma base de donnée mais je n'arrive pas à récupérer cette valeur et la placer dans l'input name maintenance-id.
Merci à toutes et tous qui prendrons du temps à me lire et/ou à m'aider.
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 12 avril 2023 à 19:34
bonjour
cette partie
var icons = document.querySelectorAll('.material-symbols-outlined');
for (var i = 0; i < icons.length; i++) {
icons[i].onclick = function() {
var id = document.querySelector('input[name="idintervention"]').value;
var hiddenInput = document.querySelector('input[name="maintenanceId"]');
hiddenInput.value = id;
};
}
elle doit normalement etre mise l’intérieur de
$(document).ready
});
parce que comme c'est présenté tu appel un élément de la page qui n'a pas encore été charge la console doit dalleur mettre une erreur dans ce sens
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 20231 Modifié le 15 avril 2023 à 05:54
Salut @ Karamel, euréka j 'ai maintenant une valeur mais, ouep il y a un mais^^ la valeur reste bloquée à 1 peu importe l'icon cliqué.
Normalement quand je clique sur l'icon de la ligne dont l'input "idmaintenance" possède la valeur 2 (qui vient de ma base de donnée), le click devrait transférer le 2 de idmaintenance à l'input maintenance-id (normalement caché) pour pouvoir l'envoyer avec le formulaire au php.
Mais cette valeur reste toujours bloquée à 1 et je ne vois pas ce qui cloche.
Aurais-tu une idée?
En tout cas merci pour ton temps
PS: j'ai décidé de suivre en parallèle la formation javascript de Pierre Giraud car je ne comprend pas tout ce que je fais avec le javascript. Je connais html/css, php/sql mais pas encore le javascript. En tout cas si tu trouves je veux bien la soluce :p
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153
>
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 2023 16 avril 2023 à 20:12
et en faisant de cette maniere sa donne quoi
for (var i = 0; i < icons.length; i++) {
icons[i].onclick = function(evt) {
var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
var hiddenInput = document.querySelector('input[name="maintenanceId"]');
hiddenInput.value = id;
};
}
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 20231
>
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024 Modifié le 17 avril 2023 à 22:11
Toujours pareil :'( maintenanceId reste égal à 1.
Je te donne également tout le javascript que j'ai dans mon fichier, peut être il y a conflit.
window.onload = function() {
if (location.search.includes('from_update')) {
let alertBox = document.getElementById('alertBox');
let alertContent = document.createElement('div');
alertContent.innerHTML = '<span>Valeurs enregistrées!</span>';
alertContent.classList.add('custom-alertBox');
alertBox.appendChild(alertContent);
alertBox.style.visibility = 'visible';
setTimeout(function() {
alertBox.removeChild(alertContent);
alertBox.style.display = 'none';
}, 2000);
}
}
//conteu onglets animés
function openTab(evt, tabName) {
// Déclaration des variables
var i, tabcontent, tablinks;
// Cacher tous les contenus d'onglet
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
// Désactiver tous les boutons d'onglet
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// Afficher le contenu de l'onglet sélectionné
document.getElementById(tabName).classList.add("active");
// Activer le bouton d'onglet sélectionné
evt.currentTarget.classList.add("active");
}
function ajouterligne() {
var form = document.querySelector('.grille-t-body');
var nouveauBloc = document.createElement('div');
nouveauBloc.innerHTML = `
<br><br><br>
<h3 class="h3-ajout-ligne-maintenance">Nouvelle Entrée :</h3>
<form method="post" action="maintenance.php" style="display:block;">
<input type="hidden" name="idintervention" class="td-historique-maintenance" >
<input placeholder="Type d'intervention" type="text" name="typeintervention" class="td-historique-maintenance" required>
<input placeholder="Date de l'intervention" type="date" name="dateintervention" class="td-historique-maintenance"required>
<input placeholder="Compteur" type="number" name="compteurintervention" class="td-historique-maintenance"required>
<input placeholder="Intervenant" type="text" name="intervenant" class="td-historique-maintenance" required>
<input placeholder="Description" type="text" name="recap" class="td-historique-maintenance" required>
<button id="bouton-valider-historique-cache" type="submit" style="display: none;" >VALIDER</button>
</form>
`;
form.appendChild(nouveauBloc);
}
function boutonEnregistrer(){
// récupération des boutons
const bouton1 = document.querySelector("#bouton-enregistrer-historique");
const bouton2 = document.querySelector("#bouton-valider-historique-cache");
// ajout d'un écouteur d'événements pour le clic sur le bouton1
bouton1.addEventListener("click", function() {
// simuler le clic sur le bouton2
setTimeout(() => {
bouton2.click();
},0);
});
}
//Onglets animés
const onglets = document.querySelectorAll('.onglets');
const contenu = document.querySelectorAll('.contenu');
let index = 0;
onglets.forEach(onglet => {
onglet.addEventListener('click', () => {
if(onglet.classList.contains('active')){
return;
}else{
onglet.classList.add('active');
}
index = onglet.getAttribute('data-anim');
console.log(index);
for (k = 0; k < onglets.length; k++){
if (onglets[k].getAttribute('data-anim') != index){
onglets[k].classList.remove('active');
}
}
for(j = 0; j < contenu.length; j++){
if(contenu[j].getAttribute('data-anim') == index){
contenu[j].classList.add('activeContenu');
}else{
contenu[j].classList.remove('activeContenu');
}
}
})
})
for (var i = 0; i < icons.length; i++) {
icons[i].onclick = function(evt) {
var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
var hiddenInput = document.querySelector('input[name="maintenanceId"]');
hiddenInput.value = id;
};
}
// Obtenez une référence à l'élément HTML que vous souhaitez écouter pour les clics
const infoButton = $('.material-symbols-outlined');
const repairGrid = $('.div-checkbox');
infoButton.on('click', function() {
repairGrid.css('display', 'block');
});
});
// ajouter un gestionnaire d'événements clic à chaque image
var images = document.querySelectorAll('.imglistmat');
for (var i = 0; i < images.length; i++) {
images[i].onclick = function() {
var id = this.getAttribute('data-id');
var hiddenInput = document.querySelector('input[name="mat_id"]');
hiddenInput.value = id;
var buttonCaché2 = document.getElementById('button-caché2');
buttonCaché2.click();
};
}
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153
>
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 2023 18 avril 2023 à 23:09
c'est plus exactement le même code
cette partie est toujours hors d'une fonction
for (var i = 0; i < icons.length; i++) {
icons[i].onclick = function(evt) {
var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
var hiddenInput = document.querySelector('input[name="maintenanceId"]');
hiddenInput.value = id;
};
}
ce qui veut dire quelle est exécuter avant le chargement complet de la page et du coup elle ne peut recéper une reference aux elements auquelle elle fait reference vu qu'a ce moment ils n'existent pas encore. et aussi "document.querySelector" utilisé tel quel appellera le premier élément de la page correspondant et il sera toujours le meme je me suis posé la question a savoir si c'est ca le probleme
Ceragan
Messages postés3Date d'inscriptionsamedi 15 avril 2023StatutMembreDernière intervention 2 mai 20231
>
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024 2 mai 2023 à 06:06
ça y est j'ai trouvé la solution
En cours de formation javascript je me suis dis : ok go essayer, je comprends mieux ce que je fais.
1. Pour une raison que j'ignore encore le code javascript dans un fichier séparé ne fonctionnait tout simplement pas.
J'ai donc replacé les blocs de code JS avant les blocs de code HTML correspondant
2. Je me suis aidé de chatGPT pour ce fameux dernier code qui m'embêtait, celui pour lequel j'ai publié mon premier message. Et du coup voici ce qu'il en est sorti en lui demandant de simplement corriger ma logique d'écriture, c'est à dire récupération avec get, boucle et insertion :
window.addEventListener('load', function() {
var valorinputmaintenanceId = document.getElementById('maintenanceId');
var icons = document.querySelectorAll('[id^="maintenance-info-"]');
icons.forEach(function(icon) {
icon.addEventListener('click', function() {
valorinputmaintenanceId.value = icon.id.slice(17); // récupère la sous-chaîne après "maintenance-info-"
});
});
});
Il m'a placé un load en première ligne que je ne connaissais pas car en vérifiant dans la console, tout était bon sauf le transfert à maintenanceId. Apparemment les codes javascript se chargeraient plus vite que la page HTML, si j'ai bien compris.
En tout cas tout fonctionne, merci pour ton temps et vive Pierre Giraud :p
Modifié le 15 avril 2023 à 05:54
Salut @ Karamel, euréka j 'ai maintenant une valeur mais, ouep il y a un mais^^ la valeur reste bloquée à 1 peu importe l'icon cliqué.
Normalement quand je clique sur l'icon de la ligne dont l'input "idmaintenance" possède la valeur 2 (qui vient de ma base de donnée), le click devrait transférer le 2 de idmaintenance à l'input maintenance-id (normalement caché) pour pouvoir l'envoyer avec le formulaire au php.
Mais cette valeur reste toujours bloquée à 1 et je ne vois pas ce qui cloche.
Aurais-tu une idée?
En tout cas merci pour ton temps
PS: j'ai décidé de suivre en parallèle la formation javascript de Pierre Giraud car je ne comprend pas tout ce que je fais avec le javascript. Je connais html/css, php/sql mais pas encore le javascript. En tout cas si tu trouves je veux bien la soluce :p
16 avril 2023 à 20:12
et en faisant de cette maniere sa donne quoi
for (var i = 0; i < icons.length; i++) { icons[i].onclick = function(evt) { var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value; var hiddenInput = document.querySelector('input[name="maintenanceId"]'); hiddenInput.value = id; }; }Modifié le 17 avril 2023 à 22:11
Toujours pareil :'( maintenanceId reste égal à 1.
Je te donne également tout le javascript que j'ai dans mon fichier, peut être il y a conflit.
window.onload = function() { if (location.search.includes('from_update')) { let alertBox = document.getElementById('alertBox'); let alertContent = document.createElement('div'); alertContent.innerHTML = '<span>Valeurs enregistrées!</span>'; alertContent.classList.add('custom-alertBox'); alertBox.appendChild(alertContent); alertBox.style.visibility = 'visible'; setTimeout(function() { alertBox.removeChild(alertContent); alertBox.style.display = 'none'; }, 2000); } } //conteu onglets animés function openTab(evt, tabName) { // Déclaration des variables var i, tabcontent, tablinks; // Cacher tous les contenus d'onglet tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("active"); } // Désactiver tous les boutons d'onglet tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } // Afficher le contenu de l'onglet sélectionné document.getElementById(tabName).classList.add("active"); // Activer le bouton d'onglet sélectionné evt.currentTarget.classList.add("active"); } function ajouterligne() { var form = document.querySelector('.grille-t-body'); var nouveauBloc = document.createElement('div'); nouveauBloc.innerHTML = ` <br><br><br> <h3 class="h3-ajout-ligne-maintenance">Nouvelle Entrée :</h3> <form method="post" action="maintenance.php" style="display:block;"> <input type="hidden" name="idintervention" class="td-historique-maintenance" > <input placeholder="Type d'intervention" type="text" name="typeintervention" class="td-historique-maintenance" required> <input placeholder="Date de l'intervention" type="date" name="dateintervention" class="td-historique-maintenance"required> <input placeholder="Compteur" type="number" name="compteurintervention" class="td-historique-maintenance"required> <input placeholder="Intervenant" type="text" name="intervenant" class="td-historique-maintenance" required> <input placeholder="Description" type="text" name="recap" class="td-historique-maintenance" required> <button id="bouton-valider-historique-cache" type="submit" style="display: none;" >VALIDER</button> </form> `; form.appendChild(nouveauBloc); } function boutonEnregistrer(){ // récupération des boutons const bouton1 = document.querySelector("#bouton-enregistrer-historique"); const bouton2 = document.querySelector("#bouton-valider-historique-cache"); // ajout d'un écouteur d'événements pour le clic sur le bouton1 bouton1.addEventListener("click", function() { // simuler le clic sur le bouton2 setTimeout(() => { bouton2.click(); },0); }); } //Onglets animés const onglets = document.querySelectorAll('.onglets'); const contenu = document.querySelectorAll('.contenu'); let index = 0; onglets.forEach(onglet => { onglet.addEventListener('click', () => { if(onglet.classList.contains('active')){ return; }else{ onglet.classList.add('active'); } index = onglet.getAttribute('data-anim'); console.log(index); for (k = 0; k < onglets.length; k++){ if (onglets[k].getAttribute('data-anim') != index){ onglets[k].classList.remove('active'); } } for(j = 0; j < contenu.length; j++){ if(contenu[j].getAttribute('data-anim') == index){ contenu[j].classList.add('activeContenu'); }else{ contenu[j].classList.remove('activeContenu'); } } }) }) for (var i = 0; i < icons.length; i++) { icons[i].onclick = function(evt) { var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value; var hiddenInput = document.querySelector('input[name="maintenanceId"]'); hiddenInput.value = id; }; } // Obtenez une référence à l'élément HTML que vous souhaitez écouter pour les clics const infoButton = $('.material-symbols-outlined'); const repairGrid = $('.div-checkbox'); infoButton.on('click', function() { repairGrid.css('display', 'block'); }); }); // ajouter un gestionnaire d'événements clic à chaque image var images = document.querySelectorAll('.imglistmat'); for (var i = 0; i < images.length; i++) { images[i].onclick = function() { var id = this.getAttribute('data-id'); var hiddenInput = document.querySelector('input[name="mat_id"]'); hiddenInput.value = id; var buttonCaché2 = document.getElementById('button-caché2'); buttonCaché2.click(); }; }18 avril 2023 à 23:09
c'est plus exactement le même code
cette partie est toujours hors d'une fonction
for (var i = 0; i < icons.length; i++) { icons[i].onclick = function(evt) { var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value; var hiddenInput = document.querySelector('input[name="maintenanceId"]'); hiddenInput.value = id; }; }ce qui veut dire quelle est exécuter avant le chargement complet de la page et du coup elle ne peut recéper une reference aux elements auquelle elle fait reference vu qu'a ce moment ils n'existent pas encore. et aussi "document.querySelector" utilisé tel quel appellera le premier élément de la page correspondant et il sera toujours le meme je me suis posé la question a savoir si c'est ca le probleme
2 mai 2023 à 06:06
ça y est j'ai trouvé la solution
En cours de formation javascript je me suis dis : ok go essayer, je comprends mieux ce que je fais.
1. Pour une raison que j'ignore encore le code javascript dans un fichier séparé ne fonctionnait tout simplement pas.
J'ai donc replacé les blocs de code JS avant les blocs de code HTML correspondant
2. Je me suis aidé de chatGPT pour ce fameux dernier code qui m'embêtait, celui pour lequel j'ai publié mon premier message. Et du coup voici ce qu'il en est sorti en lui demandant de simplement corriger ma logique d'écriture, c'est à dire récupération avec get, boucle et insertion :
window.addEventListener('load', function() {
var valorinputmaintenanceId = document.getElementById('maintenanceId');
var icons = document.querySelectorAll('[id^="maintenance-info-"]');
icons.forEach(function(icon) {
icon.addEventListener('click', function() {
valorinputmaintenanceId.value = icon.id.slice(17); // récupère la sous-chaîne après "maintenance-info-"
});
});
});
Il m'a placé un load en première ligne que je ne connaissais pas car en vérifiant dans la console, tout était bon sauf le transfert à maintenanceId. Apparemment les codes javascript se chargeraient plus vite que la page HTML, si j'ai bien compris.
En tout cas tout fonctionne, merci pour ton temps et vive Pierre Giraud :p