Mise à jour de la valeur de data-src d'une iframe fancybox en javascript

Signaler
Messages postés
46
Date d'inscription
mardi 17 avril 2012
Statut
Membre
Dernière intervention
26 mars 2021
-
 Hadus -
Bonjour,

J'aimerais lister les fichiers se trouvant dans un répertoire du serveur en cliquant sur un bouton. Le répertoire doit d'abord être indiqué dans un champ input text. La fenêtre qui s'ouvrira pour lister les fichiers contenus dans le dossier est ouverte grâce à Fancybox (Fancyapps) et donc dans un iframe avec data-src="monfichier.php?dossier=mondossierencodéenbase64).

La fonction marche bien dès que j'arrive sur la page la première fois (je peux changer la valeur de mon input text et la data-src du bouton se met à jour, mais quand je change le nom du dossier, la valeur du champ data-src ne se met pas à jour et reste sur ma première valeur, pourtant en essayant d'afficher cette valeur dans un champ input text ou en alert() ou en innerHTML, la valeur se met bien à jour à chaque fois, mais jamais dans le data-src du bouton.


<input onkeyup="getElementById('iframetogo').dataset.src = 'modules/listpix.php?dir=' + btoa(this.value)" type="text" name="sourcepix" id="sourcepix">

<button type="button" id="iframetogo" data-fancybox data-type="iframe" onclick="this.dataset.src = 'modules/listpix.php?dir=' + btoa(getElementById('sourcepix').value);">
Lister les fichiers à renommer
</button>


J'ai mis deux fois la même action pour forcer la mise à jour autant sur le champ modifié que sur le bouton qui sera cliqué.

Est-ce que quelqu'un aurait une idée du problème ? Pourquoi la valeur du champ input est prise en compte sur un innerHTML, un autre input de test ou dans un alert(), mais pas dans le bouton avec data-src ?

Merci pour votre aide !

1 réponse

Salut, vous partez du mauvais pied. En tout cas ça m'a l'air compliqué votre méthode alors que les dataset HTML sont assez simple:
Là vous utilisez value qui n'a aucun rapport avec les dataset: .value est un attribut d'objet et un dataset une série de valeurs indiquée par leur noms de data en HTML:
<HTMLElement data-cequejeveux='la valeur voulue' data-uneautre='autre valeur' >
...
</HTMLElement>



Pour y accéder en JavaScript:

console.log(HTMLElement.dataset.cequejeveux);
//-- ou pour en ajouter ou changer une valeur 
HTMLElement.dataset.uneautre='mise à jour de la data';

HTMLElement.dataset.nouvelle='Hello';

console.log(HTMLElement.dataset.uneautre);
console.log(HTMLElement.dataset.nouvelle);

En gros c'est un objet/méthode dataset(value est une méthode duiifférente) qui correspond à une syntaxe en HTML qui est forcément différente en JS.

Explication complète:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Quand à la comparaison avec INPUT(ou INPUT.value) qui est un élément HTML et la méthode .innerHTML qui permet d'obtenir ou de changer la valeur du contenu de n'importe quelle balise elle montre bien que vous avez des lacunes et mélangez un peu des choses qui n'ont rien à voir...

onclick="blabla bla"

ça c'est faux ce qui doit suivre le signe égal doit être une fonction et non une chaîne de caractère et encore moins une attribution de valeurs:

<div id='test' onclick="function(){}" >...</div>

Ou mieux encore:

getElementById('test').addEventListener(click', function(){
//...
});


https://www.w3schools.com/jsref/event_onclick.asp

ps: si vous devez 2 fois faire la même chose pour ne pas y arriver c'est qu'il y a un problème quelque part...Une seule fois bien fait/en réglant le problème suffit. Multiplier des codes erronnés = plus d'erreurs mais jamais un résultat qui fonctionne.