Uncaught ReferenceError: jQuery is not defined

JulianW · 25. Oktober 2018

Hallo Leute,

ich kriege in meiner Console immer die Fehlermeldung "Uncaught ReferenceError: jQuery is not defined".

Mein JQuery möchte so auch nicht funktionieren. auf meiner lokalen Testumgebung läuft es ohne Probleme.

Habt Ihr Ideen, was ich ändern könnte???

Webseite: familienzentrum-kaufungen.de

Einstellung	Wert

PHP erstellt für	Linux info 3.0 #1337 SMP Tue Jan 01 00:00:00 CEST 2000 all GNU/Linux
Database Type	mysql
Datenbankversion	5.5.60-0+deb7u1-log
Datenbankzeichensatz	utf8_general_ci
Database Connection Collation	utf8mb4_general_ci
PHP-Version	7.2.10
Webserver	Apache
PHP-Interface für den Webserver	cgi-fcgi
Joomla!-Version	Joomla! 3.8.13 Stable [ Amani ] 9-October-2018 14:00 GMT
Joomla!-Plattform-Version	Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
Browsererkennung	Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36

Viele Grüße

Julian

Re:Later · 25. Oktober 2018

Hast du denn das hier schon gemacht, geprüft?

Joomla lädt JQuery nicht

Die Sache ist, dass niemand wissen kann, wer oder was oder warum dir deine JQueries falsch lädt. An falscher Stelle und doppelt und zu spät.

Du schreibst dort ja auch, dass du das Template selbst erstellt hast. Es ist einfach so, dass man bestimmte Dinge in Joomla einfach streng beachten muss. Dazu gehört eben auch JQuery so laden, wie dort beschrieben und nicht von einem CDN.

Indigo66 · 25. Oktober 2018

Zitat von Re:Later

Dazu gehört eben auch JQuery so laden, wie dort beschrieben und nicht von einem CDN.

Das ist richtig. Vor allem der FF-Developer blockt jQuery über CDN.
Habe eben ein JS-Problem gefixt in dem ich jQuery (selbe Version wie CDN) lokal geladen ließ.

JulianW · 25. Oktober 2018

Zitat von Re:Later

Hast du denn das hier schon gemacht, geprüft?

Joomla lädt JQuery nicht

Die Sache ist, dass niemand wissen kann, wer oder was oder warum dir deine JQueries falsch lädt. An falscher Stelle und doppelt und zu spät.

Du schreibst dort ja auch, dass du das Template selbst erstellt hast. Es ist einfach so, dass man bestimmte Dinge in Joomla einfach streng beachten muss. Dazu gehört eben auch JQuery so laden, wie dort beschrieben und nicht von einem CDN.

Alles anzeigen

Meiner Meinung nach habe ich es so eingebunden, aber ich vlt. habe ich die Tipps auch nicht verstanden.

PHP

<?php defined( '_JEXEC' ) or die;
// settings
JHtml::_('jquery.framework');

$framework = 'none' ; //you may chose between bootstrap, bootstrap-current, skeleton and materialize
$devmode = false; //set devmod = null to load static css instead of less
$fontAwesome = null;

include_once JPATH_THEMES . '/' . $this->template . '/logic.php';
JHtml::_('script', 'menu.js', array('relative' => true));
?><!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">


    <head>

      <jdoc:include type="head" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="apple-touch-icon-precomposed" href="<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">

        <script>
            if (typeof jQuery != 'undefined') {
            // jQuery is loaded => print the version
             console.log("JQUERY: "+jQuery.fn.jquery);
            }
            else
            {
               console.log("JQUERY nicht geladen");
            }
        </script>
    </head>
    <body class="<?php echo ( $menu->getActive() == $menu->getDefault() ? 'front' : 'site' ) . ' ' . $active->alias . ' ' . $pageclass; ?>">
        <header>
            <!-- Logo -->
            <div id="ud_logo"><a href="<?php echo JUri::base()?>"><img src="templates/familienzentrum/images/logo.jpg" alt="Familienzentrum-Kaufungen" /></a></div>

            <!-- Navigation -->
            <nav>
                <jdoc:include type="modules" name="nav" style="none" />
            </nav>
            <div id="burger" style="display: none;">
                <button class="ud_menu_icon ud_menu_icon-X">
                    <span></span>
                </button>
                <nav id="mobile">
                    <jdoc:include type="modules" name="nav" style="none" />
                 </nav>

            </div>
        </header>

        <div id="main">

            <?php


                $url = $this->base;
                $pos = strpos($url, "kurse/");
                $pos = 0; //<--temp
            if(!$pos)
            {
            ?>
            <div id="banner">
                <div id="ud_logo"><a href="<?php echo JUri::base()?>"><img src="templates/familienzentrum/images/banner.jpg" alt="Familienzentrum-Kaufungen"/></a></div>
            </div>

            <?php }?>
            <jdoc:include type="component" />
        <jdoc:include type="modules" name="sidebar"/>

        <footer>
            <nav>
                <jdoc:include type="modules" name="footer" style="none"/>
            </nav>

            <div id="ud_copyright">Designed by <a href="mailto:info@werner-julian.de">Julian Werner</a></div>
       </footer>
       </div>

        <?php echo $scripts; ?>
    </body>
</html>

<?php
echo minimize( ob_get_clean() );

Alles anzeigen

Das ist meine index.php. Wenn dort etwas falsch ist wäre es schön wenn dazu konkrete Änderungen gibt

Gruß

Julian

Re:Later · 25. Oktober 2018

Zeile 84 scheint was falsch zu machen.

PHP

        <?php echo $scripts; ?>

Weil dort wird das Joomla-JQuery eingebaut. Ich kann nur vermuten, dass die dahintersteckende Logik die dort eingesetzten Dateien aus dem Document-Head entfernt, so dass sie später nicht mehr im echten <head> zur Verfügung stehen, also bei Rendern der Zeile

Code

<jdoc:include type="head" />

Ich verstehe den Ansatz, diese Sachen vor dem schließenden </body> zu laden. Das ist aber in Joomla fast nicht machbar, da wie gesagt, jede Menge anderer, abhängiger Kram dann doch zu früh im HEAD geladen wird. Bspw. bei dir der Wurm

Code

<script>
document.addEventListener("DOMContentLoaded", function () {
__sigplusInitialize("sigplus_1001");
__sigplusCaption("sigplus_1001", null, "{$text} ({$current}\/{$total})");

-------- HIER !! JQuery-Abhängigkeit, aber kein JQuery zuvor geladen

jQuery("#sigplus_1001 a.sigplus-image").attr("data-fancybox", "sigplus_1001").fancybox(jQuery.extend({caption: function(instance,item) {return caption = jQuery(this).data("summary") || "";}}, {"loop":true,"protect":false,"slideShow":false,"lang":"de","buttons":{"0":"zoom","1":"slideShow","2":"fullScreen","3":"thumbs","4":"close"}}));
new SlidePlusSlider(document.querySelector("#sigplus_1001 ul"), {"rows":1,"cols":1,"loop":true,"orientation":"horizontal","step":"single","links":false,"delay":0,"captions":"bottom","protection":false,"dir":"ltr"}, function (el) { return el.querySelector('.sigplus-image').getAttribute('data-title') || el.querySelector('.sigplus-image img').alt; });
}, false);
    </script>

Alles anzeigen

Der Kram kann irgendwo aus Joomla und/oder Erweiterungen kommen. Man hat da kaum Einfluss drauf ohne weitere recht komplex zu programmierende, eigene Plugins. EDIT: Oder Fieselei und später immer Auge drauf, da man nie wissen kann, wie sauber andere Erweiterungem Ihre Ladungen abwickeln.

Weiters gibt es halt noch diesen viel zu späten Block in Zeile 57 im Seitenquelltext (via Firefox-Browser):

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

der später Konflikte machen kann, selbst, wenn Joomla sein JQuery dann richtig lädt.

Vielleicht lädt das irgendein Modul oder Plugin? Wo man ja gelegentlich JQuery-Ladung aktivieren kann. oder dein Template selbst in einem magischen Script?

Wenn du auf 3.3.1 wert lägst, musst du Joomla via Template-Overrides für JQuery "austricksen", die dann aber ebenfalls über Zeile

Zitat von JulianW

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

geladen werden, damit keine doppelten Ladungen.

JulianW · 25. Oktober 2018

Es ist mir eigentlich egal welche JQuery Version geladen ist. Auf meinem Lokalem Apache Server ist JQuery auch geladen wenn ich kein weiteres Skript einbinde. also einfach nur JHtml::_('jquery.framework');

Auf dem Webserver wird ohne eine Anbindung allerdings der else Teil ausgeführt und somit ist JQuery ja nicht geladen

Code

<script>
            if (typeof jQuery != 'undefined') {
            // jQuery is loaded => print the version
             console.log("JQUERY: "+jQuery.fn.jquery);
            }
            else
            {
               console.log("JQUERY nicht geladen");
            }
        </script>

Das bedeutet ja ich habe irgendwo einen Fehler

PHP

<?php echo $scripts; ?>

War so schon in meinem Blanko Template
Ich hatte absolut keine Ahnung von Joomla und probiere mich jetzt immer mehr reinzufuchsen und

scheitere dann weil es auf lokal und extern nicht gleich funktioniert

Re:Later · 25. Oktober 2018

Zitat von JulianW

include_once JPATH_THEMES . '/' . $this->template . '/logic.php';

Die Unlogic kann ja eigentlich nur in dieser Datei irgendwo kreiert werden trotz des gegensätzlichen Namens

Zitat von JulianW

War so schon in meinem Blanko Template

Und wo hast du das her? Und ist das für Joomla gedacht?

JulianW · 25. Oktober 2018

Inhalt der logic.php

PHP

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

//defaults
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$doc->setHtml5( true );

$menu = $app->getMenu();
$active = $app->getMenu()->getActive();
$params = $app->getParams();
$pageclass = $params->get( 'pageclass_sfx' );
$tpath = $this->baseurl . '/templates/' . $this->template;

$templateCSS = $tpath . '/css/template.min.css';

if ( isset( $devmode ) ) {
  $templateCSS = $tpath . '/css/template.css.php';
}

// remove generator tag
$this->setGenerator( null );

//add critical css support (aka "above the fold" css)
$critical = JPATH_THEMES . '/' . $this->template . '/css/critical.css';
$criticalcss = @file_get_contents( $critical ); //dont throw error if no file

if ( ! empty( $criticalcss ) ) {
    $doc->addStyleDeclaration( $criticalcss );
}

switch ( $framework ){
   case 'bootstrap':
       $direction = 'ltr';
       JHtmlBootstrap::framework();
       JHtmlBootstrap::loadCSS( true, $direction );
       break;

   case 'bootstrap-current':
       JHtml::_( 'jquery.framework' );
       $doc->addStyleSheet( $tpath . '/css/bootstrap.min.css' );
       $doc->addScript( $tpath.'/js/bootstrap.min.js' );
       break;

   case 'skeleton':
   case 'skeleton-framework':
       $doc->addStyleSheet( $tpath . '/css/skeleton.min.css' );
       break;

   case 'materialize':
       JHtml::_( 'jquery.framework' );
       $doc->addStyleSheet( '//fonts.googleapis.com/icon?family=Material+Icons' );
       $doc->addStyleSheet( $tpath . '/css/materialize.min.css' );
       $doc->addScript( $tpath . '/js/materialize.min.js' );
       break;

   default:
       break;
}

if ( isset ( $fontAwesome ) ){
  $doc->addStyleSheet( $tpath . '/css/fontawesome.min.css' );
}

// template js
$doc->addScript( $tpath . '/js/logic.js' );
$doc->addStyleSheet( $templateCSS );

//move scripts and css to the end of body to keep it from blocking
$scripts = '';
//foreach( $doc->_styleSheets as $sheet => $settings ) {
//    $media = ( false == $settings['media'] ) ? '' : ' media="' . $settings['media'] . '"';
//    $scripts .= '<link ' . $media . 'rel="stylesheet" href="' . $sheet . '">';
//    unset( $doc->_styleSheets[$sheet] );
//}
//
//foreach( $doc->_scripts as $script => $settings) {
//    $async = ( false == $settings['async'] ) ? '' : ' async';
//    $defer = ( false == $settings['defer'] ) ? '' : ' defer';
//    $scripts .= '<script' . $async . $defer . ' type="text/javascript" src="' . $script . '"></script>' . "\n";
//    unset( $doc->_scripts[$script] );
//}

$scripts .= '<script type="text/javascript">' . implode( ' ' , $doc->_script ) . '</script>';
$doc->_script = array();

//output buffering
ob_start();

function minimize( $body = '') {
  $replace = array(
    //remove tabs before and after HTML tags
    '/\>[^\S ]+/s'   => '>',
    '/[^\S ]+\</s'   => '<',
    //shorten multiple whitespace sequences; keep new-line characters because they matter in JS!!!
    '/([\t ])+/s'  => ' ',
    //remove leading and trailing spaces
    '/^([\t ])+/m' => '',
    '/([\t ])+$/m' => '',
    // remove JS line comments (simple only); do NOT remove lines containing URL (e.g. 'src="http://server.com/"')!!!
    '~//[a-zA-Z0-9 ]+$~m' => '',
    //remove empty lines (sequence of line-end and white-space characters)
    '/[\r\n]+([\t ]?[\r\n]+)+/s'  => "\n",
    //remove empty lines (between HTML tags); cannot remove just any line-end characters because in inline JS they can matter!
    '/\>[\r\n\t ]+\</s'    => '><',
    //remove "empty" lines containing only JS's block end character; join with next line (e.g. "}\n}\n</script>" --> "}}</script>"
    '/}[\r\n\t ]+/s'  => '}',
    '/}[\r\n\t ]+,[\r\n\t ]+/s'  => '},',
    //remove new-line after JS's function or condition start; join with next line
    '/\)[\r\n\t ]?{[\r\n\t ]+/s'  => '){',
    '/,[\r\n\t ]?{[\r\n\t ]+/s'  => ',{',
    //remove new-line after JS's line end (only most obvious and safe cases)
    '/\),[\r\n\t ]+/s'  => '),',
    //remove quotes from HTML attributes that does not contain spaces; keep quotes around URLs!
    //'~([\r\n\t ])?([a-zA-Z0-9]+)="([a-zA-Z0-9_/\\-]+)"([\r\n\t ])?~s' => '$1$2=$3$4', //$1 and $4 insert first white-space character found before/after attribute
  );
  return preg_replace( array_keys( $replace ) , array_values( $replace ) , $body );
}

Alles anzeigen

Von hier -> https://pixelstun.de/blog/joomla/joomla-blank-template/

bzw. aus dem Repository auf GitHub

Re:Later · 25. Oktober 2018

Zitat von JulianW

bzw. aus dem Repository auf GitHub

Ich find da nix, was deiner logic.php entspricht.

Aus Zeitmangel bei mir:

Installier dir mal Plugin System - jQuery Easy. Vielleicht hilft's.

und aktiviere im Reiter JQuery

- JQuery

- Version: 2 x Joomla Framework.

Unter "Zusätzliche Modifikationen"

- Ersetzen ohne Konflikt: Ja

- Hinzufügen wenn fehlend: Ja

- jQuery "No Conflict" Code entfernen: Ja

- Füge jQuery "No Conflict" Code hinzu: Ja

- "Document Ready" korrigieren: Ja

In deiner logic.php Ein Gatterzwichen # vor Zeilen 83 und 84 deines obigen Codes.

Sowie Zeile 87.

In der index.php Gatterzeichen # vor Zeile

echo minimize( ob_get_clean() );

Wenn du später mal die Seite minifizieren willst, dann nimm das JCH-Plugin. Da gibt es eine Option für HTML minifizieren.

JulianW · 25. Oktober 2018

Ich habe jetzt das komplette Template neu aufgespielt und jetzt geht es.

War wohl einfach irgendwo der Wurm drin.

Ich danke euch für eure grandiose Hilfe

Tags