[AJAX] Erreur Cannot read property sur une réponse ajax

Bonjour,

Dans le cadre d'un hébergement en refuge, Je charge une page html et lorsque je clique sur un séjour, je provoque un appel ajax qui va m'afficher les détails de celui-ci.
Depuis cet encart, je peux envoyer un fichier image.
Lorsque je reçois la réponse, je veux appeler une nouvelle fois la fonction ajax qui affiche les détails. Mais lors du second appel j'ai la réponse "Cannot read property" alors qu'il me semble que cette fonction est appelée une nouvelle fois de la même manière.

La fonction d'affichage des détails est logiquement details avec en paramètres l'identifiant et l'emplacement.
La fonction d'envoi de fichier est upload_pic à qui je passe également les paramètres l'identifiant et l'emplacement pour pouvoir invoquer une nouvelle fois details()
Le code html de départ est le suivant :

Code:

1
2
 
<td class="alert-success" colspan="10" style="text-align:center" onclick="details(598,15);">598  Cléo</td>

La fonction details() qui est appelée :

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
75
76
 
            function details(id, room) {
                var request = $.ajax({
                    url: "moredetails.php",
                    method: "POST",
                    data: {id: id, room: room},
                    dataType: "html"
                });
                request.done(function (msg) {                    
                    output = '';
                    proprietaire = '';
                    tproprietaire = '';
                    chat = '';
                    tchat = '';
                    sejour = '';
                    tsejour = '';
                    x = JSON.parse(msg);
                    $("#modtitle").html(x[0]['chat'] + ' | ' + x[0]['debut'] + ' &#x27BD; ' + x[0]['fin'] + ' | <br><span class="btn-danger"> ' + x[0]['status'] + '</span>');
                    tsejour += '&#x1F59D; Chambre: <a href="#" onclick="editit(4,' + x[0]['chroom'] + '); return false;">' + x[0]['room'] + '</a>';
                    tproprietaire += '<a href="#" onclick="editit(3,' + x[0]['id_proprio'] + '); return false;">' + x[0]['prenom'] + ' ' + x[0]['proprio'] + '</a>';
                    proprietaire += '&#x1F59D; Adresse : ' + x[0]['cp'] + ' ' + x[0]['ville'] + '<br>';
                    proprietaire += '&#x1F59D; GSM : ' + x[0]['gsm'] + '<br>';
                    proprietaire += '&#x1F59D; TEL : ' + x[0]['tel'] + '<br>';
                    proprietaire += '&#x1F59D; E-mail : ' + x[0]['email'] + '<br><br>';
                    tchat += '<a href="#" onclick="editit(2,' + x[0]['idcat'] + '); return false;">' + x[0]['chat'] + '</a><span id="statut"></span>';
                    chat += '&#x1F59D; Race: ' + x[0]['race'] + '<br>';
                    chat += '&#x1F59D; Robe: ' + x[0]['robe'] + '<br>';
                    chat += '&#x1F59D; Date de naissance: ' + x[0]['naissance'] + '<br>';
                    chat += '&#x1F59D; Puce: ' + x[0]['identification'] + '<br><br>';
                    chat += '<input type="file" class="hidde" id="up' + x[0]['idcat'] + '" value="Ajouter une photo" onclick="upload_pic(' + x[0]['idcat'] + ',' + room + '); return true; ">'
 
                    chat += '<img src="uploads/' + x[0]['idcat'] + '.jpg" width=50%><br>';
 
                    sejour += '&#x1F59D; Arrivée : <a href="#" onclick="editit(1,' + x[0]['id_stay'] + '); return false;">' + x[0]['debut'] + '</a><br>';
                    sejour += '&#x1F59D; A : ' + x[0]['heurea'] + '<br>';
                    sejour += '&#x1F59D; Départ <a href="#" onclick="editit(1,' + x[0]['id_stay'] + '); return false;">: ' + x[0]['fin'] + '</a><br>';
                    sejour += '&#x1F59D; Vers : ' + x[0]['heuref'] + '<br>';
                    sejour += '&#x1F59D; Prix : ' + x[0]['price'] + '<br>';
                    sejour += '&#x1F59D; Accomptes reçus : ' + x[0]['accomptes'];
                    sejour += ' <a href="add_accompte.php?stay=' + x[0]['id_stay'] + '">Ajouter un accompte</a><br><br>';
                    solde = (x[0]['price'] * 1) - (x[0]['accomptes'] * 1)
 
                    if (solde > 0) {
                        output += '<span class="btn-danger">';
                    }
 
                    output += '&#x1F59D; A payer : ' + solde + '<br><br>';
                    if (solde > 0) {
                        output += '</span>';
                    }
 
                    output += '&#x1F59D; Télécharger le contrat : <a href="https://www.kot.chat/contrat.php?ctrat=' + id + '" target="_blank">format pdf</a><br>';
                    sejour += '&#x1F59D; Annulation : <a href="#" onclick="editit(5,' + x[0]['id_stay'] + '); return false;">Supprimer</a><br>';
                    output += '<div style="border-style: ridge;">';
                    output += '<div id="editor" onblur="content(' + x[0]['idcat'] + ')">';
                    output += '<p class="" id="dossier">' + x[0]['commentaires'] + '</p>';
                    output += '</div>';
                    output += '</div>';
                    $("#details").html(output);
                    $("#proprietaire").html(proprietaire);
                    $("#tproprietaire").html(tproprietaire);
                    $("#chat").html(chat);
                    $("#tchat").html(tchat);
                    $("#sejour").html(sejour);
                    $("#tsejour").html(tsejour);
                    $('#myModal').modal();
                    BalloonEditor
                            .create(document.querySelector('#editor'))
                            .catch(error => {
                                console.error(error);
                            });
                });
                request.fail(function (jqXHR, textStatus) {
                    alert("Request failed: " + textStatus);
                });
            }

et la fonction upload_pic

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
            function upload_pic(id,room) {
                var fileInput = document.querySelector('#up' + id);
 
 
                fileInput.onchange = function () {
 
                    var xhr = new getXMLHttpRequest();
                    xhr.open('POST', 'pic_upload.php?q=' + id);
                    xhr.upload.onprogress = function (e) {
                    };
                    xhr.onload = function () {
                        $('#statut').text(' UPDATED') 
                        details(id,room);  // recharger la page des détails avec l'image envoyée
 
                    };
                    var form = new FormData();
                    form.append('up' + id, fileInput.files[0]);
                    xhr.send(form);
                };
            }

L'erreur n'apparaît que lors du second appel à la fonction. Le premier appel depuis le code html fonctionne parfaitement.

L'erreur complète reçue est la suivante

Citation:

TypeError: Cannot read property 'chat' of undefined
at Object.<anonymous> (emergency.php:160)
at fire (jquery.min.js:3317)
at Object.fireWith [as resolveWith] (jquery.min.js:3447)
at done (jquery.min.js:9272)
at XMLHttpRequest.<anonymous> (jquery.min.js:9514)
(anonymous) @ emergency.php:160
fire @ jquery.min.js:3317
fireWith @ jquery.min.js:3447
done @ jquery.min.js:9272
(anonymous) @ jquery.min.js:9514
load (async)
send @ jquery.min.js:9533
ajax @ jquery.min.js:9173
e.ajax @ jquery-migrate-3.0.1.min.js:80
details @ emergency.php:145
xhr.onload @ emergency.php:132
load (async)
fileInput.onchange @ emergency.php:130