Ajax : Mettre à jour une div de index.phtml

Version imprimable

11/11/2010, 19h12
arsene555

Ajax : Mettre à jour une div de index.phtml

Bonjour,

Je souhaite mettre à jour une div se trouvant dans mon index.phtml.

Pour ce faire, je dois prendre en compte le résultat d'un calcul fait côté serveur dans l'action imc de mon controleur index.

Je ne sais pas si ZF se suffit à lui seul pour mettre en oeuvre ajax ou si je dois utiliser en combinaison les fonctions ajax d'un framework javascript (ce que je sais faire).

J'ai lu la doc sur les contextswitch, ajaxcontext, l'aide de vue action et tenté ça :

Code:

$('#idImc')[0].innerHTML = <?php echo $this->action('imc', 'index', null, array('format' => 'html')); ?>;

Que dire ? Je suis "embrouillé". Je ne vois toujours pas comment démarcher.

Voici mon fichier index.phtml :

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
 
<script type='text/javascript' src="scripts/jquery143.js"></script>
<script type='text/javascript' src="scripts/calc-selector.js"></script>
 
 
<input type="button" name="calculer" value="Tester" onClick="tester();">
 
<form name="calculateurimc" method="post" action="Index/imc">
	<table width="400px" height="91px">
		<tbody>
 
         <tr>
				<td width="400" valign="top" align="center" rowspan="1" colspan="3">
					<h1>Calculateur IMC</h1>
				</td>
			</tr>
 
         <tr>
				<td width="400" valign="top" align="center">
					Taille (en cm) : <input type="text" maxlength="5" size="5" name="taille">
				</td>
 
            <td width="400" valign="top" align="center">
					Poids : <input type="text" maxlength="5" size="5" name="poids">
				</td>
			</tr>
 
			<tr>
				<td width="400" valign="top" align="right" rowspan="1" colspan="3">
					<input type="submit" name="calculer" value="Calculer IMC">
				</td>
			</tr>
 
			<tr>
            <td width="400" valign="top" align="center" id="idImc">
					<!--Imc : <input type="text" maxlength="5" size="5" name="imc">-->
				</td>
			</tr>
 
		</tbody>
	</table>
</form>

Mon fichier calc-selector.js :

Code:

1
2
3
4
5
6
 
function tester()
{
   //$('#idImc').html('../../application/views/scripts/index/imc');   
   $('#idImc')[0].innerHTML = <?php echo $this->action('imc', 'index', null); ?>;
}

Mon fichier imc.phtml :

Code:

1
2
3
4
5
6
 
 
<?php
//echo "test";
echo $this->escape($this->result);
?>

Et enfin mon fichier IndexController :

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
 
class IndexController extends Zend_Controller_Action
{
    private $calc;
 
    public function init()
    {
        /* Initialize action controller here */
 
      //$ajaxContext = $this->_helper->getHelper('AjaxContext');
	   //$ajaxContext->addActionContext('imc', 'json')
	               //->initContext();
 
    }
 
    public function indexAction()
    {
        // action body
 
    }
 
    public function imcAction()
    {
      $taille = $this->_request->getPost('taille');
      $poids = $this->_request->getPost('poids');
 
      $imc = $this->calc->imc($taille, $poids);
 
      $this->view->result = $imc;
      $this->view->taille = $taille;
      $this->view->poids = $poids;
      //$this->view->imc = $imc;
 
      //echo "imcAction";
    }
 
    public function preDispatch()
    {
		parent::preDispatch();
 
      $this->calc = new Perso_CalculateurImc();
	 }
}

L'aide de vue action appeler dans la fonction tester de mon fichier calc-selector.js est censé me renvoyer le résultat du script "imc.phtml" sous forme de chaine de caractère. Non ?!

Parce que là, j'ai l'impression que le script de vue imc.phtml n'est même pas appelé.

J'ai vu sur le web pas mal de façons différentes de mettre en oeuvre ajax sous ZF et je suppose que les façons de faire son fonction des versions de ZF. Bref je ne m'en sors pas. :?

Bonjour,

Perso j'utilise le framework JQuery et dans ton cas $.ajax (...), mais ce n'est pas la question.

Du coté serveur tu peux soit retourner à ta requête Ajax du HTML dans ce cas dans ton action du controller il faut désactiver le layout pour ne renvoyer que la vue concerné pas l'action appelé.
Code:

1 2 3 4 if($this->_request->isXmlHttpRequest()){ $this->_helper->layout->disableLayout(); }
Ou soit retourner à ta requête AJAX le format JSON, la vue n'est pas nécessaire dans ce cas.
Code:

1 2 3 4 5 6 7 if($this->_request->isXmlHttpRequest()){ $this->_helper->layout->disableLayout(); $dataToSend = array(); $this->_helper->json($dataToSend , array( 'enableJsonExprFinder' => true )); }

15/11/2010, 18h14
arsene555

Bonjour freeseb,

ajaxcontext est justement prévu pour désactiver les layouts.

Donc je vais essayer d'utiliser au mieux les possibilités qu'offre ZF. :mrgreen:

Bon je pense que je dois suivre la piste ajaxcontext.

Voici mon controleur :

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
 
class IndexController extends Zend_Controller_Action
{
    private $calc;
 
    public function init()
    {
        /* Initialize action controller here */
 
      $ajaxContext = $this->_helper->getHelper('AjaxContext');
	   $ajaxContext->addActionContext('imc', 'html')
	               ->initContext();
 
    }
 
    public function indexAction()
    {
        // action body
 
    }
 
    public function imcAction()
    {
        // action body
 
      //$plantage = 8/0;
 
      $taille = $this->_request->getPost('taille');
      $poids = $this->_request->getPost('poids');
 
      $imc = $this->calc->imc($taille, $poids);
 
      $this->view->result = $imc;
      $this->view->taille = $taille;
      $this->view->poids = $poids;
      //$this->view->imc = $imc;
 
      //echo "imcAction";
    }
 
    public function preDispatch()
    {
		parent::preDispatch();
 
      $this->calc = new Perso_CalculateurImc();
	 }
}

Et voilà mon appel ajax (avec jquery) :

Code:

1
2
3
4
5
6
7
8
9
$.ajax(
      { // $.get n'est qu'une abbréviation de $.ajax avec des options de bases
          url: '/index/imc/format/html',
          type: "GET",
          dataType: "html",
          //data: {idParam: 4},
          success: tester_rep
      }
   );

Comme vous pouvez le voir, je tente d'appeler l'action imcAction de mon controleur indexController.

Et j'obtiens l'erreur suivante :

Citation:

http://localhost/index/imc/format/html not found

Pourtant, dans les exemples que j'ai lu, les appels d'actions se font avec des url de ce format. :(

26/11/2010, 11h53
arsene555

Problème d'url de baseurl

Bon, ok !

Après avoir lu plusieurs codes, je vois que ma façon de procéder semble assez familière.

Puis pour que l'url soit trouvée je dois la faire précéder de baseurl.

Cela résoud mon problème sans que je comprenne vraiment pourquoi étant donné le contenu de baseurl. Mais j'ai préfèré vous en dire plus dans un autre sujet puisqu'il s'agit donc d'un problème d'url - ce que le titre de ce sujet n'indique pas.

Rendez-vous donc ici :

http://www.developpez.net/forums/d10...l/#post5617732

;)