Bonjour, je suis un jeune développeur web et j'aimerais créer un edit panel pour pouvoir effectuer différente tache en fonction d'un article sélectionner. 

Actuellement j'utilise du code php :

<?php while($pub = $publications->fetch()) { ?>
				<div id="<?= $pub['id'] ?>" style="height: 100%; width: 100%; position: fixed; display: none; background-color: rgba(0, 0, 0, 0.5);">	
					<div style="background-color: grey;display: block;">
						<a role="button" onclick="hide_edit_panel_reverse(<?= $pub['id'] ?>);" class="cross" style="float: right; cursor: pointer; font-size: 50px; padding: 20px;">✖</a>
						<!-- mettre les paramettre pour l'utilisateur dans une contion php -->
						<a href="?edit=<?= $pub['id'] ?>">Modifier</a> | <a href="?id=<?= $pub['id'] ?>">Suprimer</a>
					</div>
				</div>
<?php } ?>

Mais comme vous le voyez, je suis obliger de créer un menu par article se qui absurde. Et en plus je rencontre des problèmes de CSS avec cette solution.

C'est pourquoi j'ai eu l'idée de passer sur une génération JavaScript qui pourrait me permettre de générez non pas le nb d'article (actuellement j'en ai 15 mais si j'en ai 150 voire 10000 c'est pas trés optimiser).

C'est pourquoi je viens demander s'il serait possible de remplacer ce code par une génération JavaScript du HTML et mettre les id de façon dynamique.

Pour les id dynamique vous pouvez voir que dans le PHP j’utilisai :

<?= $pub['id'] ?>

 Serait t'il possible que quand je clique sur ce bouton :

<a class="button-edit" onclick="hide_edit_panel(<?= $pub['id'] ?>)" style="text-decoration: none; color: #807c7cc4; margin-right: 20px; font-size: 12.6px; float: right; cursor: pointer;">●●●</a>

Que id de la publication soit adopter et rentrer dans la fonction qui permettrait de générer le HTML de façon à que <?= $pub['id'] ?> soit remplacer ici :

<a href="?edit=<?= $pub['id'] ?>">Modifier</a> | <a href="?id=<?= $pub['id'] ?>">Suprimer</a>

Mais pour ça il faudrait utiliser AJAX ? non ?

Voilà je vous explique avec la génération du HTML par JavaScript (celle_ci ne doit pas être très compliquer) pour expliquer l'id dynamique que je voudrait mettre en place. Mais peut être que je me complique trop la vie et qu'il y une meilleur solution que celle-ci.

Je remercie d'avance pour toute les personnes qui me répondront 😁

-
Edité par QuentinRegnierfr 25 octobre 2021 à 13:18:56

Bonjour,

C'est possible. Je te conseille de renvoyer tes articles en json, le mieux c'est d'avoir un chemin juste pour ça. En plus, tu pourras implémenter facilement un refresh derrière. La page que tu as actuellement ne changeras pas, à part au niveau des articles, vu qu'il n'y en auras pas au début. Ensuite, une fois que la page est dans le DOM, tu peux call ton api (avec ajax, fetch ou autres) pour recevoir tes articles en json. Plus qu'à créer tout ça en js une fois que tu les as reçus.

Tu peux aussi générer le json via php, mais ça me semble moins intéressant. Autant créer directement le html.

Pour aller chercher les articles :

https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest 

https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch 

https://api.jquery.com/jquery.ajax/ 

Pour la création d'articles, voici un petit codepen de Nadfrijs qui est sympa : https://codepen.io/nadfri/pen/wveXLME 

Petits conseils : évite le inline style / js, c'est très agaçant niveau maintenance du code (tu ne sais plus où est quoi).