Affichage modal pop up

digaburla
CakePHP

Bonjour,
Je cherche à afficher le résultat d'un formulaire dans une modal pop up. En cherchant ici et là j'ai trouvé des exemples que je cherche donc à appliquer à mon code. Lors de la validation de mon formulaire un fenêtre apparait bien, cependant les variables sont NULL.

Voici le bout de code qui affiche la popup

<div class="modal-wrapper">
                    <div class="modal">
                        <div class="head">
                            <a href="" class="btn-close trigger" ></a>
                        </div>
                        <div class="content">
                         <?php echo $this->element('estimation/calculDevisFilm',array("target" =>"_blank"));?>
                        </div>
                    </div>
                </div>

En voici le JS

$( document ).ready(function() {
  $('.trigger').click(function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur');
     return false;
  });
});

Lorsque j'affiche se code dans mon élément, tout ce la fonctionne parfaitement.
Selon mes faibles connaissances, j'imagines que l'affichage de la pop up se fait avant l'envoi des infos au serveur, et donc me retourne un code sans prendre les valeurs de mes différentes variables. (Je ne sais pas si je suis trés clair, mais reste dispo pour vous éclairer).

Si vous avez une idée, un axe de réflexion ?

5 réponses

digaburla
Auteur

J'ai peut être pas assez détaillé ?
Personne n'as une idée ?

amethyste

Si $('trigger') est ton bouton de soumission du formulaire, alors le "return false" empêche la soumission du formulaire, donc aucun traitement de donné ne peut être effectué.

Grosso modo, il faut, dans un premier temps, envoyer les données au serveur : soit par html classique (soumission du formulaire), soit de manière asynchrone (ajax).
Dans un second temps, le serveur doit renvoyer le résultat du traitement des données, soit de manière classique (rechargement de page), soit en asynchrone (ajax avec format json par exemple). Quoi qu'il en soit, les données renvoyées doivent aussi contenir une variable (ex: $declencherModal = true)

Finalement, tu vas analyser cette variable pour déclencher ou non la modal avec cette fois-ci les bonnes données.

Peut-on voir le code du formulaire ?

digaburla
Auteur

Salut et merci pour ce retour.
Du coup j'ai éviter le javascript et suis parti sur une modal en full CSS.
Voici un parti de mon code :
Ici l'url permet d atteindre la modal

 <?php echo $this->Form->create('',array(   
                                            'label' => false,
                                            'url' => array('#'=>'openModal'),
                                            'id'=>'estimation_1'
                                   ));?>

Ici j'affiche ma modal

 <section class="result_estim" id="result_estim">
        <?php if(isset($_POST['valider'])){?>
        <div id="openModal" class="modalDialog">
            <div>
                <div class="head">
                    <a class="btn-close trigger" title="Close" href="#close"></a>
                </div>
                <div class="content_popup">
                    <?php   echo $this->element('estimation/calculDevisFilm',array("target" =>"_blank"));?>
                </div>
            </div>
        </div>
        <?php } ?>
    </section>

Ce sont des bouts de code récup.
Cela semble fonctionner correctement. Le seul souci c'est qu il faut que je rédige des IF pour les navigateurs qui ne prendraient pas en compte le CSS3

PS : Il faut que je me penche sur l'AJAX je crois un de ces 4

JC_Pires

Oui car en Ajax ça t'aurais pris 20 sec, et ça aurais été beaucoup plus propre je te le conseil VIVEMENT!

digaburla
Auteur

Cela sera pour la première MAJ pirate !