11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème AJAX

Bonjour tout le monde,

Tout d'abords, je tiens à vous dire que je débute totalement dans le JS donc l'ajax par la même occasion.
Mon projet est en PHP avec comme Framework Symfony2.
J'aimerais tout simplement faire une vérification en base si lors de la création d'un compte, que le pseudo n'existe pas déjà.

Mon twig est comme ceci :

{% extends "MainBundle:Layout:layout.html.twig" %}

{% block title %} {{ titre ~ ' - ' ~ parent() }} {% endblock %}

{% block js %}
    {{ parent() }}
    <script src="{{ asset('js/connexion.js') }}" type="text/javascript"></script>
{% endblock %}

{% block contenu %}
    <h2>{{ titre }}</h2>
    <div id="formulaireAjoutCompte">
        {{ form_start(oForm, {'attr': {'class': 'form-horizontal', 'role': 'form'} }) }}
        {{ form_row(oForm.username) }}
        {{ form_row(oForm.plainPassword) }}
        {{ form_row(oForm.email) }}
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
                <input type="submit" value="Valider" class="btn btn-primary" id="btnValiderAjoutCompte"/>
                <a href="{{ path('accueil') }}" class="btn btn-danger" role="button">Annuler</a>
            </div>
        </div>
        {{ form_end(oForm) }}
    </div>
{% endblock %}


mon script :

$(document).ready(function() {
    $("#compte_username").change(function() {
        var usr = $("#compte_username").val();
        if (usr.length >= 4)
        {
            $("#status").html('<img src="../../images/loader.gif" align="absmiddle">&nbsp;Check la validité...');
            $.ajax({
                type: "POST",
                url: "check",
                data: "username=" + usr,
                success: function(msg) {
                    alert('tata');
                    $("#status").ajaxComplete(function(event, request, settings) {
                        if (msg == 'OK')
                        {
                            $("#compte_username").addClass("object_ok");
                            $(this).html('&nbsp;<img src="../../images/tick.gif" align="absmiddle">');
                        }
                        else
                        {
                            $("#compte_username").addClass("object_error");
                            $(this).html(msg);
                        }
                    });
                }
            });
        }
        else
        {
            $("#status").html('<font color="red">Le pseudo doit être suppérieur à <strong>4</strong> caractères.</font>');
            $("#compte_username").addClass("object_error");
        }
    });
});



et dans mon contrôleur, j'ai ceci :

 /**
     * @Route("/check", name="check")
     * Return a ajax response
     */
    public function checkAction() {
        if (isSet($_POST['username'])) {
            $oUtilisateurRepository = $this->getDoctrine()->getManager()->getRepository('MainBundle:Utilisateur');
            /* @var $oUtilisateurRepository UtilisateurRepository */
            $toUtilisateur = $oUtilisateurRepository->findAll();
            $username = $_POST['username'];
            $usernames = array();
            $i = 0;
            /* @var $usernames array */
            foreach ($toUtilisateur as $oUtilisateur) {
                $usernames[$i] = $oUtilisateur->getUsername();
                $i++;
            }
            $retour = NULL;
            if (in_array($username, $usernames)) {
                $retour = '<font color="red">Le pseudo <STRONG>' . $username . '</STRONG> est déjà utilisé.</font>';
            } else {
                $retour = 'OK';
            }
        }
        $response = new Response(json_encode($retour));
        return new Response($response, 200, array('Content-Type' => 'application/json'));
    }



Il me renvoi bien la bonne réponse :

HTTP/1.0 200 OK
Cache-Control: no-cache
Date: Wed, 14 May 2014 14:41:02 GMT
"OK"


ou :


HTTP/1.0 200 OK
Cache-Control: no-cache
Date: Wed, 14 May 2014 14:55:27 GMT
"<font color=\"red\">Le pseudo <STRONG>Dragoos<\/STRONG> est d\u00e9j\u00e0 utilis\u00e9.<\/font>"

Mais cela ne change rien sur mon affichage :
upload/54414-CreationCo.PNG

mon 
alert('tata');
qui se trouve à la ligne 12 de mon JavaScript ne s'affiche jamais

Merci à vous Smiley smile
Modifié par Dragoos (15 May 2014 - 20:52)
nef1912 a écrit :
Bonjour,

A quoi correspond tata ?


Absolument à rien, cela me sert juste pour des tests à voir si mon retour est en success ou pas, mais l'appel à cette fonction n'est jamais déclencher d'où mon problème Smiley ohwell
si alert('tata') ne fonctionne pas, ça signifie que ton ajax ne passe pas en succes.

Que dit le débuggueur (partie "console, couleur "réseaux" ") de firefox quand tu fais l'action ?
Tu devrais avoir normalement un appel vers ton fichier ajax. Pour que ta fonction en success agisse, il faut absolument que le code retournée soit un code 200.

Est-ce que seul ton fichier php appelé par l'ajax marche bien ? (pas d'erreur php ou autre) ?


A vue de nez, je dirais que le soucis vient de là : url: "check",

Parce que ça c'est pas une url valide Smiley cligne
Lothindil a écrit :
si alert('tata') ne fonctionne pas, ça signifie que ton ajax ne passe pas en succes.

Que dit le débuggueur (partie &quot;console, couleur &quot;réseaux&quot; &quot;) de firefox quand tu fais l'action ?
Tu devrais avoir normalement un appel vers ton fichier ajax. Pour que ta fonction en success agisse, il faut absolument que le code retournée soit un code 200.

Est-ce que seul ton fichier php appelé par l'ajax marche bien ? (pas d'erreur php ou autre) ?


A vue de nez, je dirais que le soucis vient de là : url: &quot;check&quot;,

Parce que ça c'est pas une url valide Smiley cligne


Le débogueur partie console ne dit absolument rien Smiley ohwell
En partie réseau, voici ce qu'il me donne =>http://www.hostingpics.net/viewer.php?id=801335CrationCompteRseau.png

Comme on peux le voir sur la photo, le retour est en code 200.

Pour l'url : "check", j'ai eu un doute mais au final, sa marche bien du faites que j'arrive quand même à avoir dans mes retours à cet appel de fonction ce que je voulais, c'est à dire :
1. Dans le cas ou le pseudo est disponible
HTTP/1.0 200 OK
Cache-Control: no-cache
Date: Wed, 14 May 2014 14:41:02 GMT
"OK"
ou 2. Dans le cas ou le pseudo est déjà enregistré en base
HTTP/1.0 200 OK
Cache-Control: no-cache
Date: Wed, 14 May 2014 14:55:27 GMT
"<font color=\"red\">Le pseudo <STRONG>Dragoos<\/STRONG> est d\u00e9j\u00e0 utilis\u00e9.<\/font>"
Modifié par Dragoos (15 May 2014 - 14:25)
J'ai avancé grâce à la JsonResponse mais sa marche toujours pas jusqu'au bout, la JsonResponse m'as permis de passer en success.

Je vous met mon new code de la fonction 'check' :

   /**
     * @Route("/check", name="check")
     * Return a ajax response
     */
    public function checkAction(Request $oRequest) {
        if ($oRequest->isXmlHttpRequest()) {
            if (isSet($_POST['username'])) {
                $oUtilisateurRepository = $this->getDoctrine()->getManager()->getRepository('MainBundle:Utilisateur');
                /* @var $oUtilisateurRepository UtilisateurRepository */
                $toUtilisateur = $oUtilisateurRepository->findAll();
                $username = $_POST['username'];
                $usernames = array();
                $i = 0;
                /* @var $usernames array */
                foreach ($toUtilisateur as $oUtilisateur) {
                    $usernames[$i] = $oUtilisateur->getUsername();
                    $i++;
                }
                $retour = NULL;
                if (in_array($username, $usernames)) {
                    $retour = '<font color="red">Le pseudo <STRONG>' . $username . '</STRONG> est déjà utilisé.</font>';
                } else {
                    $retour = 'OK';
                }
                $tRetour = [
                    'success' => true,
                    'msg' => $retour
                ];
                return new JsonResponse($tRetour);
            }
        }
    }


Et mon JS :

$(document).ready(function() {
    $("#compte_username").change(function() {
        var usr = $("#compte_username").val();
        if (usr.length >= 4)
        {
            $("#status").html('<img src="../../images/loader.gif" align="absmiddle">&nbsp;Check la validité...');
            $.ajax({
                type: "POST",
                url: "check",
                data: "username=" + usr,
                success: function(msg) {
                    alert('tata');
                    $("#status").ajaxComplete(function(event, request, settings) {
                        alert('titi');
                        if (msg == 'OK')
                        {
                            $("#compte_username").addClass("object_ok");
                            $(this).html('&nbsp;<img src="../../images/tick.gif" align="absmiddle">');
                        }
                        else
                        {
                            $("#compte_username").addClass("object_error");
                            $(this).html(msg);
                        }
                    });
                }
            });
        }
        else
        {
            $("#status").html('<font color="red">Le pseudo doit être suppérieur à <strong>4</strong> caractères.</font>');
            $("#compte_username").addClass("object_error");
        }
    });
});


Mon alert('tata') ligne 12 du JS s'affiche désormais mais pas le alert('titi') qui se trouve à la ligne 14 du JS.

#status est une balise 
<div id="status"></div>

qui se trouve dans la fonction form_row (qui sert aux twig).
Ton problème ne viendrait-il pas de cela : As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

Smiley murf
Si, cela posait problème ^^.

Voici mon code maintenant, il a un peu changé :

$(document).ready(function() {
    $("#compte_username").change(function() {
        var usr = $("#compte_username").val();
        if (usr.length >= 4)
        {
            $("#status").html('<img src="../../images/loader.gif" align="absmiddle">&nbsp;Check la validité...');
            $.ajax({
                type: "POST",
                url: "check",
                data: "username=" + usr,
                success: function(msg) {
                    alert(msg); // => m'affiche [object Object]
                    if (msg == 'OK')
                    {
                        alert('msg');
                        $("#compte_username").addClass("object_ok");
                        $("#status").html('&nbsp;<img src="../../images/tick.gif" align="absmiddle">');
                    }
                    else
                    {
                        alert('msg2');
                        $("#compte_username").addClass("object_error");
                        $("#status").html(msg);
                    }
                }
            });
        }
        else
        {
            $("#status").html('<font color="red">Le pseudo doit être suppérieur à <strong>4</strong> caractères.</font>');
            $("#compte_username").addClass("object_error");
        }
    });
});


Le soucis qui se pose maintenant est que 'msg' est considéré comme un objet et non un string que je peux directement utilisé.
Alors que 'msg' ne devrait avoir que deux valeurs possibles :
1. '<font color="red">Le pseudo <STRONG>' . $username . '</STRONG> est déjà utilisé.</font>'
2. 'OK'
C'est parce qu'à cause de la fonction "jsonResponse" ton $msg est devenu un objet json et non plus un simple string ^^

Avec un "dataType:json" dans ta fonction ajax, ça donne quoi ?
C'est good, c'est résolu Smiley smile .

Donc finalement sa marche, 'msg' est l'objet retourné par ma fonction check et non ma chaîne de caractère qui se trouve en msg.msg (sa commence à être troublant lol).

Donc je vous poste mon JS final car le php n'as pas du tout changé :

$(document).ready(function() {
    $("#compte_username").change(function() {
        var usr = $("#compte_username").val();
        if (usr.length >= 4)
        {
            $("#status").html('<img src="../../images/loader.gif" align="absmiddle">&nbsp;Check la validité...');
            $.ajax({
                type: "POST",
                url: "check",
                data: "username=" + usr,
                success: function(msg) {
                    if (msg.msg == 'OK')
                    {
                        $("#compte_username").addClass("object_ok");
                        $("#status").html('&nbsp;<img src="../../images/tick.gif" align="absmiddle">');
                    }
                    else
                    {
                        $("#compte_username").addClass("object_error");
                        $("#status").html(msg.msg);
                    }
                }
            });
        }
        else
        {
            $("#status").html('<font color="red">Le pseudo doit être suppérieur à <strong>4</strong> caractères.</font>');
            $("#compte_username").addClass("object_error");
        }
    });
});


Merci à toi Lothindil Smiley smile
Modifié par Dragoos (15 May 2014 - 22:48)
Sujet clos
Aller à