Discussion :

[absot]

Bonjour, j'ai créé un formulaire Zend et je souhaiterais valider celui-ci avec l'aide de l'Ajax.

Pour faire cela, j'ai d'abord précisé dans ma méthode init de mon contrôleur, les actions qui sont susceptibles d'utiliser de l'Ajax en faisant ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 public function init()
    {
    	$ajaxContext = $this->_helper->getHelper('AjaxContext');
        $ajaxContext->addActionContext('index', 'html')
                    ->addActionContext('add', array('html', 'json'))
                    ->initContext();
 
    	if ($this->_request->isXmlHttpRequest())
        {
        	$this->_helper->layout->disableLayout();
        }
	}

Dans mon formulaire, j'ai rajouté un attribut onclick à mon bouton submit qui appel une fonction javascript:

Code :

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

1
2
3
4
5
 
$send = new Zend_Form_Element_Submit('send');
		$send->setLabel('Envoyer')
			 ->setAttrib('id', 'send')
			 ->setAttrib('onclick', 'return submitForm();');

Voici ce que fait ma méthode javascript appellée:

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
 
function submitForm()
{
	alert("coucou");
	$.ajax(
	{
		   url: 'index/add',
	       type: "POST",
	       context: document.ajax,
	       data: {
				"format" : "html",
 
				"nom" : document.getElementById("nom").value,
				"prenom" : document.getElementById("prenom").value
				},
	       error: errorAjax,
		   dataType: "text",
		   success: function(data)
		   {
			$("#ajax").html(data);
		   }
	});
}

Et je récupère bien entendu tout ceci dans mon action appelée qui est add():

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
 
public function addAction() 
    {
    	$form = new Application_Form_User();
 
    	if ($this->_request->isXmlHttpRequest())
        {
        	if($this->getRequest()->isPost())
    		{
	    		// si contexte JSON
    			/*if($this->ajaxContext->getCurrentContext() == 'json') 
    			{
    				$this->view->result = $form->processAjax($this->request->getPost());
    			}*/
 
    			$formData = $this->getRequest()->getPost();
				if ($form->isValid($formData))
				{
					$tableau = array();
					$tableau["nom"] = $this->_getParam("nom");
					$tableau["prenom"] = $this->_getParam("prenom");
 
					$user = new Application_Model_DbTable_Users;
					$user->addUser($tableau);
				}else 
				{
					$form->populate($formData);
				}
 
        	}
        }
    	$this->view->form = $form;
    }

Le problème dans tout ceci est quand je clique sur mon bouton submit de mon formulaire, j'ai bien ma popup avec "coucou" qui apparaît et c'est tout, puis ma page se rafraîchit alors qu'elle ne devrait pas mais je ne sais pas pourquoi.. :/

Comment ca se fait svp?

[Celira]

Un bouton submit envoie toujours la formulaire, sauf si tu lui indiques explicitement.
Pour éviter la soumission du formulaire, soit tu utilises un bouton button et non un submit, soit tu précises dans ta fonction js de ne pas envoyer le formulaire en faisant un return false;Ensuite pour "pister" ton ajax, tu peux utiliser des choses comme la console de firebug.

[absot]

J'ai rajouté un return false à ma fonction js mais ca ne change rien, ca continue de recharger ma page automatiquement, j'ai ajouté un alert("ok"); dans ma fonction js en cas de succès mais ça ne s'affiche pas et ça n'appel pas non plus ma function errorajax en cas d'erreur, comment ca se fait?

[5h4rk]

Donne nous le code modifié

[absot]

Désolé de ne répondre que maintenant mais j'ai été occupé ces derniers temps.

J'ai fais des tests en enlevant les décorateurs et en mettant ceux que je veux, j'ai réussi à obtenir ce que je voulais, je mets à disposition mon code:

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
66
67
68
69
70
71
 
<?php
 
class form extends Zend_Form
{
	public function __construct($options = null)
    {
        parent::__construct($options);
 
        $id = new Zend_Form_Element_Hidden('id');
 
        $champ1 = new Zend_Form_Element_Text('champ1');
        $champ1->setLabel('Champ 1 : ')
				// obligatoire
                ->setRequired(true)
                // enlève code HTML
				->addFilter('StripTags')
                // suprimme les espaces
				->addFilter('StringTrim')
                // non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
       	$champ2 = new Zend_Form_Element_Text('champ2');
		$champ2->setLabel('Champ 2 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ3 = new Zend_Form_Element_Text('champ3');
		$champ3->setLabel('Champ 3 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ4 = new Zend_Form_Element_Text('champ4');
		$champ4->setLabel('Champ 4 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		// Zend_Debug::dump($champ4->getDecorators());
 
        $envoyer = new Zend_Form_Element_Submit('boutonenvoyer');
        $envoyer->setLabel(utf8_encode('Valider'));
 
        $this->addElements(array($id, $champ1, $champ2, $champ3, $champ4, $envoyer));
    }
}

Et le visuel qui va avec:

[5h4rk]

C est le JS que je veux