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

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2015
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2015
    Messages : 57
    Points : 51
    Points
    51
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : 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
    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 javascript : 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
     
                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

    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

  2. #2
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 899
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 899
    Points : 3 608
    Points
    3 608
    Par défaut
    Bonjour,

    Que donne un console.log au début de done ? :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     request.done(function (msg) {
       console.log("msg est :",msg);
       ....
    }
    Je pense que tu essaies de traiter le retour comme un "json" alors qu'il ne l'est pas.

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2015
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2015
    Messages : 57
    Points : 51
    Points
    51
    Par défaut
    Bonjour,

    En effet, le message reçu est un tableau vide :
    j'ai donc mis un log sur la valeur des paramètres passés et , surprise, je ne passe pas le bon paramètre.

    Merci pour la piste, c'est ce qui m'a permis de trouver !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Effectuer une condition sur une réponse Ajax
    Par bylka423 dans le forum AJAX
    Réponses: 2
    Dernier message: 14/12/2020, 15h24
  2. Erreur: Cannot read property 'done' of undefined
    Par MInfo25 dans le forum React
    Réponses: 1
    Dernier message: 01/05/2020, 17h43
  3. Erreur Cannot read property 'length' , Ajax Laravel
    Par Zembla dans le forum Laravel
    Réponses: 1
    Dernier message: 30/04/2019, 15h37
  4. Canvas Erreur cannot read property
    Par Koscielski dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 20/03/2019, 12h00
  5. Message d'erreur cannot read property 'box' of undefined"
    Par homeland21 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 08/01/2018, 16h53

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