Mise à jour informations dans Modal

Version imprimable

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:

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 : " " ?></span> <span class="fs-3">-</span> <span class="fs-3"><?= (isset($scorepronoext)) ? $scorepronoext : " " ?></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.

03/09/2023, 06h25
mathieu

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

Bonjour, voici le code pour remplir la modal:

Code:

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:

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

03/09/2023, 09h31
mathieu
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.

J'ai essayé mais sans succès.
Mon bouton:

Code:

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:

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

2 pièce(s) jointe(s)

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.
Pièce jointe 643452

Alors que si juste après je fais la requête dans Postman j'ai bien les nouvelles valeurs:
Pièce jointe 643453

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:

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:

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.

05/09/2023, 18h03
NoSmoking

Bonjour,
peut-être une soucis avec le cache !
08/09/2023, 13h15
Popinho

Bonjour,

Merci pour l'info, j'y avais pensé et ajouté la ligne suivante dans le HEAD mais sans succès:

Code:

<meta http-equiv='pragma' content='no-cache'>

Avez-vous une idée de comment supprimer le cache ?
14/09/2023, 12h00
NoSmoking

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

↪ Fetch method : Cache-mode
.
19/09/2023, 13h19
Popinho

Merci, je vais regarder.