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

JavaScript Discussion :

Mise à jour informations dans Modal


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut Mise à jour informations dans Modal
    Bonjour,
    C'est mon premier post et je suis débutant en javascript.

    J'ai une page (user.php) qui affiche un tableau avec des données récupérées depuis mysql (liste de matchs avec 1 ligne par match contenant les données du match et les pronostics de l'utilisateur connecté).
    Sur chaque ligne j'ai un bouton qui ouvre une modal(prono.modal.inc.php et prono.modal.inc.js) en passant 2 paramètres :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
    <button class="btn btn-secondary mx-0 my-auto py-2 fw-bold px-1 rounded" id="btnusermodalprono"
      data-bs-matchid="<?= $match->id ?>" data-bs-userid="<?= $_SESSION['id'] ?>" data-bs-toggle="modal" data-bs-target="#ModalAddP">
       <span class="fs-3"><?= (isset($scorepronodom)) ? $scorepronodom : "&nbsp;" ?></span>
       <span class="fs-3">-</span>
       <span class="fs-3"><?= (isset($scorepronoext)) ? $scorepronoext : "&nbsp;" ?></span>
    </button>
    </div>
    Ma modal s'ouvre bien avec les informations du match sélectionné et les pronostics de l'utilisateur. Quand je valide cela fait bien ce que je veux (Fermeture de la modal, mise à jours des données dans SQL et rafraichissement de la page).
    Les nouvelles données sont bien affichées (nouveau pronostic), en revanche quand je reclique sur le bouton pour (re)modifier les données j'ai un soucis à l'ouverture de la modal:
    • Sur mon Iphone avec Safari pas de problème
    • Sur mon Iphone avec Chrome ce sont les anciens pronostics qui sont affichés dans la modal
    • Sur PC quelque soit le navigateur (Edge, Chrome, Brave) ce sont les anciens pronostics qui sont affichés dans la modal


    Avez-vous une idée de ce qui pourrait poser problème ?
    Je peux mettre plus de code si besoin.

    Merci.

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 660
    Par défaut
    montrez nous le code javascript que vous utilisez pour remplir la zone modale.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut
    Bonjour, voici le code pour remplir la modal:
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    const PronoUserModal = document.getElementById('ModalAddP')//Modal ajout prono
    const PronoUserModalForm = document.getElementById('formAddP')//Form ajout prono
    let Inputpronodom = document.getElementById('modalappronodom')
    let Inputpronodext = document.getElementById('modalappronoext')
    let Inputiduser = document.getElementById("modalappiduser")
    let Inputidmatch = document.getElementById("modalappidmatch")
    let Inputaction = document.getElementById("modalapaction")
    let chome = document.getElementById('modalapequipedom')//DIV équipe DOM
    let caway = document.getElementById('modalapequipeext')//DIV équipe EXT
    let chome_flag = document.getElementById('modalapimagedom')//IMG Flag équipe DOM
    let caway_flag = document.getElementById('modalapimageext')//IMG Flag équipe EXT
    let cmatch_date = document.getElementById('modalapdate')//DIV Date
    let ctitle = document.getElementById('modaltitleap')//modal-title
    let IMGlogo = document.getElementById('ponomodallogo')
    let DIVmodaltype = document.getElementById('modalaptype')
     
    const listbuts  = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
     
    const logoArrayModal = ['img/94fl_logo_720.png', 'img/eclair_bleu_720.png', 'img/fifa94_720.png']
    const defaultIMG = 'img/TBD.webp'
     
    //Logo
    let randomElement = logoArrayModal[Math.floor(Math.random() * logoArrayModal.length)];
    IMGlogo.innerHTML = '<img src="' + randomElement + '" class="img-fluid rounded mx-auto d-block" width="100"/>'
     
    PronoUserModal.addEventListener('shown.bs.modal', (e) => {
        chome_flag.src = caway_flag.src = defaultIMG
        let matchid = $(e.relatedTarget).data('bs-matchid')
        let userid = $(e.relatedTarget).data('bs-userid')
    //Récupération des données du matchs
        let url = jsurl + 'match/' + matchid
        toAPI("GET", url, jstournoi)
        .then(response => response.json()).then((data) => {
            if (data.success == true) {
                let messageType = ''
                let vtype = data.results.type_nom
                if (vtype.search("(Super Bonus)") > 0) {
                    DIVmodaltype.style.color = '#f00'
                    messageType = '<br>Match Super Bonus'
                } else if (vtype.search("(Bonus)") > 0) {
                    DIVmodaltype.style.color = '#f00'
                    messageType = '<br>Match Bonus'
                } else {messageType = ''}
                DIVmodaltype.innerHTML  = 'MatchWeek ' + data.results.MatchWeek + messageType
    //Affichage du match
                chome.innerHTML = data.results.home
                caway.innerHTML = data.results.away
                chome_flag.src = data.results.home_flag
                caway_flag.src = data.results.away_flag
                Inputidmatch.value = matchid
                Inputiduser.value = userid
                cmatch_date = datefrlong(data.results.play_date).replace(':', 'h')
                ctitle.innerHTML = data.results.type_nom
    //Récupération prono
                let url2 = jsurl + 'prono/' + matchid + '/' + userid
                toAPI("GET", url2, jstournoi)
                .then(response2 => response2.json()).then((data2) => {
                    if (data2.success == true) {
                        Inputpronodom.value = data2.results.home_score
                        Inputpronodext.value = data2.results.away_score
                        Inputaction.value = "PATCH"
                    } else {
                        Inputpronodom.value = '-'
                        Inputpronodext.value = '-'
                        Inputaction.value = 'POST'
                    }
                    return
                })
                .catch(error => alert("Erreur2 : " + error))
                return
            }
        })
         .catch(error => alert("Erreur (match): " + error))
    })
    Puis le code d'éxécution :
    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
    18
    19
    function btnpronosubmit (){
        if ((!(Inputpronodom.value in listbuts)) || (!(Inputpronodext.value in listbuts))) {
            alert('Veuillez renseigner le nombre de but(s) par équipe !!!')
        } else {
            let url = jsurl + 'prono/' + Inputidmatch.value + '/' + Inputiduser.value + '/' + Inputpronodom.value + '/' + Inputpronodext.value
            let method = Inputaction.value
            toAPI(method, url, jstournoi)
            .then(response => response.json()).then((data) => {
                if (data.success == true) {
                    if (method === 'POST') { message = 'Prono ajouté ;-)' } else {message = 'Prono modifié ;-)'}
                    alert(message)
                    window.location.reload()
                 } else {
                    if (method === 'POST') { message = "Erreur lors de l'ajout du prono!!!" } else {message = 'Erreur lors de la modification du prono avec succès!!!'}
                }
            })
             .catch(error => alert("Erreur : " + error))
        }
    }
    Merci

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 660
    Par défaut
    si j'ai bien compris, lors de l'évènement "shown.bs.modal", il se passe cela dans l'ordre :
    1. la zone modale s'affiche
    2. la requête HTTP est envoyée à l'API
    3. ... la réponse de la requête a un délai avant d'arriver ...
    4. le contenu est mis à jour avec les données de la réponse


    mais se déroulement n'explique pas pourquoi vous avez une différence suivant les navigateurs.
    avant de débuguer cela, je pense qu'il serait peut-être plus clair de changer l'ordre de cela et d'afficher la zone modale seulement quand son contenu a été mis à jour avec les données de la réponse HTTP.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut
    J'ai essayé mais sans succès.
    Mon bouton:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <button class="btn btn-secondary mx-0 my-auto py-2 fw-bold px-1 rounded" id="btnusermodalprono"
                                       onclick="showmodaladdprono(<?= $match->id ?>, <?= $_SESSION['id'] ?>)">
                                           <span class="fs-3"><?= (isset($scorepronodom)) ? $scorepronodom : "&nbsp;" ?></span>
                                           <span class="fs-3">-</span>
                                           <span class="fs-3"><?= (isset($scorepronoext)) ? $scorepronoext : "&nbsp;" ?></span>
                                           </button>

    Et ma fonction:
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    function showmodaladdprono (matchid, userid){
    //Récupération des données du matchs
    let url = jsurl + 'match/' + matchid
     
    toAPI("GET", url, jstournoi)
    .then(response => response.json()).then((data) => {
        if (data.success == true) {
            let vtype = data.results.type_nom
            if (vtype.search("(Super Bonus)") > 0) {
                DIVmodaltype.style.color = '#f00'
                messageType = '<br>Match Super Bonus'
            } else if (vtype.search("(Bonus)") > 0) {
                DIVmodaltype.style.color = '#f00'
                messageType = '<br>Match Bonus'
            } else {messageType = ''}
    //Affichage du match
            DIVmodaltype.innerHTML  = 'MatchWeek ' + data.results.MatchWeek + messageType
            chome.innerHTML = data.results.home
            caway.innerHTML = data.results.away
            chome_flag.src = data.results.home_flag
            caway_flag.src = data.results.away_flag
            cmatch_date = datefrlong(data.results.play_date).replace(':', 'h')
            ctitle.innerHTML = data.results.type_nom
    //Récupération prono
            let url2 = jsurl + 'prono/' + matchid + '/' + userid
            toAPI("GET", url2, jstournoi)
            .then(response2 => response2.json()).then((data2) => {
                if (data2.success == true) {
                    Inputpronodom.value = data2.results.home_score
                    Inputpronodext.value = data2.results.away_score
                    Inputaction.value = "PATCH"
                } else {
                    Inputpronodom.value = "-"
                    Inputpronodext.value = "-"
                    Inputaction.value = "POST"
                }
                // return
            })
            .catch(error => alert("Erreur2 : " + error))
        }
    })
     .catch(error => alert("Erreur (match): " + error))
     
    Inputidmatch.value = matchid
    Inputiduser.value = userid
     
     //Affichage Modal
     $('#ModalAddP').modal('show');
     
    }
    Cela ne change rien au résultat, je n'arrive pas à récupérer les données de la requête HTTP en dehors du then, c'est peut être ça le soucis ...

  6. #6
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut
    Je ne comprends pas, lorsque je reclique sur le bouton, dans la fonction qui affiche la modal la requête API ne renvoie pas la bonne valeur et conserve les anciennes valeurs.
    Nom : 01.png
Affichages : 108
Taille : 36,9 Ko

    Alors que si juste après je fais la requête dans Postman j'ai bien les nouvelles valeurs:
    Nom : 02.png
Affichages : 109
Taille : 6,8 Ko

    Là où je ne comprends pas c'est qu'au niveau du lien quand je clique j'ai bien les bonnes valeurs donc la page PHP en arrière plan de la modale s'est bien mise à jour (via une fonction PHP).

    Fonction php qui fait la requête sur la page en arrière plan (fonctionnement OK):
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    function toAPI($method, $url, $tournoi = TOURNOI){
        $userID = $_SESSION['id'] ?? 00;
        $opts = array(
            'http'=>array(
            'method'=>$method,
            'header'=>"X-Auth-Key: " . PKEY ."\r\n" .
                "Tournoi: " . $tournoi . "\r\n" .
                "X-Auth-User: " . <xxxx> ."\r\n" .
                "X-Auth-Pwd: " . <yyyy> ."\r\n" .
                "X-Auth-Id: " . $userID . "\r\n" .
                "Content-Length: " . 0 ."\r\n" .
                "Content-Type: application/json; charset=UTF-8\r\n" .
                "Accept: */*\r\n"
            )
        );
        //Appliquer les options sur le stream
        $context = stream_context_create($opts);
        $apiData = @file_get_contents(BASEURI.str_replace(' ', '+', $url), false, $context);
        if (!$apiData) {
            $error = error_get_last();
            echo "HTTP request failed --> "; var_dump($error);
            exit;
        }
        try {
            return json_decode($apiData, false, 512, JSON_UNESCAPED_UNICODE);
     
        } catch (JsonException $e) {
            echo "<hr>";
            var_dump($e);
            echo "<hr>";
            echo "<hr>";
            $return = false;
        }
     
        var_dump($return);
    }
    Ma fonction js qui fait la requête API dans la modale (Ne se met pas à jour) :
    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
    //Fonction to API
    function toAPI (apimethod, apiurl, apitournoi) {
        return fetch(apiurl, {
            method: apimethod,
            headers: {
              "Content-Type": "application/json; charset=UTF-8",
              'X-Auth-Key': jskey,
        	'Tournoi': apitournoi,
        	'X-Auth-User': xxxxxxxxxxx,
        	'X-Auth-Pwd': xxxxxxxxxxx,
        	'X-Auth-Id': 3,
        	'Content-Length': 0,
        	'Accept': '*/*'
            }
        })
    }
    Si vous avez une idée ?
    Merci.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Bonjour,
    peut-être une soucis avec le cache !

  8. #8
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut
    Bonjour,

    Merci pour l'info, j'y avais pensé et ajouté la ligne suivante dans le HEAD mais sans succès:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
        <meta http-equiv='pragma' content='no-cache'>

    Avez-vous une idée de comment supprimer le cache ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Citation Envoyé par Popinho
    Avez-vous une idée de comment supprimer le cache ?
    regarde du côté de l'option cache pour fetch(url, options).
    .

  10. #10
    Membre à l'essai
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Septembre 2023
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Septembre 2023
    Messages : 6
    Par défaut
    Merci, je vais regarder.

Discussions similaires

  1. Problème avec Google chrome
    Par FOCUS77 dans le forum Windows 7
    Réponses: 7
    Dernier message: 15/10/2016, 18h25
  2. Gros problème avec Google-Chrome.
    Par lebaroudeur dans le forum Windows 7
    Réponses: 19
    Dernier message: 01/12/2014, 18h28
  3. problème d'affichage avec google chrome
    Par cool dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 31/10/2010, 13h37
  4. Problème avec Google Chrome et ma DTD
    Par riadhhwajdii dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 03/08/2009, 10h09
  5. Problème avec Google Earth
    Par Aitone dans le forum Ubuntu
    Réponses: 1
    Dernier message: 04/04/2008, 05h15

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