Tweet
Conflit Acymailing avec jquery dans le body
Bonjour à tous,
Voici mon casse tête du jour...
J'utilise le module Acymailng. J'ai placé le module newsletter sur toutes mes pages. Il est du type fenêtre qui se déroule lorsqu'on souhaite s'abonner.
D'autre part, sur une page, j'ai une animation css3 qui tourne avec jquery. Un script se lance dans le head, et deux se lancent dans le body (je déclare les scripts dans l'article). Parmi ces 2 déclarés dans le body, j'ai le jquery.min.js
Je vois bien que jquery.min.js est déjà déclaré dans le head car utilisé pour d'autres action, entre autre un effet parallax sur mon background.Dans tous les cas, ce n'est pas moi qui le déclare dans le head, mais j'ai besoin de le déclarer dans le body.
Le problème :
Avec la déclaration du jquery dans le body sur toutes les pages, c'est OK, mon parallax fonctionne, le module , newsletter est bien réduit. Sur la page de mon animation, celle ci fonctionne mais le parallax ne fonctionne plus, le module newsletter est développé et j'ai une erreur dans le console qui est celle-ci :
Uncaught TypeError: undefined is not a function
cette portion de code fait clairement référence à une fonction déclarée dans le head et qui est liée à Acymailing
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
var acymailing = Array();
acymailing['NAMECAPTION'] = 'Votre nom';
acymailing['NAME_MISSING'] = 'Saisissez votre nom.';
acymailing['EMAILCAPTION'] = 'Votre adresse mail';
acymailing['VALID_EMAIL'] = 'Saisissez une adresse courriel valide.';
acymailing['ACCEPT_TERMS'] = 'Veuillez accepter les Conditions d\'utilisation';
acymailing['CAPTCHA_MISSING'] = 'Veuillez entrer le code de sécurité affiché dans l\'image';
acymailing['NO_LIST_SELECTED'] = 'Veuillez sélectionner les listes auxquelles vous voulez vous inscrire';
if (window.jQuery) {
jQuery(document).ready(function(){
jQuery("#acymailing_fulldiv_formAcymailing31281"). hide();
jQuery("#acymailing_togglemodule_formAcymailing312 81").click(function(){
jQuery("#acymailing_fulldiv_formAcymailing31281"). slideToggle("fast");
jQuery("#acymailing_togglemodule_formAcymailing312 81").toggleClass("acyactive");
});
});
} else{
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('acymailing_fulldiv_formAcymailing31281') ;
mySlide.hide();
try{
var acytogglemodule = document.id('acymailing_togglemodule_formAcymailin g31281');
}catch(err){
var acytogglemodule = $('acymailing_togglemodule_formAcymailing31281');
}
acytogglemodule.addEvent('click', function(e){
if(mySlide.wrapper.offsetHeight == 0){
acytogglemodule.className = 'acymailing_togglemodule acyactive';
}else{
acytogglemodule.className = 'acymailing_togglemodule';
}
mySlide.toggle();
try {
var evt = new Event(e);
evt.stop();
} catch(err) {
e.stop();
}
});
});
}
function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
</script>
En supprimant la déclaration du jquery dans le body tout est OK sur toutes les pages, MAIS sur la page de mon animation, celle ci ne marche plus, par contre l'effet parallax est OK, est le module newsletter est réduit comme sur les autres pages.
J'ai retourné le problème dans tous les sens, il semble qu'il y ait un conflit entre le fait que je déclare le jquery dans le body et ce javascript d'acymailing.
J'ai fait le test de recopier le code source dans un html pour tester l'effet de l'emplacement des différents scripts.
Si je supprime la partie acymailng dans l'entête, pas de conflit.
Peut-être auriez vous rencontrer un pb similaire, je vais finir par remplacer acymailng par un autre composant mais ce serait dommage...
Merci d'avance !!
Voici mon casse tête du jour...
J'utilise le module Acymailng. J'ai placé le module newsletter sur toutes mes pages. Il est du type fenêtre qui se déroule lorsqu'on souhaite s'abonner.
D'autre part, sur une page, j'ai une animation css3 qui tourne avec jquery. Un script se lance dans le head, et deux se lancent dans le body (je déclare les scripts dans l'article). Parmi ces 2 déclarés dans le body, j'ai le jquery.min.js
Je vois bien que jquery.min.js est déjà déclaré dans le head car utilisé pour d'autres action, entre autre un effet parallax sur mon background.Dans tous les cas, ce n'est pas moi qui le déclare dans le head, mais j'ai besoin de le déclarer dans le body.
Le problème :
Avec la déclaration du jquery dans le body sur toutes les pages, c'est OK, mon parallax fonctionne, le module , newsletter est bien réduit. Sur la page de mon animation, celle ci fonctionne mais le parallax ne fonctionne plus, le module newsletter est développé et j'ai une erreur dans le console qui est celle-ci :
Uncaught TypeError: undefined is not a function
cette portion de code fait clairement référence à une fonction déclarée dans le head et qui est liée à Acymailing
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
var acymailing = Array();
acymailing['NAMECAPTION'] = 'Votre nom';
acymailing['NAME_MISSING'] = 'Saisissez votre nom.';
acymailing['EMAILCAPTION'] = 'Votre adresse mail';
acymailing['VALID_EMAIL'] = 'Saisissez une adresse courriel valide.';
acymailing['ACCEPT_TERMS'] = 'Veuillez accepter les Conditions d\'utilisation';
acymailing['CAPTCHA_MISSING'] = 'Veuillez entrer le code de sécurité affiché dans l\'image';
acymailing['NO_LIST_SELECTED'] = 'Veuillez sélectionner les listes auxquelles vous voulez vous inscrire';
if (window.jQuery) {
jQuery(document).ready(function(){
jQuery("#acymailing_fulldiv_formAcymailing31281"). hide();
jQuery("#acymailing_togglemodule_formAcymailing312 81").click(function(){
jQuery("#acymailing_fulldiv_formAcymailing31281"). slideToggle("fast");
jQuery("#acymailing_togglemodule_formAcymailing312 81").toggleClass("acyactive");
});
});
} else{
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('acymailing_fulldiv_formAcymailing31281') ;
mySlide.hide();
try{
var acytogglemodule = document.id('acymailing_togglemodule_formAcymailin g31281');
}catch(err){
var acytogglemodule = $('acymailing_togglemodule_formAcymailing31281');
}
acytogglemodule.addEvent('click', function(e){
if(mySlide.wrapper.offsetHeight == 0){
acytogglemodule.className = 'acymailing_togglemodule acyactive';
}else{
acytogglemodule.className = 'acymailing_togglemodule';
}
mySlide.toggle();
try {
var evt = new Event(e);
evt.stop();
} catch(err) {
e.stop();
}
});
});
}
function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
</script>
En supprimant la déclaration du jquery dans le body tout est OK sur toutes les pages, MAIS sur la page de mon animation, celle ci ne marche plus, par contre l'effet parallax est OK, est le module newsletter est réduit comme sur les autres pages.
J'ai retourné le problème dans tous les sens, il semble qu'il y ait un conflit entre le fait que je déclare le jquery dans le body et ce javascript d'acymailing.
J'ai fait le test de recopier le code source dans un html pour tester l'effet de l'emplacement des différents scripts.
Si je supprime la partie acymailng dans l'entête, pas de conflit.
Peut-être auriez vous rencontrer un pb similaire, je vais finir par remplacer acymailng par un autre composant mais ce serait dommage...
Merci d'avance !!
Commentaire