Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 18-02-2010 11:47:03

bandit_rouge
Membre
Date d'inscription: 18-02-2010
Messages: 31

zend_form modalbox jQuery UI Dialogcontainer

Bonjour à tous,

Je débute avec ZF.
En suivant pas mal de tutoriels, j'ai pu faire une page d'accueil avec un lien "Contactez-nous" qui me dirige vers une nouvelle page affichant un formulaire zend_form (formulaire d'envoi de mail à l'administrateur du site).
J'aimerais pouvoir afficher ce formulaire depuis ma page d'accueil dans une modal box.
Exemple: http://wpcoder.com/ puis contact us

Ma question:
Est-il possible de réutiliser ce formulaire zend_form pour l'intégrer à ma modal box. Ou faut-il faire un nouveau formulaire avec ZendX_JQuery_Form?
Vous avez des pistes?

Cordialement,
Cyril.

Dernière modification par bandit_rouge (18-02-2010 16:22:01)

Hors ligne

 

#2 18-02-2010 14:36:53

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: zend_form modalbox jQuery UI Dialogcontainer

Le plus simple, c'est de rajouté un ajaxContext de type html, et de le charger dans ta modalbox


----
Gruiiik !

Hors ligne

 

#3 18-02-2010 16:13:07

bandit_rouge
Membre
Date d'inscription: 18-02-2010
Messages: 31

Re: zend_form modalbox jQuery UI Dialogcontainer

Merci pour ta réponse nORKy mais j'ai trouvé une autre solution

J'ai utilisé la fonction dialogcontainer dans la vue de mon formulaire:

Code:

<?php echo $this->dialogContainer('dc1', $this->form, array(
                'bgiframe'         => true,
                'width'               => 800,    
                'autoOpen'         => true,
                'draggable'        => false,
                'modal'            => true,
                'resizable'        => false,
                'title'            => 'Contactez-nous',
                'closeOnEscape'    => true)); 
?>

J'affiche bien un "jQuery UI Dialog" avec mon formulaire!
Mais maintenant je dois l'afficher depuis la vue de ma page d'accueil!
Comme je suis noob je tatillonne! (je découvre ZF depuis lundi)
cela doit être un truc comme ca...:
<?php echo $this->dialogContainer('Contactez-nous', $this->"la vue du formulaire", array(
[...]

je continue à chercher.

Dernière modification par bandit_rouge (22-02-2010 17:40:37)

Hors ligne

 

#4 18-02-2010 21:12:49

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

j'explique sur mon site comment lancer cette fenêtre.

Hors ligne

 

#5 19-02-2010 16:54:01

bandit_rouge
Membre
Date d'inscription: 18-02-2010
Messages: 31

Re: zend_form modalbox jQuery UI Dialogcontainer

Oui j'ai vu cela. Mais ton tutoriel ne répondait qu'à une partie de mes besoins. A savoir afficher un formulaire zend_form. Ce que j'arrive à faire en utilisant $this->form pour la variable $content du dialogcontainer.
Mais le soucis maintenant est d'afficher le script de la vue de mon formulaire sur le script de ma page d'accueil...
Là je sèche. Pour le moment...
$this->form ne m'affiche rien dans le script de la page d'accueil.
As-tu une suggestion throrin19?

-application
    +configs
    -controllers
        ContactusController.php
        ErrorController.php
        IndexController.php
    -forms
        ContactusForm.php
    +layouts
    +models
    -views
        +helpers
        -scripts
            -contactus
                index.phtml
            -error
                error.phtml
            -index
                index.phtml
            -templates
                default.phtml

Dernière modification par bandit_rouge (19-02-2010 17:25:58)

Hors ligne

 

#6 20-02-2010 19:00:00

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

Bah il y a une façon vraiment simple.
Ton $this->form ne s'affiche pas car il est dans une autre action?
Dans ce cas là, il faut afficher cette action (sans layout) dans ta box.

Pour ceci rien de plus simple il s'uffit d'utiliser cette fonction

Code:

$this->action(string action, string controller, string module, array params) ;

Elle est simple, elle permet d'effectuer l'action demandée dedans.
Très utile quand notre menu du haut, menu de gauche ou une partie de notre page sont effectués dans d'autres actions.

Si sa peut t'aider, je fournis une plus grande explication ici:
http://www.throrinstudio.com/blog/index … article/17

Dernière modification par throrin19 (20-02-2010 19:01:48)

Hors ligne

 

#7 22-02-2010 09:17:46

bandit_rouge
Membre
Date d'inscription: 18-02-2010
Messages: 31

Re: zend_form modalbox jQuery UI Dialogcontainer

NICKEL Throrin!!! Tu es un king!

J'ajoute donc ceci dans mon script de vue de la page d'accueil pour appeler la modal box de mon formulaire:

Code:

<?php 
echo $this->action('index', 'contactus');
?>

Et voici ma modal box dans mon script de vue contactus/index.phtml

Code:

<?php echo $this->dialogContainer('dc1', $this->form, array(
                'bgiframe'         => true,
                'width'               => 800,   
                'autoOpen'         => true,
                'draggable'        => false,
                'modal'            => true,
                'resizable'        => false,
                'title'            => 'Contactez-nous',
                'closeOnEscape'    => true));
?>

C'EST COOL NON!!!!

Je suis proche du but! Il ne me reste plus qu'a gérer l'affichage de cette modal box pour qu'elle apparaisse au moment qu'il faut bien et non pas au chargement de la page. Mais ca c'est plus de la gestion d'événement en JS....
Comme c'est lundi matin je vais commencer par un café et une clope! C'est le début de la semaine! non mais!

Dernière modification par bandit_rouge (22-02-2010 17:40:09)

Hors ligne

 

#8 22-02-2010 16:21:25

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

regarde mon tuto, j'indique comment faire (quand tu clic sur tel lien pouf elle s'affiche)
De rien smile

Hors ligne

 

#9 22-02-2010 17:39:55

bandit_rouge
Membre
Date d'inscription: 18-02-2010
Messages: 31

Re: zend_form modalbox jQuery UI Dialogcontainer

Ca fonctionne! Mais je pense être tombé dans une impasse....

Je vais essayer de bien détailler:

J'effectue dans mon script ContactusForm.php des filtres pour les différents champs

Code:

<?php
class Form_ContactusForm extends Zend_Form
{
    public function init()
    {
        
         // add element: author textbox
         $name = $this->createElement('text', 'author');
         $name->setLabel('Votre nom:');
         $name->setRequired(TRUE);
         $name->setAttrib('size', 60);
         $this->addElement($name);

         // add element: email textbox
         $email = $this->createElement('text', 'email');
         $email->setLabel('Votre adresse mail:');
         $email->setRequired(TRUE);
         $email->addValidator(new Zend_Validate_EmailAddress());
         $email->addFilters(array(
            new Zend_Filter_StringTrim(),
            new Zend_Filter_StringToLower()
            ));
        $email->setAttrib('size', 60);
        $this->addElement($email);

        // add element: email subject
        $subject = $this->createElement('text', 'Sujet:');
        $subject->setLabel('Subject: ');
        $subject->setRequired(TRUE);
        $subject->setAttrib('size',60);
        $this->addElement($subject);

        // add element: description text area
        $message = $this->createElement('textarea', 'description');
        $message->setLabel('Votre message:');
        $message->setRequired(TRUE);
        $message->setAttrib('cols',60);
        $message->setAttrib('rows',8);
        $this->addElement($message);

            // add element: submit button
            //$this->addElement('submit', 'submit', array('label' => 'Envoyer'));
            $submit = $this->addElement('submit', 'submit',
            array('label' => 'Envoyer Message'));
    }
}

Voici la gueule de mon controller ContactusController.php:

Code:

<?php
class ContactusController extends Zend_Controller_Action
{

    public function init()
    {
        /* Initialize action controller here */
    }

    public function indexAction()
    {
        $frmContactus = new Form_ContactusForm();
        if($this->_request->isPost() && $frmContactus->isValid($_POST)) {
            // get the posted data
            $sender = $frmContactus->getValue('name');
            $email = $frmContactus->getValue('email');
            $subject = $frmContactus->getValue('subject');
            $message = $frmContactus->getValue('message');
            // load the template
            $htmlMessage = $this->view->partial(
                'templates/default.phtml',
                $frmContactus->getValues()
            );
            $mail = new Zend_Mail();
            // set the subject
            $mail->setSubject($subject);
            // set the message's from address to the person who submitted the form
            $mail->setFrom($email, $sender);
            // for the sake of this example you can hardcode the recipient
            $mail->addTo('contact@monsite.com', 'Contact');
            // it is important to provide a text only version in
            // addition to the html message
            $mail->setBodyHtml($htmlMessage);
            $mail->setBodyText($message);
            //send the message
            $result = $mail->send();
            // inform the view with the status
            $this->view->messageProcessed = true;
            if($result) {
            $this->view->sendError = false;
            } else {
            $this->view->sendError = true;
            }
        }
        $frmContactus->setAction('/contactus');
        $frmContactus->setMethod('post');
        if ($this->getRequest()->isPost()) {
            if ($frmContactus->isValid($_POST)) {
                // just dump the data for now
                $data = $frmContactus->getValues();
                // process the data
            }
        }
        $this->view->form = $frmContactus;
    }


}

1er TEST
Je configure l'autoOpen à false comme ca je peux  l'afficher quand je clique sur mon lien Contactez-nous avec le script contactus.js

le script de la vue contactus/index.phtml

Code:

<?php echo $this->dialogContainer('dc1', $this->form, array(
                'bgiframe'         => true,
        'width'              => 800,    
                'autoOpen'         => false, // !!!!!! c'est ici que cela ce gère
                'draggable'        => false,
                'modal'            => false,
                'resizable'        => false,
                'title'            => 'Contactez-nous',
                'closeOnEscape'    => true)); 
?>

J'ajoute ce qui va bien dans le script de ma page d'accueil index/index.phtml:

Code:

<?php echo $this->headScript()->appendFile('/js/contactus.js') ?>
<div id="main"></div>
<div id="contactus_link">
    <p>
        <a id='open_contactus' href='#'>Contactez-nous.</a>        
    </p>
    </h2>
</div>

J'ajoute un petit javascript contactus.js:

Code:

$(document).ready(function() {
    // do something here
    $("#open_contactus").click(function() {
        $("#dc1").dialog("open");
    });
});

RESULTAT:

Le formulaire s'affiche bien quand je clique sur le lien Contactez-nous
MAIS..
lorsque je met une adresse mail non valide et que je clique sur le bouton envoyer message
je suis redirigé sur la page du script de mon formulaire:
http://monsite/contactus
Et comme dans le script l'autoOpen est à false rien ne s'affiche....
YOU LOOSE!!!!

2eme TEST:
Je configure l'autoOpen à true et j'espere pouvoir gérer avec le JS.
le script de la vue contactus/index.phtml

Code:

<?php echo $this->dialogContainer('dc1', $this->form, array(
                'bgiframe'         => true,
                'width'               => 800,    
                'autoOpen'         => true, // !!!!!! c'est ici que cela ce gère
                'draggable'        => false,
                'modal'            => false,
                'resizable'        => false,
                'title'            => 'Contactez-nous',
                'closeOnEscape'    => true)); 
?>

contactus.js:

Code:

$(document).ready(function() {
    // do something here
    $("#dc1").dialog({
        autoOpen: false
    });
    $("#open_contactus").click(function() {
        $("#dc1").dialog("open");
    });
    
});

ET LA, j'ai un autre souci:
Mon formulaire s'affiche MAIS j'ai perdu la conf de mon dialogContainer:
Il a perdu son width de 800, son title, il est draggable...bref c'est pas terrible....
Et quand je test une adresse mail non valide je suis toujours rediriger vers http://monsite/contactus mais cette fois j'ai mon formulaire qui s'affiche bien avec les erreurs générer par les filtres...
YOU LOOSE AGAIN!!!!!!!!!

J'aimerais qu'il n'y est pas de redirection lors de la saisie d'un paramètre non valide.
Je pense que cela doit venir de mon controller ContactusController
...
Je vais essayé deux trois truc mais je pense que je vais abandonner l'idée d'utiliser un formulaire zend_form au profit de zendx_jquery_form et de gérer les filtres en JS...
...
A suivre...

Dernière modification par bandit_rouge (22-02-2010 18:37:43)

Hors ligne

 

#10 22-02-2010 22:46:05

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

normal, dans ce cas là fait 2 validations, une en javascript et une dans le zend_form
je peux pas t'aider plus, je ne suis pas allé aussi loin dans ces outils smile

Hors ligne

 

#11 23-02-2010 09:17:29

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: zend_form modalbox jQuery UI Dialogcontainer

C'est trop compliqué votre truc...
Voici moi, comment je procède

Code:

class ContactusController extends Zend_Controller_Action
{
   public function init()
   {
       $ajaxContext = $this->_helper->getHelper('AjaxContext');
       $ajaxContext->addActionContext(index', 'html')->initContext();
   }

   public function indexAction()
   {
       // ici tu fais comme si de rien n'étais, comme d'hab
   }

il faut créé une vue index.ajax.phtml avec un truc du genre <?= $this->form;?>

fichier javascript extérieur :

Code:

$(function() {
  // je passe l'initialisation de la fenêtre

  // interception du submit, utilise un live, pour gérer la mise à jour du formulaire
  $("#monform").live('submit', function() {
      // récupère les valeurs
      val = $(this).serialize();
       $.post($(this).attr('action') + "?" + val, function(data) {
           // mise à jour du formulaire ou autre (à toi de voir)
           $("#dc1").empty().load(data);
       });  
  }); 
  $("#open_contactus").click(function() {
         // on charge l'html via ajax dans la fenetre via le lien sur lequel on a cliquer
        $("#dc1").load($(this).attr('href') + "/format/html");
    });
});

fais à la volé, y'a surement des bugs smile


----
Gruiiik !

Hors ligne

 

#12 05-03-2010 16:36:35

mymt
Membre
Lieu: PACA
Date d'inscription: 25-09-2009
Messages: 93

Re: zend_form modalbox jQuery UI Dialogcontainer

Question toute bête... j'ai essayé le code de base

Code:

echo $this->dialogContainer('Contactez-nous', $this->form, array(
'bgiframe' => true,
'width' => 800, 
'autoOpen' => true,
'draggable' => false,
'modal' => true,
'resizable' => false,
'title' => 'Contactez-nous',
'closeOnEscape' => true));

mais je me tappe une erreur

Code:

exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'DialogContainer' was not found in the registry; used paths: Zend_Dojo_View_Helper_: Zend/Dojo/View/Helper/ Zend_View_Helper_:

J'ai pourtant défini les différents paths de librairie dans mon .htaccess... qu'est ce que j'ai loupé??

Hors ligne

 

#13 06-03-2010 14:56:41

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

l'initialisation du ZendX_Jquery view helper dans le bootstrap. Je l'explique sur mon site.

Hors ligne

 

#14 11-03-2010 23:49:07

mymt
Membre
Lieu: PACA
Date d'inscription: 25-09-2009
Messages: 93

Re: zend_form modalbox jQuery UI Dialogcontainer

Throrin19,
En effet, j'avais zappé l'update du bootstrap.
Cette fois-ci plus d'erreur... par contre je n'obtiens pas de dialog box avec le code suivant

Code:

echo $this->dialogContainer('test', 'je test juste celà', array(
'bgiframe'         => true,
'autoOpen'         => true,
'draggable'     => true,
'modal'         => true,
'resizable'     => false,
'title'         => 'Welcome message',
'closeOnEscape' => true,
'buttons'         => array('Valider' => 'function() { return true;}',
 'Annuler' => 'function() { $j(this).dialog(\'close\');}')
                                                                ));

Une idée sur ma boulette??

Hors ligne

 

#15 12-03-2010 08:54:43

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: zend_form modalbox jQuery UI Dialogcontainer

Beh, tu veux pas tenter mon approche...

Sinon, pour info, il existe une resource Application JQuery. Ca évite des lignes de code, et facilite le changement de version directement dans application.ini


----
Gruiiik !

Hors ligne

 

#16 12-03-2010 10:00:53

throrin19
Membre
Date d'inscription: 01-03-2009
Messages: 318
Site web

Re: zend_form modalbox jQuery UI Dialogcontainer

Ah? je n'étais pas au courant de cette ressource. par contre, j'ai eu la mauvaise surprise de voir que JQuery UI 1.8rc3 n'est pas toléré lors du setUiVersion();

Hors ligne

 

#17 12-03-2010 11:41:21

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: zend_form modalbox jQuery UI Dialogcontainer

chez moi :

Code:

resources.Jquery.localpath      = "/js/vendor/jquery-1.4.2.min.js"
resources.Jquery.uilocalpath    = "/js/vendor/jquery-ui-1.8rc3.min.js"

----
Gruiiik !

Hors ligne

 

#18 12-03-2010 13:54:26

mymt
Membre
Lieu: PACA
Date d'inscription: 25-09-2009
Messages: 93

Re: zend_form modalbox jQuery UI Dialogcontainer

finalement ça marche pour moi... j'avais oublier un echo $this->jQuery(); dans mon layout

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages