Mise à jour informations dans Modal

**Popinho** · 02/09/2023, 14h15

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.

**mathieu** · 03/09/2023, 06h25

montrez nous le code javascript que vous utilisez pour remplir la zone modale.

**Popinho** · 03/09/2023, 08h23

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

**mathieu** · 03/09/2023, 09h31

si j'ai bien compris, lors de l'évènement "shown.bs.modal", il se passe cela dans l'ordre :

la zone modale s'affiche
la requête HTTP est envoyée à l'API
... la réponse de la requête a un délai avant d'arriver ...
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.

**Popinho** · 03/09/2023, 11h04

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 ...

**Popinho** · 04/09/2023, 18h05

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

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.

**NoSmoking** · 05/09/2023, 18h03

Bonjour,
peut-être une soucis avec le cache !

**Popinho** · 08/09/2023, 13h15

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 ?

**NoSmoking** · 14/09/2023, 12h00

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).

↪ Fetch method : Cache-mode

.

**Popinho** · 19/09/2023, 13h19

Merci, je vais regarder.

Mise à jour informations dans Modal

JavaScript

Discussions similaires

Partager

Partager