afficher un module avec jquery - Version imprimable

afficher un module avec jquery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : afficher un module avec jquery (/thread-3917.html)

afficher un module avec jquery - snatch1974 - 15/10/2016

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.5
#~ Url du site :
#~ Hébergeur / Soft : o2switch
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 2.1.5
#~ Installed Modules:
#~ AdminSearch: 1.0.2
#~ CGContentUtils: 2.1.5
#~ CGExtensions: 1.53.13
#~ CGGoogleMaps2: 1.1.1
#~ CGJobMgr: 1.3.4
#~ CGSimpleSmarty: 2.1.4
#~ CGSmartImage: 1.21.5
#~ CGUserDirectory: 1.5
#~ CMSContentManager: 1.1.1
#~ CMSForms: 1.11.2
#~ CMSMailer: 6.2.14
#~ CSSPreprocessor: 2.1
#~ CodeMirror: 3.0.0
#~ CompanyDirectory: 1.23.3
#~ DesignManager: 1.1.1
#~ ExtendedTools: 1.3.3
#~ FAQ: 2.0.1
#~ FileManager: 1.5.2
#~ FormBuilder: 0.8.1.4
#~ FrontEndUsers: 2.1.1
#~ Gallery: 2.1.6
#~ JQueryTools: 1.3.9
#~ LISE: 1.2.1.1
#~ LISECategories: 1.2.1.1
#~ LISEPrestations: 1.2.1.1
#~ LISETarifs: 1.2.1.1
#~ MCFramework: 0.0.6
#~ MicroTiny: 2.0.3
#~ MleCMS: 1.11.5
#~ ModuleManager: 2.0.4
#~ NMS: 2.12.2
#~ Navigator: 1.0.3
#~ News: 2.50.5
#~ Orm: 0.3.3
#~ Postcode: 1.2.1
#~ Search: 1.50.2
#~ Storelocator: 0.2
#~ ThemeManager: 1.1.8
#~ TinyMCE: 3.1.3
#~ TruetypeText: 2.2.1
#~ Config Information:
#~ php_memory_limit:
#~ max_upload_size: 1000000000
#~ url_rewriting: mod_rewrite
#~ page_extension: .html
#~ query_var: page
#~ auto_alias_content: true
#~ locale: fr_FR.utf8
#~ set_names: true
#~ timezone: Europe/Paris
#~ permissive_smarty: false
#~ Php Information:
#~ phpversion: 5.6.26
#~ md5_function: On (Vrai)
#~ json_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_ALL: 32767
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ test_file_timedifference: Aucune différence de date du système trouvée
#~ test_db_timedifference: Aucune différence de date du système trouvée
#~ create_dir_and_file: 1
#~ memory_limit: 256M
#~ max_execution_time: 120
#~ register_globals: Off (Faux)
#~ output_buffering: 4096
#~ disable_functions:
#~ open_basedir:
#~ test_remote_url: Valable
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 1G
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ check_ini_set: On (Vrai)
#~ curl: On
#~ Performance Information:
#~ allow_browser_cache: Off (Faux)
#~ browser_cache_expiry: 60
#~ php_opcache: Off (Faux)
#~ smarty_cache: Off (Faux)
#~ smarty_compilecheck: Off (Faux)
#~ smarty_cache_udt: Off (Faux)
#~ auto_clear_cache_age: Off (Faux)
#~ Server Information:
#~ Server Software: Apache
#~ Server Api: litespeed
#~ Server Os: Linux 2.6.32-673.26.1.lve1.4.17.el6.x86_64 On x86_64
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 10.0.27
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Permission Information:
#~ tmp: /home/farangpr/Sites/lerefugedubienetre/tmp (0755)
#~ tmp_cache: /home/farangpr/Sites/lerefugedubienetre/tmp/cache (0755)
#~ templates_c: /home/farangpr/Sites/lerefugedubienetre/tmp/templates_c (0755)
#~ modules: /home/farangpr/Sites/lerefugedubienetre/modules (0755)
#~ uploads: /home/farangpr/Sites/lerefugedubienetre/uploads (0755)
#~ Masque de création de fichier (umask) : /home/farangpr/Sites/lerefugedubienetre/tmp/cache (0755)
#~ config_file: 0744
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

Pour un projet dans lequel j'utilise bootstrap, je me sers des fenêtres modal pour afficher différents formulaires crées avec formbuilder et traités en ajax dans ces mêmes modal.

Pour éviter de créer un modal par formulaire, je n'en fait qu'un que je souhaite peupler avec jquery lors de son appel par clic sur un bouton

Mon template se présente comme ça:

les boutons

Code :
[== Indéfini ==]

<div class="col-xs-6">

            {capture name="callme" assign="callme"}{FormBuilder form='callmeback'}{/capture}  

            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="{$callme}" >

               <span class="glyphicon glyphicon-retweet"></span><br/>

               <h3>Demande de rappel</h3> 

            </a>

         </div>

         <div class="col-xs-6">

            {capture name="sendmail" assign="sendmail"}{FormBuilder form='sendmail'}{/capture} 

            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="{$sendmail}">

               <span class="glyphicon glyphicon-envelope"></span><br/>

               <h3>Contact par mail</h3>

            </a>

         </div>

La fenêtre modal

Code :
[== Indéfini ==]

<div class="modal fade" id="modalform" role="dialog">

   <div class="modal-dialog">

      <div class="modal-content" id="modalform_content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal">&times;</button>

            <h4 class="modal-title">Modal Header</h4>

         </div>

         <div class="modal-body" id="modalform_body">

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

         </div>

      </div>      

   </div>

</div>

pour peupler ma fenêtre j'utilise ce bout de code en jquery:

Code :
[== JavaScript ==]

$(document).ready(function() {

   var form_content;

   $("a.modalform").each(function() {

      $(this).on("click", function() {

         form_content = $(this).data("form");

         $("#modalform_body").html(form_content);

      });

   });

});

le problème est que ça ne peut pas fonctionner aussi simplement car dans mes boutons, en mettant le contenu capturé de mon module FormBuilder, le code est interprété et s'affiche... de façon batarde mais il s'affiche, ce qui est normal en soit.
le but serait donc, de passer ce code dans une variable jquery pour pouvoir l'appeler quand il y'a un clic.

par ex:

faire une boucle pour mettre chaque capture dans une variable js dont le nom serait la valeur data-form corresondante et
remplacer data-form="{$callme}" par data-form="callme" dans le bouton ou callme serait récupéré pour définir la variable js à appeler

Par contre, je n'ai aucune idée de comment faire ça donc, si quelqu'un a une piste ou une solution alternative, je suis preneur

Merci

afficher un module avec jquery - jissey - 15/10/2016

Hello,
je n'ai pas le temps de te répondre en longueur, mais en lisant en travers, je me demande si tu utilises la solution Modal de BootStrap?
Je l'ai utilisée dans un site et cela ne me semblait pas aussi fourni en code.
http://getbootstrap.com/javascript/#modals

afficher un module avec jquery - snatch1974 - 15/10/2016

jissey a écrit :Hello,
je n'ai pas le temps de te répondre en longueur, mais en lisant en travers, je me demande si tu utilises la solution Modal de BootStrap?
Je l'ai utilisée dans un site et cela ne me semblait pas aussi fourni en code.
http://getbootstrap.com/javascript/#modals

Oui j'utilise cette fonction là, mais j'ai plus de code à cause de la mise en page dans mon template et parce que j'utilise des formulaires traités en ajax dans la fenêtre "modal"

J'ai réussi à le faire fonctionner correctement par contre je trouve le code un peu bricolo donc, si vous avez une idée pour l'améliorer...

Voilà comment j'ai fait:

Mes boutons avec capture des formulaires assignés à une variable JS, qui devront apparaitre dans la fenêtre "Modal"

Code :
[== PHP ==]

         <div class="col-xs-4">

            {capture name="callme" assign="callme"}{FormBuilder form='callmeback' form_id="5"}{/capture}

            <script type="text/javascript">var callme = "{$callme|escape:javascript}";</script>

            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="callme" >

               <span class="glyphicon glyphicon-retweet"></span><br/>

               <h3>Demande de rappel</h3> 

            </a>

         </div>

         <div class="col-xs-4">

            {capture name="sendmail" assign="sendmail"}{FormBuilder form='contact_fr'}{/capture}

            <script type="text/javascript">var sendmail = "{$sendmail|escape:javascript}";</script>  

            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="sendmail">

               <span class="glyphicon glyphicon-envelope"></span><br/>

               <h3>Contact par mail</h3>

            </a>

         </div>

J'ai ensuite le code de la fenêtre "Modale" générique et vide de contenu puisqu'elle sera remplie par le clic d'un bouton

Code :
[== PHP ==]

<div class="modal fade" id="modalform" role="dialog">

   <div class="modal-dialog">

      <div class="modal-content" id="modalform_content">

         <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal">&times;</button>

            <h4 class="modal-title">Modal Header</h4>

         </div>

         <div class="modal-body" id="modalform_body">

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

         </div>

      </div>      

   </div>

</div>

Enfin le jquery qui écoute les boutons et lorsqu'on clic sur un, il récupère l'attribut data-form en le transformant en nom de variable à appeler (une de celle définie avant chaque bouton) et utilise le contenu de cette variable pour peupler la fenêtre "Modale".
On a ensuite une fonction prepareform() qui traite le formulaire en ajax et enfin 2 events sur l'ouverture et la fermeture de la fenêtre "Modal" pour:
A l'ouverture -> stocker le formulaire initial dans une variable form_content
A la fermeture -> reinitialiser le formulaire avec la version initiale stockée à l'ouverture et vider la variable form_content

Code :
[== JavaScript ==]

$(document).ready(function() {

   var form_content;

   $("a.modalform").each(function() {

      $(this).on("click", function() {

         var foo = $(this).data("form");

         var content = window[foo];

         $("#modalform_body").html(content);

      });

   });

   function prepareForm() {

      $("#modalform_body form.cms_form").on( "submit", function( event ) {

         event.preventDefault();

         var posturl = $(this).attr("action") + "?showtemplate=false";  

         var postdata = $(this).serialize();

         $.post(posturl,postdata,function(data) { 

            $("#modalform_body").html(data);

            prepareForm();

         }); 

      }); 

   }

   $("#modalform").on('shown.bs.modal', function() {

      form_content = $("#modalform_content").html();

      prepareForm();

   });

   $("#modalform").on('hidden.bs.modal', function() {

      $("#modalform_content").html(form_content);

      fom_content = '';

      prepareForm(); 

    });

});

J'ai essayé de passé les variables de départ {$callmeback} et {$sendmail} et scope=global pour voir si je pouvais les réutiliser directement dans le code JS et ainsi éviter le

<script type="text/javascript">var callme = "{$callme|escape:javascript}";</script>

mais ça ne fonctionne pas !
Donc, si vous avez une idée pour améliorer le truc...

Merci