[Problème] Error:jQuery is not defined

[PieceOfCake]

Bonjour tout le monde,

Je m'étais promis de ne pas replonger dans le coding ... raté (promesse d'ivrogne forcément ! )
J'ai donc voulu recoder (un peu) sur mon site et je dois le dire, (presque) tout marche bien, presque, sinon je ne vous ennuierai pas ici ... forcément (aussi)

Pour redémarrer doucement, je n'ai codé que du javascript (dynamique) avec jQuery et Sourcerer pour me faciliter la vie (??!)
2 lignes de php toujours avec Sourcerer pour intégrer un fichier css et hop : tout marche parfaitement bien

Passage à la vitesse supérieure, j'extrais le code javascript et le place dans un fichier et rajoute une ligne de code PHP dans sourcerer pour le charger dynamiquement.
C'est là que les choses se corsent !
A première vue tout marche bien, l'article qui utilise le code javascript est publié sur la page d'accueil sous forme de blog des articles en vedette et fonctionne toujours parfaitement.


C'est seulement lorsque j'essaie d'afficher ce même article en tant qu'article à part entière que tout part en vrille ... La console indique Error:jQuery is not defined à la sortie du test habituel dans ce genre de cas :

try{
jQuery(document).ready(function(){
    function calculateTime()
    {
        var currentDate=new Date();
        .....
    }
;}
catch(e){
console.error('Error in file:https://www.monsitetest.fr/templates/GC/js/missiontimers4.js; Error:'+e.message);
};

avec bien sûr, e.message valant : "Error:jQuery is not defined"

jQuery not defined ? comment cela se peut-il ? N'est-il pas inséré automatiquement par Joomla! ?

Je suis bien à jour de mes versions (3.8.7 pour Joomla! et 7.1.16 pour PHP)

Si quelqu'un a une idée du pourquoi du comment, ce sera avec plaisir ...

Merci d'avance

Nota : évidemment quand le javascript était entièrement dans sourcerer je n'avais pas ce problème et même affiché en tant qu'article hors du blog des articles en vedette, il marchait magnifiquement bien

[pmleconte]

Bonjour,

En principe, le chargement de jQuery est assurée par le template (s'il en a besoin).

S'il est bien chargé, il faut regarder si, pour des raisons de performance, le chargement n'est pas retardé (defered).

Au niveau de "mes" modules, j'utilise toujours la commande JHtml::_('jquery.framework'); pour être sûr que c'est chargé quand ils sont lancés.

Pascal

[PieceOfCake]

Merci Pascal, je vais essayer de voir avec ça si ca veut bien passer sous Sourcerer

si je récupère False en retour, je suppose qu'il me faut charger moi-même manuellement jQuery ?

[ghazal]

Hello,
inclure du JS dans Joomla est devenu relativement aisé si tu suis les bonnes pratiques.

Préliminaires : appel classique et joomla-approved à Jquery dans un fichier

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

});
});

A - Les fichiers
1- via le template -> Le script JS sera présent sur toutes les pages
Dans index.php de protostar, regarder :

// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));


JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

* Dans :

JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));

Constate que le fichier template.js est bien placé dans le dossier /js/ du template

JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

En revanche, ce fichier est placé dans media/jui/js

La première méthode n'est valable que dans un template.
PS : la partie 'conditional' est liée aux comportements particuliers de IE9

* La deuxième méthode est valable dans n'importe quelle view de n'importe quel composant/module à partir du moment où tu as créé :
dans /media/
un dossier /mondossier/ et des sous-dossiers /css/ et et /js/
PS : le dossier CSS est souvent indispensbale
Exemple :

JHtml::_('script', 'mondossier/monscript.js', array('version' => 'auto', 'relative' => true));

2 - Via les overrides -
Avantages :
- placement précis du JS uniquement dans la view du composant/module concerné
- le fichier JS ne sera chargé QUE dans l'article (en l'occurrence, la view com_content/article) concerné

Créer un override de com_content/article via l'admin
Dupliquer default.php
Nommer le fichier dupliqué, ex test.php

A ce niveau :

defined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

Insérer l'appel aux fichiers :

defined('_JEXEC') or die;

JHtml::_('jquery.framework');
JHtml::_('stylesheet', 'mondossier/macss.css', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'mondossier/monscript.js', array('version' => 'auto', 'relative' => true));

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

Noter que j'ai rajouté :

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

pour garantir le chargement d'un script jquery-dépendant avec un positionnement APRES le script jquery lui-même.

Ensuite, lors de de la création de l'article,
dans Paramètres/Type de mise en page
ou
Options/Layout (EN)
on doit retrouver test.php dans la liste déroulante -> ---Du template Protostar-> test


Si tu joues avec cette technique, tu peux faire ce que tu veux.


B - Dans un fichier php si on doit ajouter des variables php
Le plus simple :

            $doc = JFactory::getDocument();
            $script = "
                (function($){
                    $(document).ready(function() {
                        $('" . $selector . "').searchtools(
                            " . $options->toString() . "
                        );
                    });
                })(jQuery);
            ";
            $doc->addScriptDeclaration($script); 

où $selector et $options sont des variables php

Hope it helps.

[PieceOfCake]

Merci pour toutes ses précisions Ghazal, je ne manquerai pas de les reprendre pas à pas, parce que l'étape suivante va être d'écrire un plugin pour accéder en Ajax à un serveur tiers, sourcerer ne me suffira plus....

Pour le moment le rajout de JHtml::_('jquery.framework'); en début du code PHP de sourcerer a réglé mon problème immédiat et c'est déjà très satisfaisant en ce qui me concerne en tout cas.

Merci à tous

[ghazal]

Re : sourcerer
effectivement sourcerer est très pratique pour un usage ponctuel :
J'utilise :

{source}
<?php
JHtml::_("stylesheet", "mondossier/macss.css", false, true);
JHtml::_("script", "mondossier/monscript.js", false, true);
?>
{/source}

et toujours

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

pour garantir le bon placement de mon fichier jquery-dependant.

Remarque:
parmi les excellentes extensions de regularlabs, ReReplacer permet également cette méthode, en activant php dans les options de Details ->Treat as PHP
et avec :

<?php
JHtml::_('stylesheet', 'mondossier/mestests.css', false, true);
JHtml::_('jquery.framework');
JHtml::_('script', 'mondossier/monscript.js', false, true);
?>

[ghazal]

je ne manquerai pas de les reprendre pas à pas, parce que l'étape suivante va être d'écrire un plugin pour accéder en Ajax à un serveur tiers, sourcerer ne me suffira plus...

Je ne sais pas si cela correspondra à tes besoins, mais ReReplacer est un outil super.