Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Juste au passage : {id_article=#ENV{article}}
devrait pouvoir s'écrire plus simplement : {id_article}
JL
Le 20/12/2017 à 18:41, Mikhaël MYARA a écrit :
Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
<div class="modal-body [(#ENV{titre}|non)modal-body-no-header]">
[<p>(#ENV{contenu})</p>] <INCLURE{fond=content/article,id_article=#ENV{article},env,ajax} />
</div>
Pour cela il utilise transmet l’environnement + ajax, comme indiqué ici : `{ajax}` pour les `inclure` - SPIP
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Ok merci. Mon SPIP est en effet lourd et je m’en rends compte, juste je manque d’expérience
Merci !
Le 21 déc. 2017 à 10:43, JLuc <jluc@no-log.org> a écrit :
Juste au passage : {id_article=#ENV{article}}
devrait pouvoir s'écrire plus simplement : {id_article}
JL
Le 20/12/2017 à 18:41, Mikhaël MYARA a écrit :
Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
<div class="modal-body [(#ENV{titre}|non)modal-body-no-header]">
[<p>(#ENV{contenu})</p>] <INCLURE{fond=content/article,id_article=#ENV{article},env,ajax} />
</div>
Pour cela il utilise transmet l’environnement + ajax, comme indiqué ici : `{ajax}` pour les `inclure` - SPIP
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Je sèche ….
Une idée ?
Merci,
Mikhaël
------------------
<!-- Button to trigger modal -->
<BOUCLE_test(CONDITION){si #ENV{bouton}|concat{#ENV{img}}|concat{#ENV{texte}}|oui}>
[(#ENV{type}|oui)#MODELE{section_debut,env}]
[(#ENV{img}|oui)<div style="text-align: center;">]
<a href="#myModal#ENV{id}" [(#ENV{bouton}|?{role="button" class="btn" })] data-toggle="modal" >
[(#ENV{bouton})]
[(#ENV{texte})] #SET{tailleimage,#ENV{largeur,400}}
<BOUCLE_document (DOCUMENTS) {si #ENV{img}|oui} {id_document=#ENV{img}}>
[(#MODELE{imgB,env,autoZoom=non})]
</BOUCLE_document>
</a>
<BOUCLE_art(ARTICLES){id_article=#ENV{article}}>
[(#ENV{img}|oui)
[<p class="modalIconTitle">(#TITRE)</p>]
[<p class="modalIconSubtitle">(#SOUSTITRE)</p>]
]
</BOUCLE_art>
[(#ENV{img}|oui)</div>]
[(#ENV{type}|oui)#MODELE{section_fin,env}]
</BOUCLE_test>
<!-- Modal -->
<div id="myModal#ENV{id}" class="modal animated fadeInDownBig hide" tabindex="-1" role="dialog" aria-labelledby="myModal#ENV{id}Label" aria-hidden="true">
[(#ENV{titre}|oui)<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModal#ENV{id}Label">#ENV{titre}</h3>
</div> ]
<div class="modal-body [(#ENV{titre}|non)modal-body-no-header]">
[<p>(#ENV{contenu})</p>] <INCLURE{fond=content/article,id_article=#ENV{article},env,ajax} />
</div>
<div class="modal-footer">
<button class="btn" btn-primary data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
<script type="text/javascript">
// SVG case
var spipDocNode = document.getElementsByClassName("spip_document_#ENV{SVGDoc}")[0]
if(spipDocNode) {
var objectNode = spipDocNode.getElementsByTagName("object")[0]
objectNode.addEventListener("load",function(){
var svgDoc = objectNode.contentDocument;
var delta = svgDoc.getElementById("#ENV{SVGId}");
delta.addEventListener("mousedown",function(){
$('#myModal#ENV{id}').appendTo("body").modal('show');
}, false);
}, false);
}
// explicitly force append to body
var wantedParent = "#ENV{parent}";
if(wantedParent)
$(document).ready(function(){
$('#myModal#ENV{id}').appendTo(wantedParent);
});
</script>
—————————
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net
Ok merci. Mon SPIP est en effet lourd et je m’en rends compte, juste je manque d’expérience
Merci !
Le 21 déc. 2017 à 10:43, JLuc <jluc@no-log.org> a écrit :
Juste au passage : {id_article=#ENV{article}}
devrait pouvoir s'écrire plus simplement : {id_article}
Oups j'avais lu trop vite ! car tu écris #ENV{article} et non #ENV{id_article}
et tu ne peux pas simplifier si vraiment c'est 'article' qui a la valeur dans l'environnement et non id_article .
Mais il est vivement conseillé d'utiliser id_article pour tes variables d'url ou d'env lorsque c'est un id qui est contenu.
D'une part pour les simplifications syntaxiques que ça permet
ex : critère de boucle {id_article} au lieu de {id_article=#ENV{id_article}}
Mais aussi pour les fonctionnalités supplémentaires comme les critères conditionnels {id_article?}
et pour l'écran de sécurité qui protège de certaines tentatives de hack
en vérifiant que les id_ sont bien numériques.
Ensuite pour l'écriture, au lieu de #ENV{bouton} ou autre tu peux écrire directement #BOUTON
La lecture est plus légère avec #BOUTON.
Mais parfois c'est utile aussi de distinguer visuellement les #CHAMPS qui viennent des boucles
et les valeurs qui viennent de l'environnement d'appel en gardant #ENV{bouton}.
JL
Le 20/12/2017 à 18:41, Mikhaël MYARA a écrit :
Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
<div class="modal-body [(#ENV{titre}|non)modal-body-no-header]">
[<p>(#ENV{contenu})</p>] <INCLURE{fond=content/article,id_article=#ENV{article},env,ajax} />
</div>
Pour cela il utilise transmet l’environnement + ajax, comme indiqué ici : `{ajax}` pour les `inclure` - SPIP
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Je sèche ….
Une idée ?
Merci,
Mikhaël
------------------
<!-- Button to trigger modal -->
<BOUCLE_test(CONDITION){si #ENV{bouton}|concat{#ENV{img}}|concat{#ENV{texte}}|oui}>
[(#ENV{type}|oui)#MODELE{section_debut,env}]
[(#ENV{img}|oui)<div style="text-align: center;">]
<a href="#myModal#ENV{id}" [(#ENV{bouton}|?{role="button" class="btn" })] data-toggle="modal" >
[(#ENV{bouton})]
[(#ENV{texte})] #SET{tailleimage,#ENV{largeur,400}}
<BOUCLE_document (DOCUMENTS) {si #ENV{img}|oui} {id_document=#ENV{img}}>
[(#MODELE{imgB,env,autoZoom=non})]
</BOUCLE_document>
</a>
<BOUCLE_art(ARTICLES){id_article=#ENV{article}}>
[(#ENV{img}|oui)
[<p class="modalIconTitle">(#TITRE)</p>]
[<p class="modalIconSubtitle">(#SOUSTITRE)</p>]
]
</BOUCLE_art>
[(#ENV{img}|oui)</div>]
[(#ENV{type}|oui)#MODELE{section_fin,env}]
</BOUCLE_test>
<!-- Modal -->
<div id="myModal#ENV{id}" class="modal animated fadeInDownBig hide" tabindex="-1" role="dialog" aria-labelledby="myModal#ENV{id}Label" aria-hidden="true">
[(#ENV{titre}|oui)<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModal#ENV{id}Label">#ENV{titre}</h3>
</div> ]
<div class="modal-body [(#ENV{titre}|non)modal-body-no-header]">
[<p>(#ENV{contenu})</p>] <INCLURE{fond=content/article,id_article=#ENV{article},env,ajax} />
</div>
<div class="modal-footer">
<button class="btn" btn-primary data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
<script type="text/javascript">
// SVG case
var spipDocNode = document.getElementsByClassName("spip_document_#ENV{SVGDoc}")[0]
if(spipDocNode) {
var objectNode = spipDocNode.getElementsByTagName("object")[0]
objectNode.addEventListener("load",function(){
var svgDoc = objectNode.contentDocument;
var delta = svgDoc.getElementById("#ENV{SVGId}");
delta.addEventListener("mousedown",function(){
$('#myModal#ENV{id}').appendTo("body").modal('show');
}, false);
}, false);
}
// explicitly force append to body
var wantedParent = "#ENV{parent}";
if(wantedParent)
$(document).ready(function(){
$('#myModal#ENV{id}').appendTo(wantedParent);
});
</script>
—————————
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net
Merci pour ces conseils ! en effet j’ignorais pour le « raccourci » des variables issues de l’environement avec la syntaxe #. Mais en effet ca peut sembler ambigu dans certaines situations.
Merci encore,
Mikhaël
Juste au passage : {id_article=#ENV{article}}
devrait pouvoir s’écrire plus simplement : {id_article}
Oups j’avais lu trop vite ! car tu écris #ENV{article} et non #ENV{id_article}
et tu ne peux pas simplifier si vraiment c’est ‹ article › qui a la valeur dans l’environnement et non id_article .
Mais il est vivement conseillé d’utiliser id_article pour tes variables d’url ou d’env lorsque c’est un id qui est contenu.
D’une part pour les simplifications syntaxiques que ça permet
ex : critère de boucle {id_article} au lieu de {id_article=#ENV{id_article}}
Mais aussi pour les fonctionnalités supplémentaires comme les critères conditionnels {id_article?}
et pour l’écran de sécurité qui protège de certaines tentatives de hack
en vérifiant que les id_ sont bien numériques.
Ensuite pour l’écriture, au lieu de #ENV{bouton} ou autre tu peux écrire directement #BOUTON
La lecture est plus légère avec #BOUTON.
Mais parfois c’est utile aussi de distinguer visuellement les #CHAMPS qui viennent des boucles
et les valeurs qui viennent de l’environnement d’appel en gardant #ENV{bouton}.
JL
Le 20/12/2017 à 18:41, Mikhaël MYARA a écrit :
Bonsoir,
je voudrais utiliser le Formulaire de contact dans une boite modale bootstrap. Mon problème est que la modale « bootstrap » se ferme quand je demande d’envoyer le message.
J’ai fait un modele « modale » pour afficher la modale. Le code du modèle est donné à la fin du message.
Comme on peut le voir, le modèle embarque un article comme body de la boite modale :
[
(#ENV{contenu})
]
Pour cela il utilise transmet l’environnement + ajax, comme indiqué ici :
[https://www.spip.net/fr_article3753.html](https://www.spip.net/fr_article3753.html)
Pour continuer d’être conforme avec la doc, j’ai ajouté la classe « ajax » au bouton « envoyer le mail » mais ca ne fonctionne pas.
Autre symptôme « rigolo » : le titre du bouton prend comme nom le texte qui a été tapé dans le formulaire.
Je sèche ….
Une idée ?
Merci,
Mikhaël
------------------
[(#ENV{type}|oui)#MODELE{section_debut,env}]
[(#ENV{img}|oui)
