IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Récupération d'information dans une modale


Sujet :

AJAX

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 57
    Points : 28
    Points
    28
    Par défaut Récupération d'information dans une modale
    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.

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 57
    Points : 28
    Points
    28
    Par défaut
    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,

  3. #3
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 643
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 643
    Points : 14 671
    Points
    14 671
    Par défaut
    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"].

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 57
    Points : 28
    Points
    28
    Par défaut
    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,

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 57
    Points : 28
    Points
    28
    Par défaut
    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 ?

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Services de proximité

    Informations forums :
    Inscription : mai 2018
    Messages : 57
    Points : 28
    Points
    28
    Par défaut
    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:

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 13/08/2008, 12h08
  2. [C# express 2005] Récupération d'information dans une BDD
    Par poussinphp dans le forum Windows Forms
    Réponses: 1
    Dernier message: 06/05/2006, 23h25
  3. regrouper des informations dans une seule ligne
    Par rozow dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 11/04/2006, 17h03
  4. [MySQL] Envoi d'information dans une base de donnée via formulaire
    Par Mysti¢ dans le forum PHP & Base de données
    Réponses: 7
    Dernier message: 30/03/2006, 21h35
  5. Problème de récupérations de données dans une table mysql
    Par Helpine dans le forum SQL Procédural
    Réponses: 3
    Dernier message: 09/03/2006, 20h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo