Ajax : Mettre à jour une div de index.phtml

**arsene555** · 11/11/2010, 19h12

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 :

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

$('#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.

**arsene555** · 11/11/2010, 21h32

Voici mon fichier index.phtml :

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
 
<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 :

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

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 :

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

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

Et enfin mon fichier IndexController :

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
 
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.

**freeseb74** · 12/11/2010, 13h57

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 :

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

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 :

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

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

**arsene555** · 15/11/2010, 18h14

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.

**arsene555** · 15/11/2010, 18h26

Bon je pense que je dois suivre la piste ajaxcontext.

Voici mon controleur :

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
 
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 :

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

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 :

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.

**arsene555** · 26/11/2010, 11h53

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

Ajax : Mettre à jour une div de index.phtml [ZF 1.10]

Zend Framework PHP

Discussions similaires

Partager

Partager