Probleme avec Jquery

[Xoto]

Bonjour, je vient ici car je rencontre un probleme avec Jquery. j'ai fait une fontion pour afficher le panier en cliquant sur un bouton:

$(function() {
    $('#btn-boutique-menu').click(function(e) {
        e.preventDefault();
     
        if ($('#panier').hasClass('hidepanier'))
            {
                $('#panier').addClass('showpanier').removeClass('hidepanier').css({transform: 'translateX(0px)'});
            }
             
    });
})

hors cette fonction ne marche que sur certaine page comme la page de boutique, vidéo ou photos mais ne fonctionne pas sur les autres et me renvoie une erreur "Uncaught TypeError: Cannot read property 'hasClass' of null." dans la console.
Je ne comprend pas d'ou cela peut venir.

J'ai aussi esseyer de rajouter une autre condition dans ma fonction

$(function() {
	$('#btn-boutique-menu').click(function(e) {
		e.preventDefault();
	
		if ($('#panier').hasClass('hidepanier'))
		{
			$('#panier').addClass('showpanier').removeClass('hidepanier').css({transform: 'translateX(0px)'});
		}
		else
		{
			$('#panier').addClass('hidepanier').removeClass('showpanier').css({transform: 'translateX(400px)'});
		}
	});
})

et cette foit j'ai un message "Uncaught TypeError: jQuery(...).tooltip is not a function" (qui n'apparait que avec le navigateur google chrome je croit)

vous pouvez allez voir le site ici: http://melissa.steeventronet.com

Je me demande si le probleme ne vient pas du fait que j'ai rajouter le fichier JQuery dans mon template alors quil doit surement deja etre present dans Joomla

[ghazal]

Re : Probleme avec Jquery

Salut,
Je vois que c'est un template maison, mais comment appelles-tu ton script panier.js ?

[Xoto]

Re : Probleme avec Jquery

Salut,
Je vois que c'est un template maison, mais comment appelles-tu ton script panier.js ?

Alors dabord dans le header de mon index.php j'ai appeler le fichier jquery en faisant:

<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery.js" type="text/javascript" ></script>

puis apres la fermeture de mon body j'ai mait l'insertion du script panier.js avec

<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/panier.js" type="text/javascript" ></script>

[ghazal]

Re : Probleme avec Jquery

1* pourquoi appeler une 2e fois jQuery alors qu'il est présent par défaut dans joomla 3 ?

2* dans ton template, l'appel à un fichier js se fait plutôt de cette facon en respectant l'API joomla :
[EDIT]

<?php
$document = JFactory::getDocument();
// ajout JS
$document->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');

// ajout Stylesheets

$document->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
?>

Dans ce cas, avec un dossier js à la racine du template :

<?php
$document = JFactory::getDocument();
// ajout JS
$document->addScript($this->baseurl . '/templates/' . $this->template . '/js/panier.js');
?>

Le fichier js sera ainsi placé dans la head.

3*Si le fichier js est la head, l'usage, dans le cas de jQuery, est d'encapsuler le script de cette manière :

jQuery(function($){
$(document).ready(function() {
// code ici


});

});

Hope it helps.

[Xoto]

Re : Probleme avec Jquery

1* pourquoi appeler une 2e fois jQuery alors qu'il est présent par défaut dans joomla 3 ?

2* dans ton template, l'appel à un fichier js se fait plutôt de cette facon en respectant l'API joomla :

Dans ce cas, avec un dossier js à la racine du template :

Le fichier js sera ainsi placé dans la head.

3*Si le fichier js est la head, l'usage, dans le cas de jQuery, est d'encapsuler le script de cette manière :


Hope it helps.

Je pence plutot que ca doit etre
$doc = JFactory::getDocument();
aulieur de
$document = JFactory::getDocument();

Vue que pares tu utilise $doc->addScript() non ?

[Xoto]

Re : Probleme avec Jquery

Si je fait ce que tu ma dit j'ai une belle erreur comme quoi $doc n'est pas un objet, j'ai donc remplacer le $document par le $doc au debut du code sauf que la j'ai l'impression que il ne comprend plus le JQuery car je n'ai meme plus le e.preventDefault qui fonctionne et dans ma console j'ai une erreur "Uncaught TypeError: $ is not a function"
De plus sur ma page vidéos et photos ca a mit un peut le bazard car il ne sont plus aligner comme il faut

Pourtant au debut de mon index.php j'ai:

defined( '_JEXEC' ) or die( 'Restricted access' );

    $doc = JFactory::getDocument();
    $doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/panier.js'); 

et dans mon panier.js:

$(document).ready(function() {
    $('#btn-boutique-menu').click(function(e) {
        e.preventDefault();
     
        if ($('#panier').hasClass('hidepanier'))
        {
            $('#panier').addClass('showpanier').removeClass('hidepanier').css({transform: 'translateX(0px)'});
        }
        else
        {
            $('#panier').addClass('hidepanier').removeClass('showpanier').css({transform: 'translateX(400px)'});
        }
    });
});

__________________________________________________ __________________________________________________ _

Edit:
J'avait pas vue que j'avait oublier de mettre

JQuery(function($) {

});

autour de mon code, j'ai l'ai donc rajouter et ma page vidéo et photos et revenue comme il faut sauf que j'ai toujours l'impression qu'il ne comprend pas le JQuery car mon script ne marche pas et dans la console j'ai: "Uncaught ReferenceError: JQuery is not defined"

[ghazal]

Re : Probleme avec Jquery

Je pence plutot que ca doit etre
$doc = JFactory::getDocument();
aulieur de
$document = JFactory::getDocument();

Vue que pares tu utilise $doc->addScript() non ?

Sorry pour l'erreur.
Et, bien vu.
Tu as bien corrigé. Ceci est correct.

defined( '_JEXEC' ) or die( 'Restricted access' );

$doc = JFactory::getDocument();
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/panier.js');

sauf que j'ai toujours l'impression qu'il ne comprend pas le JQuery car mon script ne marche pas et dans la console j'ai: "Uncaught ReferenceError: JQuery is not defined"

Essaie alors :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );

JHtml::_('jquery.framework');

$doc = JFactory::getDocument();
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/js/panier.js');


?>

Pour s'assurer que ton script passe après l'appel aux fichiers jQuery.

Quand tu joues avec du JS dans Joomla, il faut toujours vérifier que ton script soit appelé après jQuery dans la liste de fichiers qui apparaissent dans le code source.

Hope it helps.

[Xoto]

Re : Probleme avec Jquery

Sorry pour l'erreur.
Et, bien vu.
Tu as bien corrigé. Ceci est correct.



Essaie alors :


Pour s'assurer que ton script passe après l'appel aux fichiers jQuery.

Quand tu joues avec du JS dans Joomla, il faut toujours vérifier que ton script soit appelé après jQuery dans la liste de fichiers qui apparaissent dans le code source.

Hope it helps.

Toujours le meme probleme. Voudrait tu que je te passe les fichier de mon template pour voir ?
Sinon il faudrait que je n'utilise pas JQuery et que je le fasse directement en Javascript mais cela m'embete un peu car c'est plus long

[ghazal]

Re : Probleme avec Jquery

Pourrais-tu plutôt mettre en place (et en ligne) ton script sur une page html simple hors joomla pour voir si il y a un pb sur le script lui-même ?

[ghazal]

Re : Probleme avec Jquery

Tu peux aussi essayer avec cet "encapsulage", lègèrement différent du 1er :

(function($){
$(document).ready(function() {
// ton code ici


});
})(jQuery);

[Xoto]

Re : Probleme avec Jquery

Pourrais-tu plutôt mettre en place (et en ligne) ton script sur une page html simple hors joomla pour voir si il y a un pb sur le script lui-même ?

Il n'y a pas de probleme sur le script car je vient de le tester et il fonctionne correctement
tu peut le voir ici http://steeventronet.com/script

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test Script JQuery</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="panier.js"></script>
	</head>

	<body>
		<a href="#" id="button"></a>
		<div id="panier" class="hidepanier"></div>
	</body>
</html>

CSS:

*
{
	margin: 0;
	padding: 0;
}

#button
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	background: red;
}

#panier
{
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
	height: 100%;
	background: black;

	transform: translateX(400px);
}

Javascript (JQuery)

$(document).ready(function() {
	$('#button').click(function(e) {
		e.preventDefault();

		if ($('#panier').hasClass('hidepanier'))
		{
			$('#panier').addClass('showpanier').removeClass('hidepanier').css({transform: 'translateX(0px)'});
		}
		else
		{
			$('#panier').addClass('hidepanier').removeClass('showpanier').css({transform: 'translateX(400px)'});
		}
	})
})

[ghazal]

Re : Probleme avec Jquery

Effectivement, ca fonctionne nickel hors joomla.

Peux-tu tester avec mon module, qui est fait pour ça, cad, implémenter script JS et css dans joomla :

https://github.com/ghazal/mod_multijscss

En virant tout ce qu'on a fait de ton index.php

L'implémentation des scripts de ce type d'effet (un "overlay" d'une partie de la page) dans joomla m'intéresse beaucoup.
J'ai pas mal bossé dessus, mais directement sur un composant et intégré dans joomla.
Je vais regarder ce que j'ai en stock.

[Xoto]

Re : Probleme avec Jquery

Effectivement, ca fonctionne nickel hors joomla.

Peux-tu tester avec mon module, qui est fait pour ça, cad, implémenter script JS et css dans joomla :

https://github.com/ghazal/mod_multijscss

En virant tout ce qu'on a fait de ton index.php

L'implémentation des scripts de ce type d'effet (un "overlay" d'une partie de la page) dans joomla m'intéresse beaucoup.
J'ai pas mal bossé dessus, mais directement sur un composant et intégré dans joomla.
Je vais regarder ce que j'ai en stock.

J'ai installer ton module mais je ne trouve pas comment faire pour selectionner mon propre fichier javascript car dans la configuration du module il me propose seulement de mettre des fichier deja existant.
De plus j'aurait preferer ne pas avoir a passer par ce genre de module et de tout mettre dans mon template ce qui est plus pratique par la suite pour mettre le template sur d'autre site.

__________________________________________________ _____________________________________________

Edit: Pour rajouter mon script panier.js je l'est placer dans le dossier media du module pui je l'est reinstaller ce qui a fonctionner. J'ai donc configurer le module pour qu'il rajoute le fichier panier.js mais j'ai toujours le meme probleme avec l'erreur: Uncaught ReferenceError: JQuery is not defined

[electrocity]

Re : Probleme avec Jquery

Bonsoir,
Ou là ghazal, il faut que tu révises tes codes jquery.
Le soucis vient de

$(function() {

ou encore

$(document).ready(function() {

pour supprimer tous conflit il faut utiliser

jQuery(function($) {
// $ en paramètre permet d'utiliser jQuery dans la fonction avec $
}

ceci est équivalent à(qui fera une erreur) :

$(document).ready(function() {

}

Ceci est plus court et supprime tous conflit avec le $ de mootools ou autre script utilisant le $, et c'est la version préconiser

Référence : https://api.jquery.com/ready/

[Xoto]

Re : Probleme avec Jquery

Bonsoir,
Ou là ghazal, il faut que tu révises tes codes jquery.
Le soucis vient de

$(function() {

ou encore

$(document).ready(function() {

pour supprimer tous conflit il faut utiliser

jQuery(function($) {
// $ en paramètre permet d'utiliser jQuery dans la fonction avec $
}

ceci est équivalent à(qui fera une erreur) :

$(document).ready(function() {

}

Ceci est plus court et supprime tous conflit avec le $ de mootools ou autre script utilisant le $, et c'est la version préconiser

Référence : https://api.jquery.com/ready/

Si jai bien comprit tu veut que je modifie les $ par JQuery ? Si cest le cas jai deja esseyer et je tombe sur lerreur: "Uncaught ReferenceError: JQuery is not defined"

Sinon pourrait tu me refaire le script comme tu le dit stp?