Récupérer les $données sql d'un article

Sujet résolu

20 octobre 2020 à 13:47:50

Bonjour,

Je viens vers vous car je suis bloqué dans mon projet de création de site web, je m'explique

Je créer un site vitrine avec une page article dans lequel je récupère une bdd sql avec les articles pour les afficher un par un en php.

Une fois cette étape réussi mon but serait de réussir à ouvrir un modal lorsque l'on clique sur un article avec plus de détails sur celui ci et c'est la que je bloque. J'aimerai savoir comment je pourrai en php ou avec javascript récupérer les $données de l'article cliqué pour le modal à afficher.

Voici mon code:

$req = $bdd->query('SELECT NOM, IMAGE, PRIX , DESCRIPTION FROM KAYAK');
				while ($donnees = $req->fetch()) 
				{
				?>
					
					<div id="modalBtn" class="article" style="background: url('<?php echo $donnees['IMAGE'];?>');background-size: 100% 100%;background-repeat: no-repeat;background-position: center;">
						<div class="article__filter"></div>
						<div class="article__name"><?php echo htmlspecialchars($donnees['NOM']); ?></div>
						<div class="article__icon"><?php echo htmlspecialchars($donnees['PRIX']); ?>€</div>
						
					</div>
					<?php } ?>
					
					<div class="modal">
						<div class="modalContent">
							<span class="closeBtn">&times;</span>
							<div class="row">
								<div class="left">
									<div class="block-image" style="background: url('<?php echo $donnees['IMAGE'];?>');background-size: 100% 100%;background-repeat: no-repeat;background-position: center;">
										
									</div>
								</div>
								<div class="right">
									<h1><?php echo htmlspecialchars($donnees['NOM']); ?></h1>
									<div><p><?php echo htmlspecialchars($donnees['DESCRIPTION']); ?></p></div>
									<div><?php echo htmlspecialchars($donnees['PRIX']); ?>€</div>
									
								</div>
							</div>
						</div>
					</div>

et javascript:

$('#modalBtn').click(function() {
		$('.modal').css(
			{
				'display': 'block'
			}
		);
	});


	$('.closeBtn').click(function() {
		$('.modal').css(
			{
				'display': 'none'
			}
		);

	});

Merci d'avance pour votre aide

ValentinGorrin

20 octobre 2020 à 22:23:25

je crois avoir cerné ton problème,

-pour afficher le modal en cliquant sur la balise <div> j'ai créé un event "onclick" avec pour valeur "display_modal(id du kayak dans la bdd)

-je récupère la variable dans le script js que j'ai appelé "kayak_id"

-j'ai modifié l'id du modal par "modal_id du kayak dans la bdd"

-ainsi dans le js je peux récuperer l'id du modal par le document.getElementById("modal_" + kayak_id)

-et je l'affiche ou le cache en fonction de son état actuel

j'espere que tu m'as compris et que j'ai répondu à ton problème

script :

<?php
$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
$req = $bdd->query('SELECT * FROM KAYAK');
while ($donnees = $req->fetch())
{
?>
<script type="text/javascript">
function display_modal(kayak_id)
{
	var modal = document.getElementById("modal_" + kayak_id)
	if(modal.style.display == "none")
	{
		modal.style.display = ""
	}
	else
	{
		modal.style.display = "none"
	}
}
</script>
	<head><meta charset="utf-8"></head>
	<div id="modalBtn" class="article" style="background: url('<?php echo $donnees['IMAGE'];?>');background-size: 100% 100%;background-repeat: no-repeat;background-position: center;" onclick="display_modal(<?php echo htmlspecialchars($donnees['kayak_id']) ?>)">
		<div class="article__filter"></div>
		<div class="article__name"><?php echo htmlspecialchars($donnees['NOM']); ?></div>
		<div class="article__icon"><?php echo htmlspecialchars($donnees['PRIX']); ?>€</div>
	</div>
    <div class="modal" style="display: none" <?php echo "id='modal_" . htmlspecialchars($donnees['kayak_id']) . "'"; ?>>
        <div class="modalContent">
            <span class="closeBtn">&times;</span>
            <div class="row">
                <div class="left">
                    <div class="block-image" style="background: url('<?php echo $donnees['IMAGE'];?>');background-size: 100% 100%;background-repeat: no-repeat;background-position: center;">
                         
                    </div>
                </div>
                <div class="right">
                    <h1><?php echo htmlspecialchars($donnees['NOM']); ?></h1>
                    <div><p><?php echo htmlspecialchars($donnees['DESCRIPTION']); ?></p></div>
                    <div><?php echo htmlspecialchars($donnees['PRIX']); ?>€</div>
                     
                </div>
            </div>
        </div>
        <?php } ?>
    </div>

-
Edité par ValentinGorrin 20 octobre 2020 à 22:31:43