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.

[Henry22]

Salut,

Merci pour ton retour.

Du coup, j'ai mis à jour le controller comme tu me l'as indiqué et j'ai tout de même laissé le champs data avec la valeur en cours.

J'aimerais déjà faire fonctionner le code avec le timer et ensuite je ferai comme tu m'as dit avec la méthode améliorée en comparant la valeur avec ce qu'il y a en BDD.

Par contre, le code ne fonctionne toujours pas. Ça fait comme tout à l'heure, c'est à dire que seul la variable apparaît sur la page et elle ne se met pas à jour toutes les 5 secondes.

Je pense qu'il y a quelque chose que je ne fais pas. De même, je pense également que je rajouterai à la fin la vérification avec le XMLHttpRequest afin que cela soit plus propre.

J'ai maintenant ça:

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 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
		$response = new Response(json_encode($nombreObjets));
		$response->headers->set('Content-Type', 'application/json');
 
		return $response;
    }
}

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: {{nombre_objets}},
			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>

[dukoid]

oups je crois que j'ai fait une pttie erreur

Code :

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

1
2
3
4
 
	setInterval(valueOnline, 5000);    // FAUX
 
	setInterval(valueOnline(), 5000);    // correct      et oui n'oublions pas les parenthèses sinon ça fera pas d'appel à la fonction

et je crois que : valueOnline(); ne sert à rien puisqu'il est appelé dans : setInterval(valueOnline(), 5000);

désolé je travail sur plusieurs trucs à la fois


ensuite passons aux debuguages.
j'utilise firebug sur firefox, une extension. (mais il existe une version equivalente sans installation d'extension sur chrome mais bon je ne suis pas habitué)

sous firebug tu va dans l'onglet reseau
(si jamais fait, il y aura surement une option activer ce que tu va faire)

ensuite tu rafraichis la page F5
toute une liste de requetes apparaient

tu fais effacer et tu vois si une requete se créé toutes les 5 secondes.
ensuite si la requete apparait en rouge c'est qu'il y a une erreur.
tu clique sur le (+) de la requete et tu va dans l'onglet REPONSE

dans cet onglet il y a HTML ou pas et tu peux voir quelle erreur a été émis ?

[Henry22]

Re,

Comme t'as dit, j'ai corrigé ma vue et j'ai supprimé du coup le valueOnline() qui était en trop.

Code :

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

1
2
3
4
 
...
setInterval(valueOnline(), 5000);    // toutes les 5 secondes
...

Du coup, je suis passé au debugguage avec Firebug, je suis allé dans l'onglet réseau, j'ai supprimé ce qu'il y avait et j'ai fait un F5.

Ensuite, j'ai vu que seulement une requête s'était crée et qu'ensuite en attendant plus de 5 secondes plus rien.

J'ai tout de même regardé le contenu response du GET et il y avait juste la valeur qu'il y avait en BDD, pour le champs nombre_objets, c'est à dire 6.

Dans la seul requête que j'ai, j'ai ça:

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
 
REPONSE
 
Cache-Control	
no-cache
Connection	
Keep-Alive
Content-Type	
application/json
Date	
Tue, 08 Dec 2015 13:51:37 GMT
Keep-Alive	
timeout=5, max=100
Server	
Apache/2.4.9 (Win32) PHP/5.5.12
Transfer-Encoding	
chunked
X-Debug-Token	
a6f8c5
X-Powered-By	
PHP/5.5.12
voir le code source
 
REQUETE
 
Accept	
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding	
gzip, deflate
Accept-Language	
fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Cache-Control	
max-age=0
Connection	
keep-alive
Host	
localhost
User-Agent	
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0

Il y a effectivement un soucis.

[dukoid]

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 n=0;
	var valueOnline = function()
	{
$("#nbobjets").append(n++);
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: {{nombre_objets}},
			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>

toutes les 5 secondes ton div se remplie ?

[Henry22]

Entre temps, t'as modifié ton message. Je teste.

[Henry22]

Donc j'ai mis exactement ton code pour la vue:

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 n=0;
	var valueOnline = function()
	{
		$("#nbobjets").append(n++);
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: {{nombre_objets}},
			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>

Il ne se passe rien. Ça fait comme tout à l'heure.

D'ailleurs, dans le div d'id "nbobjets", on ne devrait même rien mettre à priori.

J'ai même essayé en laissant le div vide. J'ai même lancé Firebug et rien du tout. C'est vraiment bizarre.

Il y a peut être une erreur dans le contrôleur. D'ailleurs, je me demande s'il faut faire le lien entre la variable nombre_objets et le contrôleur quelque part.

[dukoid]

tu n'as pas d'erreur dans console de firebug ?
tu as bien chargé jQuery ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
$(document).ready(function()
{ 
	var valueOnline = function()
	{
		$("#nbobjets").append("*");
	}
	setInterval(valueOnline(), 5000);    // toutes les 5 secondes
});
</script>

et ça ? au moins ça tourne ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
<script type="text/javascript">
$(document).ready(function()
{ 
	function valueOnline()
	{
		$("#nbobjets").append("*");
	}
	setInterval(valueOnline(), 5000);    // toutes les 5 secondes
});
</script>

et comme ça ?

[Henry22]

Effectivement, j'avais oublié de faire les import JQuery.

Du coup, j'ai modifié le base de app:

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
	        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	    	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        {% endblock %}
    </body>
</html>

Pour la vue, j'obtiens ça avec une de tes deux méthodes:

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
 
{% extends "::base.html.twig" %}
 
{% block javascripts %}
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets"></div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	function valueOnline()
	{
		$("#nbobjets").append("*");
	}
	setInterval(valueOnline(), 5000);    // toutes les 5 secondes
});
</script>
{% endblock %}

Par contre, cela ne fonctionne toujours pas. Au moins, les imports sont là.

[Henry22]

Ah oui. Dans console de firefug, je n'ai rien.

Personnellement, je ne vois pas du tout, d'où pourrait provenir le problème.

Si tu penses que la vue est ok, il doit y avoir quelque chose qui cloche ailleurs.

[dukoid]

avec une fonction, ça fonctionne bien :

Code :

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

1
2
3
4
5
6
7
8
 
            function valueOnline()
            {
                $("#nbobjets").append("*");
            }
            setInterval(function(){ valueOnline(); }, 3000);
// OU
            setInterval("valueOnline()", 3000);

et sous forme de variable, ça fonctionne bien aussi.

Code :

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

1
2
3
4
5
6
7
8
 
var valueOnline = function()
	{
		$("#nbobjets").append("*");
	}
            setInterval(function(){ valueOnline(); }, 3000);
// OU
            setInterval("valueOnline()", 3000);

j'ai testé et j'approuve ces 2 méthodes.

[Henry22]

Yes! C'est bon Dukoid, j'ai réussi à faire marcher ton exemple avec les étoiles.

Pourquoi, ça ne marchait pas, c'est parce je n'avais pas mis {{ parent() }} dans le twig, du coup je ne prenais pas en compte les import JavaScript dont j'avais besoin.

Dès que je réussi à faire marcher mon programme principale avec le nombre d'objets du coffre, je te tiens au courant.

[Henry22]

Re,

Du coup, j'ai essayé de faire marcher le programme principale, mettre à jour la valeur en fonction de ce qu'il y a en BDD mais ça bloque toujours.

Avec Firebug, ll n'y a rien non plus.

Autant seulement les étoiles, ça marchait lorsque je faisais directement dans mon controller un:

Code :

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

1
2
 
return $this->render('AjaxAppliBundle:Principale:affichage-coffre.html.twig');

autant maintenant avec le

Code :

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

1
2
3
4
5
6
7
 
...
//On encode en JSON
$response = new Response(json_encode($nombreObjets));
$response->headers->set('Content-Type', 'application/json');
 
return $response;

en fin de controler, ça ne fonctionne plus.

Je pense qu'il doit y avoir quelque chose qui ne va pas soit dans le controller, soit dans le twig.

Si Dukoid ou une autre personne trouve quelque chose n'hésitez à m'orienter.

Je continue d'investiguer de mon côté.

Voilà, les codes que j'ai pour l'instant:

AjaxController.php

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()
    {
    	//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
		$response = new Response(json_encode($nombreObjets));
		$response->headers->set('Content-Type', 'application/json');
 
		return $response;
    }
}

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
28
29
30
31
32
33
 
{% extends "::base.html.twig" %}
 
{% block title %}Un test AJAX avec Symfony
{% endblock %}
 
{% block javascripts %}
{{ parent() }}
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets"></div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	var valueOnline = function()
	{
		$.ajax(
		{ 
			type: 'GET',
			url: '{{ path('ajax_appli_coffre') }}', 
			data: {{nombre_objets}},
			success: function (data) 
			{ 
				//Id du div contenant la variable nbobjets devant être mis à jour
				$("#nbobjets").html(data);
			} 
		}); 
	}
	setInterval(function(){ valueOnline(); }, 3000);    // toutes les 3 secondes	
});
</script>
{% endblock %}

Pour le routing et l'entity vous les trouverez au tout premier post. Pour le base.html.twig, il faut juste ajouter les import qu'il faut comme indiqué dans mon post de 16H11.

Je vous remercie

[dukoid]

essaye cette simple requête (sans le mettre dans la boucle tempo)

Code :

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

1
2
3
4
5
6
7
8
9
10
            $.ajax({
                type:"POST",
                data: "valeur= {{nombre_objets}} ",
                url:"{{ url('ajax_appli_coffre') }}",
                cache: false,
                success: function( msg ){
                   alert("retour ok");  // un teste de retour
                }
            });

dans le controlleur, la valeur tu le récupère ainsi :

Code :

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

1
2
3
 
...
$valeur = $request->get('valeur')

sous firebug-> reseau >effacer la liste de requêtes
F5 (rafraichir la page pour lancer la requete ajax qui va apparaitre dans reseau)

et analyser la requete POST (si rouge, y'a un problème allez voir la reponse - en HTML)

[Henry22]

Re,

Pour le twig, en mettant plutôt path dans l'url, j'ai ça:

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
28
 
{% extends "::base.html.twig" %}
 
{% block title %}
Un test AJAX avec Symfony
{% endblock %}
 
{% block javascripts %}
{{ parent() }}
<h2>Test de la méthode AJAX</h2>
 
Le coffre contient <div id="nbobjets"></div> objets actuellement.
 
<script type="text/javascript">
$(document).ready(function()
{ 
	$.ajax({
        type:"POST",
        data: "valeur = {{nombre_objets}} ",
        url:"{{ path('ajax_appli_coffre') }}",
        cache: false,
        success: function( msg ){
           alert("retour ok");  // un teste de retour
        }
    });
});
</script>
{% endblock %}

Autant dans les controller, je sais comment utiliser:

Code :

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

1
2
3
4
5
6
7
 
$request = $this->getRequest();
 
$method = $request->getMethod();
 
//afin de faire des conditions if dans ce genre:
$if ($method == "POST") ou éventuellement $if ($method == "GET")

autant, je n'ai pas réellement compris comment je dois utiliser:

Code :

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

1
2
 
$valeur = $request->get('valeur');

Pourrais tu m'expliquer s'il te plaît?