Bonjour à tous

j'ai une requête ajax qui fait une requête qui me rend un json. Jusque là tout est ok.

Mais quand le message indique qu'il y a une erreur (dans le cadre de ma requête il s'agit d'un nom déjà utiliser), je souhaiterai que l'utilisateur ait un message le lui indiquant.

Des images pour comprendre,

formulaire de base vide :

formulaire après une requête ajax annonçant un problème :

le bout de fichier twig avec la partie concernée :

    <div  class="row container">
        <div class="row">
            <div class="col s10 offset-s1">
                <div class="card blue-grey darken-1">
                    <div class="card-content white-text">
                        <span class="card-title"><i class="material-icons">report_problem</i>  Attention</span>
                        <p>Les champs marqués avec une <span class="option">*</span> sont facultatifs</p>
                    </div>
                </div>
            </div>
            {% if message is defined %}
                <div  class="col s10 offset-s1">
                     {#Si c'est une erreur #}
                    {% if message.etat == "ko" %}
                    <div class="card red darken-1">
                        {% else %}
                        <div class="card green darken-1">
                            {% endif %}
                            <div class="card-content white-text">
                                <span id="message" class="card-title">Message</span>
                                {{ message.retour }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

La requête Ajax qui s'occupe de tout ça :

/**
 * Requête Ajax : Permettant le controle du nom de l'automate dans l'input
 * de façon interactive
 */
function checkNameAuto() {

    // Recupération de l'input id=nom
    var inputName = document.getElementById('nom');

    // On attend que l'input perde le focus
    inputName.onblur = function (e) {

        //on récupère la valeur de l'input
        var name = inputName.value;
        //console.log(name);

        
        //on effectue la requête ajax
        $.ajax({
            type: "GET",
            url: "/administration/table/automates/form/checkName",
            data: {
                nom: name
            },
            datatype: "json",
            success: messageDisplay,
            error: messageDisplay
        })


        function messageDisplay(data) {
            //console.log(data);
            console.log(data.responseJSON);

            if (data.responseJSON !== undefined){
                var jsonData = data.responseJSON; //si ko
                //var jsonData = data; // si ok

// à partir d'ici ça ne fonctionne pas
                $message = true;
                $('#message').textContent = jsonData.retour;
            }


        }

    }
}

Il me manque vraiment plus que le lien pour que la partie de l'encart rouge s'enclenche et affiche le message d'erreur.

Ca fait une semaine que je galère dessus, j'ai essayé plein de chose, mais rien ne marche comme il faut.

Toutefois, je sais que la ligne

$('#message').html(jsonData.retour);

retourne bien mon message, et j'ai bien mon objet json dans ma réponse http.

Merci d'avance

EDIT:

Pour information si ça intéresse quelqu'un.

J'ai trouvé une réponse ici : https://openclassrooms.com/forum/sujet/ajax-garder-la-valeur-du-champ-apres-une-requete#message-93634192

-
Edité par Pitchounvivi 23 janvier 2020 à 14:47:46