Utiliser Ajax avec Symfony2
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:
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:
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:
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:
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,
