Discussion :

[bertrand59789]

Bonjour,

je rencontre un souci pour récupérer des informations dans une modale.
j'ai une liste de produit avec un bouton pour afficher les informations dans une modale et j'utilise pour cela ajax.
voici le code avec explication.
Ici la boucle qui affiche les produits :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php foreach ($produit as $prod): ?>
	<div class="col-md-6 col-lg-4">
		<div class="card">
			<a href="#ajoutModal" data-id="<?php echo $prod->id; ?>" id="info" data-bs-toggle="modal" data-bs-target="#ajoutModal"><img src="../../produits/<?php echo $prod->image; ?>.jpg" alt="<?php echo $prod->nom; ?>"></a>
			<div class="sale-flash badge bg-success p-2"><?php echo $prod->pg; ?>/<?php echo $prod->vg; ?></div>
			<div class="card-body">
				  <div class="card-header">
					<h3 class="card-title">Prix : 10,00€</h3>
					<h5 class="card-title"><?php echo $prod->nom; ?> <?php echo $prod->ml; ?>ml - Prix : 10,00€</h5>
				</div>
		        </div>
		</div>
	</div>
 <?php endforeach ?>

Au clic de l'image je passe a la récupération des informations en ajax :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$('body').on('click', '#info', function(e) {
        e.preventDefault();
        $.ajax({
            url: 'process.php',
            type: 'post',
            data: {produitinfoid: this.dataset.id},
            success: function(response) {
                let prodInfo = JSON.parse(response);
                $('#produit_id').val(prodInfo.id)
                $('#nomproduit').val(prodInfo.nom);
            }
        })
    })

Donc ici la requête envoi vers le fichier process.php qui récupère les info

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (isset($_POST['produitinfoid'])){
    $produitinfoid = (int)$_POST['produitinfoid'];
    echo json_encode($db->getSingleproduit($produitinfoid));
}

Pour simplifier les requête à la base je stock dans un autre fichier

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
public function getSingleproduit(int $id)
    {
        $q = $this->getconnexion()->prepare("SELECT * FROM l_produit WHERE  id = :id");
        $q->execute(['id' => $id]);
        return $q->fetch(PDO::FETCH_OBJ);
    }

Jusque la tout fonctionne, mais je n'arrive pas a mettre les informations dans la modale.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="modal-header">
	<h1 class="modal-title fs-5" id="#nomproduit"></h1>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

Peut être aussi que j'utilise une méthode qui n'est pas la plus pertinente pour récupérer des informations dans une modale.
Merci de votre aide.

[bertrand59789]

Bonjour,

j'ai réussi à placer les informations grâce à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#nomprod').append(prodInfo.nom);

Mais autre souci, comment effectuer des conditions car j'ai plusieurs boutons qui seront visible selon le résultat de réponse.
ici en effectuant un console.log j'obtiens ce résultat : n0":"1","n3":"0","n6":"0","n12":"0","n16":"0","n20":"0"
Donc ici seul le bouton n0 doit être visible.
Comment réaliser cela ?

merci,

[mathieu]

qu'est ce que vous affichez qui donne ce résultat dans la console ?
si c'est l'objet prodInfo, vous pouvez accéder aux valeurs des attributs en faisant prodInfo["n0"].

[bertrand59789]

Bonjour,

enfaite j'ai plusieurs boutons dans le modale. le but est de n'afficher que les boutons qui selon la réponse en json, est "1".
la réponse donne cela : n0":"1","n3":"0","n6":"1","n12":"1","n16":"0","n20":"0"
ici seul les boutons 0, 6, 12 doivent apparaitre.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
                                                                                   <div role="group">
												<input class="btn-check" type="radio" name="n" id="bag-size-0" autocomplete="off" value="0">
												<label for="bag-size-0" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">0mg/ml</label>
												<input class="btn-check" type="radio" name="n" id="bag-size-3" autocomplete="off" value="3l">
												<label for="bag-size-3" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">3mg/ml</label>
												<input class="btn-check" type="radio" name="n" id="bag-size-6" autocomplete="off" value="6">
												<label for="bag-size-6" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">6mg/ml</label>	
												<input class="btn-check" type="radio" name="n" id="bag-size-12" autocomplete="off" value="12">
												<label for="bag-size-12" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">12mg/ml</label>
												<input class="btn-check" type="radio" name="n" id="bag-size-16" autocomplete="off" value="16">
												<label for="bag-size-16" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">16mg/ml</label>	
												<input class="btn-check" type="radio" name="n" id="bag-size-20" autocomplete="off" value="20">
												<label for="bag-size-20" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">20mg/ml</label>
											</div>

Mais je ne vois pas comment réaliser cela, peut être un if après la réponse mais comment réaliser cela ?

Merci,

[bertrand59789]

J'ai trouvé une solution pour afficher les boutons mais il y a un autre problème.
après la réponse j'ai placé ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
success: function(response) {
                let prodInfo = JSON.parse(response);
				var nom = prodInfo.nom;
				var n0 = prodInfo.n0;
				var n3 = prodInfo.n3;
				var n6 = prodInfo.n6;
				var n12 = prodInfo.n12;
				var n16 = prodInfo.n16;
				var n20 = prodInfo.n20;
				var image = prodInfo.image;
 
				if(n0 != 0){
				$('#n0').html('<input class="btn-check" type="radio" name="n" id="bag-size-0" autocomplete="off" value="0mg/ml"><label for="bag-size-0" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">0mg/ml</label>');	
				}
				if(n3 != 0){
				$('#n3').html('<input class="btn-check" type="radio" name="n" id="bag-size-3" autocomplete="off" value="3mg/ml"><label for="bag-size-3" class="btn btn-sm btn-outline-secondary fw-normal ls0 nott">3mg/ml</label>');	
				}

cela fonctionne sauf que si j'ouvre un produit qui affiche les 2 boutons, tout est ok mais si derrière j'ouvre un produit avec 1 seul bouton, les 2 s’affichent.
y a t-il un moyen de réinitialisé le modale après fermeture ?

[bertrand59789]

J'ai trouvé la solution, il suffisait de mettre un else pour supprimer le bouton.
Pour finir je suis parti sur tout autre chose avec un appel de fancybox en ajax.
c'est plus simple et plus pratique.

Problème résolu : lol: