Utiliser Zend_form en Ajax

Version imprimable

Bonjour,

J'ai créé une page avec 2 onglets JQUERY. Chacun de ses onglets affiches un formulaire chargé en Ajax.
Je souhaiterais valider mon formulaire en AJAX ou alors valider en POST classique mais afficher ensuite le bon contenu AJAX.
Comment faire ça bien ? Je préfère demander s'il n'y a pas une bonne pratique pour faire ça avant de faire ça a ma sauce :aie:

Pour information, voici ce que j'ai :

Une action indexAction() qui charge la page principale
Une action infosAction() qui charge en Ajax le formulaire du 1er onglet
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 // On désactive le layout $this->_helper->layout->disableLayout(); // On récupère la page courante (pour l'action) $request = Zend_Controller_Front::getInstance()->getRequest(); $currentUri = $request->getRequestUri(); $form = new Zend_Form; $form->setAction($currentUri)->setMethod('post'); $username = new Zend_Form_Element_Text('username'); $username->setRequired(true); $form->addElement($username); if ($form->isValid($_POST)) { // succès! print 'OK'; } else { // echec! print 'NOK'; } // On passe le formulaire à la vue $this->view->form = $form;
Comme vous le voyez, ça fonctionne sauf qu'au lieu d'afficher les onglets avec le formulaire, ça m'affiche directement le formulaire sans le Layout.

Merci d'avance pour vos conseils :ccool:

26/05/2010, 22h14
manuscle

Salut,

Peux-tu montrer le contenu complet de ton controlleur et de ta vue?

J'ai trouvé une solution afin de vérifier les vérifications de formulaire Zend en Ajax pour afficher les erreurs.

Mon controller :

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
 
public function infosAction()
    {
        // On désactive le layout
        $this->_helper->layout->disableLayout();
 
        // Récupère le chemin courant
        $currentUri = $this->getRequest()->getRequestUri();
 
        // Création du formulaire
        $formid = 'formInfos';
        $form = new Zend_Form;
        $form->setAction($currentUri)
             ->setMethod('post')
             ->addAttribs(array('id' => $formid));
 
        // Champs 1
        $titre = new Zend_Form_Element_Text('titre');
        $titre->addValidator(new Zend_Validate_Alnum())
              ->addValidator('regex', false, array('/^[a-z]/'))
              ->setRequired(true)
              ->setLabel('Titre');
 
        // Bouton Submit Ajax
        $submit = new Zend_Form_Element_Button('Valider');
 
        $form->addElements(array($titre, $submit));
 
        // Traitement de la réponse, renvoi du JSON interprété dans la Vue
        if ($this->getRequest()->isPost()){
            if (($data = $form->processAjax($_POST))) {
                // succès!
                $this->_helper->json->sendJson($data);
            } else {
                // echec!
                $this->_helper->json->sendJson($data);
            }
        }
 
        // On passe le formulaire à la vue
        $this->view->form = $form;
        $this->view->formId = $formid;
    }

Et pour la Vue :

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
 
<?php echo $this->form ?>
 
<script type="text/javascript">
// Applique le style et l'action au bouton submit
$('button').button({
    icons: {
        primary: 'ui-icon-circle-check'
    }
}).click(function() {
    $('form#<?php echo $this->formId ?>').submit();
});
 
// Gère le Submit en Ajax
$('form#<?php echo $this->formId ?>').submit(function() {
 
    // Récupère les données du formulaire
    var data    = $(this).serialize();
    // Récupère l'url de l'action
    var url     = $(this).attr('action');
 
    // Supprime tous les alertes liées à une validation de formulaire
    $('.formValidation').detach();
 
    // Convertir le Submit du formulaire en Ajax
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if(result === true){
                $('form#<?php echo $this->formId ?>').before('<div class="formValidation success">Vos modifications ont bien été prises en compte</div>');
            }else{
                // Pour chaque champs en erreur
                jQuery.each(result, function(champ, erreurs){
                    // Pour chacune des erreurs
                    jQuery.each(erreurs, function(type, msg){
                        $('form#<?php echo $this->formId ?> #'+champ).after('<div class="formValidation '+type+'">'+msg+'</div>');
                    });
                });
            }
        },
        dataType: "json"
    });
 
    // Neutralise le Sumbit classique
    return false;
 
});
 
</script>

Voilà, c'est un petit code perso donc si vous avez des remarques ou de meilleurs idée, n'hésitez pas.
En tout cas, peut-être que ça en aidera certains ;)

Merci :D

Je ne connaissais pas la methode processAjax!

Par contre, tu peux remplacer ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
            if (($data = $form->processAjax($_POST))) {
                // succès!
                $this->_helper->json->sendJson($data);
            } else {
                // echec!
                $this->_helper->json->sendJson($data);
            }
par :
$data = $form->processAjax($_POST);
$this->_helper->json->sendJson($data);
vu que ça semble effectuer la même action quelque soit le resultat

29/05/2010, 16h35
arnolem

Merci du conseil ;) Mon code ne fait rien encore mais le retour sera différent. Si l'Update en base ne fonctionne pas par exemple ;)

Bonjour,

La différence entre les 2 méthodes que tu désires utiliser est que :
- avec Ajax, tu vas recevoir en réponse un message que tu décides d'utiliser pour construire le formulaire
- avec Post (ou Get), tu vas recevoir en réponse ta page complète qui sera affichée par le navigateur

Il est donc tout à fait normal que lorsque tu n'utilises pas Ajax tu "perdes" les onglets puisqu'ils font partie du Layout et qu'il est désactivé (première instruction de ton action) ;)

Normalement, en déplaçant cette instruction dans le test concernant Ajax cela devrai fonctionner dans les 2 cas.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 ... if (($data = $form->processAjax($_POST))) { // succès! // On désactive le layout $this->_helper->layout->disableLayout(); $this->_helper->json->sendJson($data); } else { // echec! $this->_helper->json->sendJson($data); } ...