Discussion :

[Henry22]

Bonjour,

J'ai appris le fonctionnement d'Ajax avec du PHP pur notamment grâce au tutoriel de christelle_r présent sur developpez.com:
http://christele.developpez.com/tuto...ajax-en-clair/

Maintenant, j'essaie de l'appliquer avec Symfony mais je n'y arrive pas trop. En effet, je n'ai pas trouvé de tutoriel réellement clair sur internet sur le sujet. Du coup, je suis parti d'un bout de code basique trouvé sur internet dans ce lien:
http://yhaohao.com/questions/4520661/symfony-and-ajax

J'ai regardé le deuxième post. Du coup, j'essaie de crée au moins un petit bout de code avec de l'Ajax qui marche. Pour le moment, ce que j'aimerais faire, c'est une vue affichant une variable qui se met à jour automatiquement dès qu'un enregistrement d'une table en BDD change de valeur. Cette variable prendrait du coup la nouvelle valeur du champ de la table. On suppose par exemple que j'ai une table coffre et un attribut nombre_objets. A chaque fois que l'attribut nombre_objets change de valeur, j'aurais dans ma vue, un texte comme "Le coffre contient {{ nombre_objets }} objets" qui se mettrait à jour. Mon idée serait d'utiliser un timer.

J'ai crée de mon côté une entity Coffre:

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
 
<?php
 
namespace Ajax\AppliBundle\Entity;
 
use Doctrine\ORM\Mapping as ORM;
 
/**
 * Coffre
 *
 * @ORM\Table()
 * @ORM\Entity(repositoryClass="Ajax\AppliBundle\Entity\CoffreRepository")
 */
class Coffre
{
    /**
     * @var integer
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;
 
    /**
     * @var string
     *
     * @ORM\Column(name="nombre_objets", type="string", length=255)
     */
    private $nombreObjets;
 
 
    /**
     * Get id
     *
     * @return integer 
     */
    public function getId()
    {
        return $this->id;
    }
 
    /**
     * Set nombreObjets
     *
     * @param string $nombreObjets
     * @return Coffre
     */
    public function setNombreObjets($nombreObjets)
    {
        $this->nombreObjets = $nombreObjets;
 
        return $this;
    }
 
    /**
     * Get nombreObjets
     *
     * @return string 
     */
    public function getNombreObjets()
    {
        return $this->nombreObjets;
    }
}

Du coup, en me basant sur le lien, j'ai crée un controller AjaxController. J'ai recopié en changeant les noms des variables.
Par contre, le début de la fonction doit être changé notamment le $id = $request->get('id');. Mais je ne sais pas comment le faire étant donnée qu'on récupérerait la valeur en base de donnée au moment d'un éventuel changement de valeur du champs.

AjaxController:

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
 
<?php
 
namespace Ajax\AppliBundle\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
 
class AjaxController extends Controller
{
    public function nombreObjetsAction()
    {
		$request = $this->getRequest();
 
		$id = $request->get('id');
 
		//On récupère l'entityManager
		$em = $this->getDoctrine()->getManager();
 
		//On récupère le repository de Coffre
		$repositoryCoffre = $em->getRepository('AjaxAppliBundle:Coffre');
 
		//On récupère la valeur du champs nombres_objets
		$nombreObjets = repositoryCoffre->find($id);
 
		//On encode en JSON
		$nombreObjetsJson = json_encode($nombreObjets);
 
		return new Response($nombreObjetsJson);
    }
}

J'ai repris la vue en ajoutant les balises script manquantes, un titre ainsi qu'un div qui contiendrait la nouvelle valeur de nombre_objets. De même, j'ai ajouté dans le javascript, type:'GET'.

affichage-coffre.html.twig:

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
 
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets">{{nombre_objets}}</div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	$.ajax(
	{ 
		type: 'GET',
		url: '{{ path('ajax_appli_coffre') }}', 
		data: id, 
		success: function (response) 
		{ 
			//something
		} 
	}); 
});
</script>

Ensuite, j'ai ajouté dans le fichier routing:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
ajax_appli_coffre: 
    path:     /coffre
    defaults: { _controller: AjaxAppliBundle:Ajax:nombreObjets }

Pouvez-vous m'orienter afin que je puisse rendre ce code fonctionnel?

Je vous remercie par avance,

[dukoid]

j'ai jeté un coup d'oeil vite fait et cela me semble bien.

te manque juste le chrono, tous les x temps il va interroger la base pour mettre à jour la valeur de la vue, exemple :

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
<script>
  $(document).ready(function(){
    var valueOnline= function(){
      $.ajax({
        url:{{ url('valueOnline') }},
        success:function(data){
          $("#id-xxxxx").html(data);
        }
      });
    }
    setInterval(valueOnline, 5000);    // toutes les 5 secondes

    setInterval(valueOnline(), 5000);    // toutes les 5 secondes
 });
</script>

la méthode ajax est la plus simple mais il y a un inconvénient, si tu as 500 internautes connectés en même temps tu va avoir toutes les 5 secondes 500 requêtes qui arrivent pour interroger la base.

Le mieux mais c'est d'un niveau de programmation plus élevés est d'utiliser les Listeners, uniquement à chaque modif de la valeur en base on envois la requête...

[Henry22]

Salut Dukoid,

J'ai vu que tu avais modifié un petit peu mon code JavaScript. Est ce que tu pourrais m'expliquer pourquoi tu as par exemple modifié cette ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
url: '{{ path('ajax_appli_accueil') }}',

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
url:{{ url('valueOnline') }},

En effet, j'apprends le JavaScript en même et je ne le maîtrise pas très bien.

En suivant tes conseils, j'ai fait quelques mise à jour.

Mon controller AjaxController:

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
 
class AjaxController extends Controller
{
    public function nombreObjetsAction()
    {
		//On récupère l'entityManager
		$em = $this->getDoctrine()->getManager();
 
		//On récupère le repository de Coffre
		$repositoryCoffre = $em->getRepository('AjaxAppliBundle:Coffre');
 
		//On récupère le coffre que l'on souhaite (1er enregistrement de la table)
		$coffre = $repositoryCoffre->find(1);
 
		//On récupère le nombre d'objets contenus dans le coffre
		$nombreObjets = $coffre->getNombreObjets();
 
		//On encode en JSON
		$nombreObjetsJson = json_encode($nombreObjets);
 
		return new Response($nombreObjetsJson);
    }
}

J'ai mis à jour mon twig affichage-coffre.html.twig:

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
 
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets">{{nombre_objets}}</div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	var valueOnline = function()
	{
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: id, 
			success: function (data) 
			{ 
				//Id du div contenant la variable nbobjets devant être mis à jour
				$("#nbobjets").html(data);
			} 
		}); 
	}
	setInterval(valueOnline, 5000);    // toutes les 5 secondes
});
</script>

J'ai gardé mon routing comme il était:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
ajax_appli_coffre: 
    path:     /coffre
    defaults: { _controller: AjaxAppliBundle:Ajax:nombreObjets }

Par contre, je n'obtiens pas le résultat escompté. Je pense qu'il y a une erreur quelque part
dans le code JavaScript. En tout cas, lorsque je lance:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
http://localhost/ajaxappli/app_dev.php/coffre

J'obtiens uniquement la valeur du champs nombre_objets de la table Coffre:
"3".

De même, la valeur ne se met pas à jour toutes les 5 secondes après qu'une modification de la valeur ait été faite directement en BDD.

Pourrais-tu m'aider à trouver l'erreur dans mon code?

Je te remercie par avance

[dukoid]

concernant les noms de variables, d'url etc... je les mets un peu au hasard, je vous laisse le soin d'adapter comme bon vous semble.


Comme tu as pu le voir la fonction est inclus dans une variable mais bien sur , il faut faire appel à la variable fonction pour l’exécuter :

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
$(document).ready(function()
{ 
	var valueOnline = function()
	{
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: id, 
			success: function (data) 
			{ 
				//Id du div contenant la variable nbobjets devant être mis à jour
				$("#nbobjets").html(data);
			} 
		}); 
	}
	setInterval(valueOnline(), 5000);    // toutes les 5 secondes

        valueOnline();                //  exécuter la fonction de la variable, pour cela il faut ajouter   () à la variable
});
</script>

[Henry22]

Salut,

J'ai ajouté l'appel valueOnline();. Par contre, il y a un soucis car même en commentant le JavaScript, j'ai exactement la même chose.

Du coup, j'ai remarqué que mon controller n'est pas bon car je fais un return Response, comme ça avait été fait dans le lien avec le code basique.
J'avais pas fait attention à ça.

De même, j'avais laissé dans le code JavaScript, un data:id mais je ne sais pas réellement à quoi ça correspond et comment ça fonctionne.

Pourrais tu m'aiguiller pour faire la fin du controller et également m'indiquer la fonction principal du champs data:id dans le JavaScript.

Rappel:

AjaxController:

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
 
<?php
 
namespace AjaxAppliBundle\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
 
class AjaxController extends Controller
{
    public function nombreObjetsAction()
    {
		//On récupère l'entityManager
		$em = $this->getDoctrine()->getManager();
 
		//On récupère le repository de Coffre
		$repositoryCoffre = $em->getRepository('AjaxAppliBundle:Coffre');
 
		//On récupère le coffre que l'on souhaite (1er enregistrement de la table)
		$coffre = $repositoryCoffre->find(1);
 
		//On récupère le nombre d'objets contenus dans le coffre
		$nombreObjets = $coffre->getNombreObjets();
 
		//On encode en JSON
		$nombreObjetsJson = json_encode($nombreObjets);
 
		return new Response($nombreObjetsJson);
    }
}

affichage-coffre.html.twig

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
 
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets">{{nombre_objets}}</div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	var valueOnline = function()
	{
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: id, 
			success: function (data) 
			{ 
				//Id du div contenant la variable nbobjets devant être mis à jour
				$("#nbobjets").html(data);
			} 
		}); 
	}
	setInterval(valueOnline, 5000);    // toutes les 5 secondes
});
 
valueOnline(); //Exécute la fonction
</script>

Je te remercie encore

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
                    use Symfony\Component\HttpFoundation\Response;
 
 
...
                    $response = new Response(json_encode($msg));
                    $response->headers->set('Content-Type', 'application/json');
                    return $response;
...

data:id

je ne l'avais pas vu mais il ne sert à rien. dans data: tu indiques une information à envoyer mais vu qu'on en envois aucune on veux juste récupérer une valeur alors il ne sert plus à rien.


mais..... on peux en profiter pour améliorer le truc.

1. dans data: value (on met la valeur qui est afficher dans le navigateur cad la valeur en cours)
2. le controleur reçois la requete, va chercher la valeur en base
si la valeur en base est différent de la valeur reçu (celui du navigateur) alors on envois la responses ajax avec la nouvelle valeur
si la valeur en base est égal à la valeur reçu alors on ne fait rien (pas la peine d'envoyer la même valeur)

tout ça pour éviter l'envois d'une requête.