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 : 109
Taille : 36,9 Ko

Nom : 01.png
Affichages : 109
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 : 110
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