Hi,
Lately I have upgraded a website from WB2.8.3 Sp1 to the latest version, WB2.12.
The module "capslider" didn't work anymore and I found a note I better use "minislider" instead.
Loaded and edit Minislider.
And then nothing was shown.
There is a an error message:
frontend.js:9 Uncaught ReferenceError: $ is not defined
(anonymous) @ frontend.js:9
So I have added a test page with the module and a default WB template (WebsiteBaker Default Template v1.0.4.dev2)
Here the slider is shown.
I have red another post about jquery.js being loaded twice. I think that is not the case here (or I must have missed it).
Because is site is developed locally, I do not have an URL to go to, to show you the problem.
This is the index.php file of the not working slider:
<?php
/**
* $Id: index.php 1106 2009-08-06 16:07:39Z Ruebenwurzel $
* Website Baker template: simple, adpated for Overkant
* This template is one of four basis templates distributed with Website Baker.
* Feel free to modify or build up on this template.
*
* This file contains the overall template markup and the Website Baker
* template functions to add the contents from the database.
*
* LICENSE: GNU General Public License
*
* @author Ryan Djurovich, C. Sommer, changed by Ron Kraaijkamp
* @copyright GNU General Public License
* @license http://www.gnu.org/licenses/gpl.html
* @version 2.70
* @platform Website Baker 2.7
*
* Website Baker is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* Website Baker is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
// prevent this file from being accessed directly
if (!defined('WB_PATH')) die(header('Location: ../../index.php'));
// TEMPLATE CODE STARTS BELOW
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php
echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET : 'utf-8'; ?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<?php
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
register_frontend_modfiles('js');
register_frontend_modfiles('jquery');
}
?>
<link rel="stylesheet" type="text/css" href="<?php
echo TEMPLATE_DIR; ?>/template.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php
echo TEMPLATE_DIR; ?>/print.css" media="print" />
<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
<!-- Script used for showslider aka capslider for picture banner -->
<!-- <script type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js"></script> -->
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="header" height="100" width="400">
<!-- Logo in css file -->
</td>
<td class="menu">
<?php
if (SHOW_MENU2) {
// navigation menu
show_menu2(1,0,1,true,'[a]|[menu_title][/a] ','','<ul> ','</ul>');
} ?>
</td>
</tr>
<tr>
<td colspan="2" class="devider">
</td>
</tr>
<tr>
<td colspan="2" class="content">
<?php echo '<H1>',page_title('','[PAGE_TITLE]'),'</H1>'; ?>
<br />
<?php page_content(); ?>
</td>
</tr>
<tr>
<td colspan="2" class="extrainfo">
<!-- <?php page_footer(); ?> -->
<table width="1019" bgcolor="#3C3C3C" cellpadding="10">
<tr>
<td valign="top" width="25%" class="extrainfo">
<p>[[SectionPicker?sid=24]]</p> <!-- pagina: Extra Info Onder Links -->
</td>
<td valign="top" width="25%" class="extrainfo">
<p>[[SectionPicker?sid=25]]</p> <!-- pagina: Extra Info Onder Links Midden-->
</td>
<td valign="top" width="25%" class="extrainfo">
<p>[[SectionPicker?sid=27]]</p> <!-- pagina: Extra Info Onder Rechts Midden -->
</td>
<td valign="top" width="25%" class="extrainfo">
<p>[[SectionPicker?sid=26]]</p> <!-- pagina: Extra Info Onder Rechts -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" class="footer">
[[ModifiedWhen]] © Stichting "de Overkant" en <a href="http://www.2rsweb.nl/pages/nederlands-dutch/hobby/websites-bouwen.php" target="_blank">2RSweb.nl</a>
</td>
</tr>
</table>
<?php
// automatically include optional WB module file frontend_body.js)
if (function_exists('register_frontend_modfiles_body')) { register_frontend_modfiles_body(); }
?>
</body>
</html>
And here is a part of source view of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Voetveer De Overkant, Ameide - Lopik" />
<meta name="keywords" content="Voetveer "De Overkant" Ameide Lopik" />
<link rel="stylesheet" href="/modules/WBLingual/frontend.css" media="screen" />
<link rel="stylesheet" href="/modules/minislider/frontend.css" media="screen" />
<script>
/* inserted by register_frontend_modfiles */
var URL = 'http://localhost';
var WB_URL = 'http://localhost';
var THEME_URL = 'http://localhost/templates/DefaultTheme';
var TEMPLATE_DIR = 'http://localhost/templates/Overkant';
var TEMPLATE = 'Overkant';
var EDITOR = 'ckeditor';
</script>
<script src="/include/jquery/domReady-min.js"></script>
<script src="/include/jquery/LoadOnFly-min.js"></script>
<script src="/modules/minislider/frontend.js"></script>
<script src="/include/jquery/jquery-min.js"></script>
<script src="/include/jquery/jquery-migrate-min.js"></script>
<script src="/include/jquery/jquery-insert.js"></script>
<script src="/include/jquery/jquery-include.js"></script>
<script src="/include/jquery/jquery_theme.js"></script>
<script src="/include/jquery/jquery-ui-min.js"></script>
<script src="/include/jquery/jquery_frontend.js"></script>
<link rel="stylesheet" type="text/css" href="/templates/Overkant/template.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="/templates/Overkant/print.css" media="print" />
<title>Voetveer De Overkant, Ameide - Lopik</title>
<!-- Script used for showslider aka capslider for picture banner -->
<!-- <script type="text/javascript" src="/include/jquery/jquery-min.js"></script> -->
<script src="/modules/output_filter/js/mdcr.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td class="header" height="100" width="400">
<!-- Logo in css file -->
</td>
<td class="menu">
<ul> <a href="http://localhost" target="_top" rel="noopener" title="Home">|Home</a> <a href="/pages/vaartijden.php" target="_top" rel="noopener" title="Vaartijden">|Vaartijden</a> <a href="/pages/tarieven.php" target="_top" rel="noopener" title="Tarieven">|Tarieven</a> <a href="/pages/fotoalbum.php" target="_top" rel="noopener" title="Fotoalbum">|Fotoalbum</a> <a href="/pages/fietsroutes.php" target="_top" rel="noopener" title="Fietsroutes">|Fietsroutes</a> <a href="/pages/links.php" target="_top" rel="noopener" title="Links">|Links</a> <a href="/pages/sponsors.php" target="_top" rel="noopener" title="Sponsors">|Sponsors</a> <a href="/pages/test.php" target="_top" rel="noopener" title="Test">|Test</a> </ul> </td>
</tr>
<tr>
<td colspan="2" class="devider">
</td>
</tr>
<tr>
<td colspan="2" class="content">
<H1>Home</H1> <br />
<div id="wb_41" class="section m_minislider" >
<div class="slider-wrapper theme-default"><div class="ribbon"></div><div id="slider" class="nivoSlider"> <img src="/media/minislider/41/1.jpg" data-transition="fade" title="1" alt="" /> <img src="/media/minislider/41/2.jpg" data-transition="fade" title="2" alt="" /> <img src="/media/minislider/41/3.jpg" data-transition="fade" title="3" alt="" /> <img src="/media/minislider/41/4.jpg" data-transition="fade" title="4" alt="" /></div></div>
</div><!-- minislider41 -->
With this template index.php file it is working:
<?php
/**
* $Id: index.php 2 2017-07-02 15:14:29Z Manuela $
* Website Baker template: allcss
* This template is one of four basis templates distributed with Website Baker.
* Feel free to modify or build up on this template.
*
* This file contains the overall template markup and the Website Baker
* template functions to add the contents from the database.
*
* LICENSE: GNU General Public License
*
* @author Ryan Djurovich, C. Sommer
* @copyright GNU General Public License
* @license http://www.gnu.org/licenses/gpl.html
* @version 2.70
* @platform Website Baker 2.7
*
* Website Baker is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* Website Baker is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
/* -------------------------------------------------------- */
// Must include code to stop this file being accessed directly
if (!defined('SYSTEM_RUN')) {header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found'); echo '404 File not found'; flush(); exit;}
/* -------------------------------------------------------- */
ob_start(); //fetch MainContent
page_content(1);
$page_contentMain = \ob_get_clean();
ob_start(); //fetch original header content
page_content(2);
$page_contentTeaser = \ob_get_clean();
ob_start(); //fetch original header content
page_content(3);
$page_contentSidebar = \ob_get_clean();
$sPageLang = strtolower(isset($wb->page) || ($wb instanceof frontend) ? $wb->page['language'] : 'EN');
$iPageId = (defined('PAGE_ID') ? PAGE_ID : 0);
// TEMPLATE CODE STARTS BELOW
?><!DOCTYPE HTML>
<html lang="<?php echo $sPageLang; ?>">
<head>
<meta charset="utf-8" />
<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<meta name="robots" content="noodp" />
<meta name="referrer" content="same-origin" />
<!-- Mobile viewport optimisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/3/w3.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/print.css" media="print" />
<link rel="canonical" href="[wblink<?php echo $iPageId;?>]"/>
<link rel="shortcut icon" href="<?php echo TEMPLATE_DIR; ?>/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="<?php echo TEMPLATE_DIR; ?>/images/apple-touch-icon.png"/>
<!--
<link rel="alternate" type="application/rss+xml" title="Test RSS-Feed" href="<?php echo WB_URL; ?>/modules/news/rss.php?page_id=??" />
-->
<?php
if (!function_exists('LangPadeId')) {function LangPadeId(){return $iPageId;}}
// to show flags in frontend
$iMultiLang = 0;$sMultiLang = ''; if (function_exists('language_menu')){$sMultiLang = language_menu('png',false); $iMultiLang = intval(!empty($sMultiLang) ? 1 : 0);}
if (function_exists('LangPadeId')&&$iMultiLang) {
?>
<!--
<link rel="alternate" hreflang="x-default" href="[wblink<?php echo LangPadeId($sPageLang);?>]" />
<link rel="alternate" hreflang="de" href="[wblink<?php echo LangPadeId('DE');?>]" />
<link rel="alternate" hreflang="en" href="[wblink<?php echo LangPadeId('EN');?>]" />
-->
<?php
}
// automatically include optional WB module files (frontend.css)
register_frontend_modfiles('css');
// if function LangPadeId doesn't exists, you have to upgrade WBLingual Switcher Add-on to latest version'
// automatically include optional WB module files (frontend.js, jQuery) enable OldModFiles in OutputFilter
register_frontend_modfiles('jquery');?>
<?php register_frontend_modfiles('js'); ?>
<script id="headjs" src="<?php echo TEMPLATE_DIR; ?>/js/head.js"></script>
</head>
<body class="allcssRes gradient-sweet-home">
<?php if (function_exists('cookie_permission')){cookie_permission();} ?>
<div id="allcssRes-wrapper" class="main outer-box ">
<header >
<div class="banner gradient">
<a class="h1" href="<?php echo WB_URL; ?>/" target="_top"><?php page_title('', '[WEBSITE_TITLE]'); ?></a>
<span class="h1">| <?php page_title('', '[PAGE_TITLE]'); ?></span>
</div>
<!-- frontend search -->
<div class="search_box gradient round-top-left round-top-right">
<?php
// CODE FOR WEBSITE BAKER FRONTEND SEARCH
if (SHOW_SEARCH) { ?>
<form id="search" action="<?php echo WB_URL; ?>/search/index.php" method="get" >
<input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : $iPageId; ?>" />
<input type="text" name="string" class="search_string" />
<input type="submit" name="wb_search" id="wb_search" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
</form>
<?php } ?>
</div>
</header>
<?php if(trim($page_contentTeaser)!=''){ ?>
<div class="teaser">
<div class="content">
<?php echo $page_contentTeaser; ?>
</div><!-- content -->
</div><!-- teaser -->
<?php } ?>
<input type="checkbox" id="open-menu" />
<label for="open-menu" class="open-menu-label">
<span class="title h4"> <?php page_title('', '[PAGE_TITLE]'); ?></span>
<span class="fa fa-bars" aria-hidden="true"> </span>
</label>
<div id="lang" style="height: 2.925em;">
<?php if(trim($sMultiLang)!=''){ ?>
<?php echo $sMultiLang; ?>
<?php } ?>
</div>
<div id="left-col">
<div class="content">
<!-- main navigation menu -->
[[iEditThisPage?show=1]]
<nav class="outer-box gradient-sweet-home">
<div class="menu" style="font-size: 86%;">
<?php
echo show_menu2(SM2_ALLMENU, SM2_ROOT+$iMultiLang, SM2_CURR+1, SM2_TRIM|SM2_BUFFER|SM2_PRETTY|SM2_NUMCLASS,'<li><span class="menu-default">[ac][menu_title]</a></span>','</li>','<ul>','</ul>');
?>
</div>
</nav>
<?php if(trim($page_contentSidebar)!=''){ ?>
<div class="left-content outer-box gradient-sweet-home">
<?php echo $page_contentSidebar; ?>
</div>
<?php } ?>
<?php if (defined('FRONTEND_LOGIN') && FRONTEND_LOGIN){ ?>
<div class="outer-box gradient-sweet-home">
[[LoginBox]]
</div>
<?php } ?>
</div><!-- content -->
</div><!-- left-col -->
<div class="main-content">
<?php echo $page_contentMain; ?>
</div>
<footer>
<div class="footer">
<?php page_footer(); ?>
</div>
</footer>
</div>
<div class="powered_by">
Powered by <a href="http://WebsiteBaker.org" target="_blank" rel="noopener" >WebsiteBaker</a>
<?php if (function_exists('cookie_permission')){ ?>
<div style="margin: 5px auto; padding-bottom: 20px;"><strong>Cookie-Erlaubnis</strong> widerrufen:
<a title="Cookies nicht mehr erlauben" href="?cookiereset">Zurücksetzen</a></div>
</div>
<?php } ?>
</div>
<?php
// if you want to include jquery before body end,
#register_frontend_modfiles_body('jquery');
// automatically include optional WB module file frontend_body.js) should be always set
register_frontend_modfiles_body('js');
?>
<script id="bodyjs" src="<?php echo TEMPLATE_DIR; ?>/js/body.js"></script>
</body>
</html>
I wonder what I am missing, doing wrong or even done twice.
Hi, the order of the loaded scripts is important.
Move this line
register_frontend_modfiles('jquery');
above the line
register_frontend_modfiles('js');
It should looks like:
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
register_frontend_modfiles('jquery');
register_frontend_modfiles('js');
Hope it helps.
Hallo dbs,
that helped indeed.
Learning every day. Thank you for your help.
Interesting site you build. Will bookmark it.
Regards,
Ron