Noob Question - How to load .js file correctly in header?

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 9:44 am

Hi folks,

Sorry for the real amateur question here but I am having some issues with a js file on my phpbb forums.

My site (a WordPress driven site) uses a js file across the whole site, https://ygoprodeck.com/tooltip.js

My phpbb3 forums seems to be loading and using the js file only sometimes. Sometimes it doesn't work at all and sometimes it doesn't.

An example can be shown here: https://ygoprodeck.com/Forum/viewtopic.php?f=2&t=3

By right, you hover over a card name with your mouse and a tooltip should appear. This seems to work only 50% of the time for me.

The console shows this error:

Code: Select all

ReferenceError: jQuery is not defined
[Learn More]
viewtopic.php:785:1

ReferenceError: jQuery is not defined
[Learn More]
tooltip.js:56:1

ReferenceError: jQuery is not defined
[Learn More]
jquery-ui.js:14:3
I'll include the code for my overall_header file. My tooltip.js isn't even referenced in it at the moment but I'm guessing the site is still trying to load it (but incorrectly?).

Thanks guys!

overall_header:

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="designer" content="SiteSplat http://themeforest.net/user/themesplat/portfolio?ref=ThemeSplat">
<meta content="{SITENAME}" property="og:site_name">
<!-- EVENT overall_header_meta -->
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->&#40;{UNREAD_NOTIFICATIONS_COUNT}&#41;&nbsp;<!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP}&nbsp;&#45;&nbsp;<!-- ELSEIF S_IN_UCP -->{L_UCP}&nbsp;&#45;&nbsp;<!-- ENDIF -->{PAGE_TITLE}&nbsp;&#45;&nbsp;{SITENAME}</title>
<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{{ path('phpbb_feed_index') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{{ path('phpbb_feed_news') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{{ path('phpbb_feed_forums') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{{ path('phpbb_feed_topics') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{{ path('phpbb_feed_topics_active') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{{ path('phpbb_feed_forum', { forum_id : S_FORUM_ID } ) }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{{ path('phpbb_feed_topic', { topic_id : S_TOPIC_ID } ) }}"><!-- ENDIF -->
<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" href="{U_CANONICAL}" />
<!-- ENDIF -->

<!-- Google free font here -->
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Asap:700' rel='stylesheet' type='text/css'>

<!-- CSS files start here -->
<link href="{T_THEME_PATH}/stylesheet.css" rel="stylesheet">
<!-- IF S_PLUPLOAD -->
<link href="{T_THEME_PATH}/plupload.css" rel="stylesheet">
<!-- ENDIF -->
<!-- EVENT overall_header_stylesheets_after -->

{$STYLESHEETS}

<!-- Remove the conditional below to use the custom CSS without FLATBOOTS Mini CMS Extension -->
<!-- IF S_ALLOW_CUSTOMCSS -->
<link href="{T_THEME_PATH}/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://ygoprodeck.com/tooltip.css" type="text/css" />
<!-- ENDIF -->
<!-- EVENT override_custom_css -->
<!-- CSS files stop here -->

<!-- EVENT overall_header_head_append -->

<!-- magic dust -->
<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.load.min.js"></script>

</head>
<body data-spy="scroll" data-target=".scrollspy" id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
<!-- EVENT overall_header_body_before -->

 <header id="top" class="navbar navbar-inverse navbar-static-top flat-nav">
  <div class="container">
    <div class="navbar-header">
      <button data-target=".flat-nav-collapse" data-toggle="collapse" type="button" class="nav-tog lines-button x navbar-toggle neutro">
	   <span class="sr-only sr-nav">{L_TOGGLE_NAV}</span>
        <span class="lines"></span>
      </button>
	  <!-- IF LOGO_IMAGE_EXIST -->
      	<a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->"><img style="max-height: 60px; max-width:100%; margin-top: -20px;" class="img-responsive" src="{T_IMAGES_PATH}../ext/sitesplat/flatbootsminicms/images/logo/{LOGO_FILENAME}" alt="{LOGO_TEXT}" /></a>
      <!-- ELSEIF LOGO_TEXT -->
	    <a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->">{LOGO_TEXT}</a>
	  <!-- ELSE -->
      	<a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->">{L_FLATBOOTS}</a>
      <!-- ENDIF -->
    </div>
	<!-- IF FLATBOOTS_MINI_CMS_ENABLED -->
        <!-- EVENT flatboots_navigation_instead -->
    <!-- ELSE -->
	    <!-- INCLUDE addons/navigation.html -->
	<!-- ENDIF -->	
  </div>
 </header>
    <div class="search-input search-input-fullscreen hidden-xs">
	   <form method="get" id="search" action="{U_SEARCH}">
		   <fieldset>
		   <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" placeholder="{L_SEARCH}" value="" autocomplete="off"/>
		   <div class="close">&times;</div>
		   {S_SEARCH_HIDDEN_FIELDS}
		   </fieldset> 
        </form> 
    </div>

<!-- IF not HIDE_HEADER -->		
  <!-- IF IN_BADGE -->
   <!-- INCLUDE @sitesplat_badge/header_badge_teaser.html -->
  <!-- ELSE -->
   <!-- INCLUDE addons/header_teaser_body.html -->
  <!-- ENDIF -->
<!-- ELSE -->
<div style="padding-top:30px;" class="space-teaser"></div>
<!-- ENDIF -->
  
<div class="container">
  <!-- start content -->
  <div id="content-forum">

  <!-- EVENT header_breadcrumb_before -->
	<div class="breadcrumb-line clearfix">
		<ul class="breadcrumb">
		<!-- https://developers.google.com/structured-data/testing-tool/ -->
		<!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' -->

		<!-- IF U_SITE_HOME -->
		   <li><a href="{U_SITE_HOME}"><span class="icon fa fa-home"></span></a></li>
		   <li {$MICRODATA}><a href="{U_SITE_HOME}" data-navbar-reference="home" itemprop="url"><span itemprop="title">{L_SITE_HOME}</span></a></li>
		<!-- ELSE -->
		   <li><a href="{U_INDEX}"><span class="icon fa fa-home"></span></a></li>
		   <!-- EVENT overall_header_breadcrumbs_before -->
		   <li {$MICRODATA}><a href="{U_INDEX}" data-navbar-reference="index" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
		   <!-- EVENT overall_header_breadcrumbs_after --> 
		<!-- ENDIF -->

		  <!-- BEGIN navlinks -->
		   <li {$MICRODATA}><a itemprop="url" href="{navlinks.U_VIEW_FORUM}"<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><span itemprop="title">{navlinks.FORUM_NAME}</span></a></li>		 
		  <!-- END navlinks --> 
		</ul>
		<!-- IF S_USER_LOGGED_IN and (SCRIPT_NAME == "viewforum" or SCRIPT_NAME == "viewtopic") -->
		<ul class="breadcrumb-buttons visible-xxs">
		    <li>
			  <a href="#" title="" data-toggle="modal" data-target="#BreadcrumbMap">
			   <i class="icon fa fa-sitemap"></i>
			  </a>
		   </li>
		</ul>
		<!-- ENDIF -->
		<!-- EVENT overall_header_breadcrumbs_buttons -->  
	</div>
	
    <!-- EVENT overall_header_page_body_before -->
	
	<div id="page-body">
	
	<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
	<div class="alert alert-warning fade in">
		<button data-dismiss="alert" class="close"><span class="awe-remove-circle"></span></button>
		<i class="fa fa-info"></i>&nbsp;<strong>{L_INFORMATION}{L_COLON}</strong>&nbsp;{L_BOARD_DISABLED}
	</div>
	<!-- ENDIF -->
	
    <!-- EVENT overall_header_content_before -->

User avatar
Paul
Infrastructure Team Leader
Infrastructure Team Leader
Posts: 24715
Joined: Sat Dec 04, 2004 3:44 pm
Location: The netherlands.
Name: Paul Sohier
Contact:

Re: Noob Question - How to load .js file correctly in header?

Post by Paul » Tue Dec 12, 2017 9:57 am

You should include Javascript files in the footer.
Knock knock
Race condition
Who's there?

My BlogMy Photosmy phpBB Extensionscustom phpBB work & Development

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 10:01 am

Paul wrote:
Tue Dec 12, 2017 9:57 am
You should include Javascript files in the footer.
Thanks for the response! Much appreciated.

Alright so I'll try put it in the footer. Is it safe to assume I can just copy it in like this:

Code: Select all

<script src="https://ygoprodeck.com/tooltip.js"></script>
I think I put that where it says {$SCRIPTS} ?

overall_footer;

Code: Select all

<!-- EVENT overall_footer_content_after -->

	</div> <!-- page-body id in header -->
  </div> <!-- content-forum in header -->
 </div> <!-- container in header -->

<!-- EVENT overall_footer_page_body_after -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and SCRIPT_NAME == "index" -->
    <!-- INCLUDE addons/sitesplat_login_body.html -->
<!-- ENDIF -->

	<section class="section-page">
        <div id="rtblock" class="container">
            <!-- IF .fltl --><!-- EVENT fltl --><!-- ELSE --><!-- INCLUDE addons/recent_topics_body.html --><!-- ENDIF -->
        </div>
    </section>

<!-- EVENT call_to_action_before -->	
  <!-- IF FLATBOOTS_MINI_CMS_ENABLED -->
     <!-- EVENT call_to_action_body_instead -->
  <!-- ELSE --> 
	<!-- INCLUDE addons/call_to_action_body.html -->
  <!-- ENDIF -->
<!-- EVENT call_to_action_after -->  
	
	<!-- IF FLATBOOTS_MINI_CMS_ENABLED -->
		<!-- EVENT prefooter_instead -->
	<!-- ELSE -->
    <section class="section-pre-footer">
		<div class="container center">
			<div class="row">
				<div class="col-sm-5 twitter">
				<!-- IF .bbtags -->
					 <!-- EVENT about_section_before -->
				<!-- ELSE -->
					<div class="thumb"><i class="fa fa-paw"></i></div>
					<div class="text">
						<h3>{L_FLATBOOTS_ABOUT_TITLE}</h3>
						<p>{L_FLATBOOTS_ABOUT_PART_ONE}</p>
						<a href="#"><strong>{L_READ_MORE}</strong></a>
					</div>
				<!-- ENDIF -->	
				</div>
				<div class="col-sm-5 col-sm-offset-2 twitter">
					<div class="thumb"><i class="fa fa-twitter"></i></div>
					<div class="text">
						<h3><a href="https://twitter.com/SiteSplat">{L_JOIN_US_TWITTER}&nbsp;<small>@SiteSplat</small></a></h3>
						 <div id="twitter-feed"></div>
					</div>
				</div>
			</div>
		</div>
		 <div class="section-bg"></div>
	</section>
	<!-- ENDIF -->
    
	<footer class="burned-asphalt"> <!-- Footer block -->
		<div class="midnight-" id="sub-footer">
			<div class="container">

				<div class="row bottomLinks">
					<div class="col-sm-6 sm-direction">
					 <nav>
					<!-- IF FLATBOOTS_MINI_CMS_ENABLED -->
						<!-- EVENT footer_links_instead -->
					<!-- ELSE -->
						<ul class="list-inline footer-nav">
						 <li><a href="http://goo.gl/LvmwlF" title="">{L_ADVERTISE}</a></li>
						 <li><a href="{U_PRIVACY}" title="">{L_PRIVACY}</a></li>
						 <li><a href="{U_DMCA}" title="">{L_DMCA}</a></li>
						 <li><a href="{U_TERMS_USE}" title="">{L_TERMS}</a></li>
						 <!-- EVENT overall_footer_teamlink_before -->
						 <!-- IF U_CONTACT_US -->
						 <li><a href="{U_CONTACT_US}" title="">{L_CONTACT_US}</a></li>
						 <!-- ENDIF -->
						 <!-- EVENT overall_footer_teamlink_after -->
						</ul>
					<!-- ENDIF -->	
					 </nav>
					</div>
						
					<div class="col-sm-6 sm-direction">	
						<div class="clearfix socialbar">
						<!-- IF FLATBOOTS_MINI_CMS_ENABLED -->
								<!-- EVENT footer_social_instead -->
						<!-- ELSE -->
							<div class="social-network">
								<a class="google-plus-color" title="Google+" href="https://plus.google.com/u/0/100435978342273345264/"><i class="fa fa-google-plus"></i></a>
								<a class="github-color" title="Github" href="#2"><i class="fa fa-github"></i></a>
								<a class="behance-color" title="Behance" href="#3"><i class="fa fa-behance"></i></a>
								<!-- <a class="dropbox-color" title="Dropbox" href="#4"><i class="fa fa-dropbox"></i></a> -->
								<!-- <a class="pinterest-color" title="Pinterest" href="#5"><i class="fa fa-pinterest"></i></a> -->
								<a class="facebook-color" title="Facebook" href="#6"><i class="fa fa-facebook"></i></a>
								<a class="twitter-color" title="Twitter" href="https://twitter.com/SiteSplat"><i class="fa fa-twitter"></i></a>
								<!-- <a class="bitbucket-color" title="Bitbucket" href="#8"><i class="fa fa-bitbucket"></i></a> -->
								<a class="envato-color" title="Envato" href="http://themeforest.net/user/ThemeSplat/portfolio?ref=ThemeSplat"><i class="icon-moon-envatoleaf"></i></a>
								<a class="rss-color hidden-xs" title="rss" href="{U_FEED}"><i class="fa fa-rss"></i></a>
							</div>
						<!-- ENDIF -->	
						</div>
					</div>	
				</div>
				
                <div class="row">				
					<div class="col-sm-6 sm-direction">
					 <p class="copyrights">
					  <!-- EVENT overall_footer_copyright_prepend -->
					  <small>{L_HANDCRAFTED}</small>&nbsp;<i class="fa fa-heart text-flatboots-red"></i>&nbsp;<small>{L_AND}</small>&nbsp;<i class="fa fa-coffee"></i>&nbsp;<small>{L_BY}<a href="http://www.sitesplat.com/" title="{L_SITESPLAT}" target="_blank">&nbsp;{L_SITESPLAT}</a>&nbsp;&#45;&nbsp;{L_POWERED}&nbsp;<a href="http://www.phpbb.com/" title="Forum Software &copy; phpBB&reg; Group" target="_blank">phpBB</a></small>
					  <!-- EVENT overall_footer_copyright_append -->
					 </p>
					</div>
					
					<div class="col-sm-6 sm-direction">
					  <p class="debug-output">
					  <!-- EVENT overall_footer_timezone_before -->
						<small>&#45;&nbsp;{S_TIMEZONE}&nbsp;&#45;</small>
					  <!-- EVENT overall_footer_timezone_after -->
						<!-- IF DEBUG_OUTPUT --> <small>{DEBUG_OUTPUT}</small><!-- ENDIF -->
						<!-- {L_FLATBOOTS_VERSION} -->
					  </p>
					</div>
				</div>	

			</div>
		</div>
	</footer>

<a id="totop" class="top-flat" href="" onclick="return false;" style="display:none;"></a>

<div class="hidden"><!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF --></div> 

<!-- injected via core and ajax JS for the return confirmation actions -->
   <div id="page-footer">
	<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="alert alert-default phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<button type="button" class="close alert_close" data-dismiss="alert"><span class="awe-remove-circle"></span></button>
		<h3 class="alert_title">&nbsp;</h3>
		 <p class="alert_text"></p>
	</div>
	
	<div id="phpbb_confirm" class="alert alert-default phpbb_alert">
		<button type="button" class="close alert_close" data-dismiss="alert"><span class="awe-remove-circle"></span></button>
		<div class="alert_text"></div>
	</div>
  </div>	
<!-- injected via core and ajax JS for the return confirmation actions -->

<!-- IF S_USER_LOGGED_IN and (SCRIPT_NAME == "viewforum" or SCRIPT_NAME == "viewtopic") -->
	<div class="modal fade" id="BreadcrumbMap" tabindex="-1" role="dialog" aria-labelledby="BreadcrumbsLabel">
	  <div class="modal-dialog" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="awe-remove-circle"></span></button>
			<h4 class="modal-title" id="BreadcrumbsLabel">{L_NAVIGATION}</h4>
		  </div>
		  <div class="modal-body file-tree">
		   <ul>
			<li class="root"><a href="{U_INDEX}">{L_INDEX}</a></li>
			<!-- BEGIN navlinks -->
			   <li><a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a></li>
			<!-- END navlinks -->
		   </ul>
		    <i class="icon-compass fa fa-compass"></i>
		  </div>
		  <div class="modal-footer">
		  </div>
		</div>
	  </div>
	</div>
<!-- ENDIF -->

<!-- EVENT ss_overall_footer_scripts_before -->

<script>
// this loads jquery asyncrounously & in parallel
head.load("//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js", "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js", "{T_THEME_PATH}/vendors/forum_fn.min.js");


</script>

<!-- we use this event to load the JS scripts properly via the extension system -->
<!-- EVENT overall_footer_after -->

<!-- injected via a module or an include -->
<script>
// some function that depends on bootstrap and jquery
head.ready(function () {
	$('.footable').footable();$(".selectpicker").selectpicker();$(".selectpicker").tooltip("disable");var totop=$("#totop");totop.click(function(){$("html, body").stop(true,true).animate({scrollTop:0},500);return false});$(window).scroll(function(){if($(this).scrollTop()>600){totop.fadeIn()}else{totop.fadeOut()}});$("button[data-loading-text], input[data-loading-text], .btn-load").click(function(){var e=$(this);e.button("loading");setTimeout(function(){e.button("reset")},3e3)});
	$("input").iCheck({checkboxClass:"icheckbox_flat-aero",radioClass:"iradio_flat-aero"});$(".btn-search").click(function(){$(".search-input").toggleClass("open").find("input").focus()});$(".close").click(function(){$(this).prev("input").val("").parents(".search-input").removeClass("open")});$(".nav-tog").click(function(){if($(this).hasClass("neutro")){$(this).removeClass("neutro").addClass("open")}else{$(this).removeClass("open").addClass("neutro")}});
	$('input[data-reset-on-edit]').on('keyup', function() {$(this.getAttribute('data-reset-on-edit')).val('');});
	$('a').tooltip({trigger : 'hover',container: 'body'})
    $('#notification_list_button').click(function(){setTimeout(function(){$(".nano").nanoScroller();},0);});	
});
<!-- IF PROVIDER_TEMPLATE_FILE -->
head.ready(function(){!function(n){n(".oauth-content ul > li").each(function(){var i=n(this).find("a").text();n(this).find("a").prepend('<i class="'+i+'"></i>')})}(jQuery)});
<!-- ENDIF -->
// some function that depends on bootstrap and jquery
<!-- IF not HIDE_FOOTER -->
head.load("{T_THEME_PATH}/vendors/twitterFetcher.min.js");
head.ready("twitterFetcher.min.js",function(e){var e={profile:{screenName:"<!-- IF FLATBOOTS_MINI_CMS_ENABLED -->{TWITTER_SCREEN_NAME}<!-- ELSE -->sitesplat<!-- ENDIF -->"},domId:"twitter-feed",maxTweets:1,showUser:!1,showImages:!0,enableLinks:!0};twitterFetcher.fetch(e)});
<!-- ENDIF -->
</script>

<script type='text/javascript' src='https://www.ygoprodeck.com/tooltip.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- injected via a module or an include -->

{$SCRIPTS}

<!-- IF S_PLUPLOAD -->
<!-- // lets load the plupload crap super huge files because... wait for it wait for it. "swear here" -->
<!-- INCLUDE plupload.html -->
<!-- ENDIF -->

<!-- EVENT overall_footer_body_after -->
<script type='text/javascript' src='https://www.ygoprodeck.com/tooltip.js'></script>
<!-- Google Analytics: change UA-XXXXXXXX-X to be your site's ID. -->
{GOOGLE_ANALYTICS}
</body>
</html>

User avatar
Paul
Infrastructure Team Leader
Infrastructure Team Leader
Posts: 24715
Joined: Sat Dec 04, 2004 3:44 pm
Location: The netherlands.
Name: Paul Sohier
Contact:

Re: Noob Question - How to load .js file correctly in header?

Post by Paul » Tue Dec 12, 2017 10:25 am

You need to put it after the {$SCRITS}.
Knock knock
Race condition
Who's there?

My BlogMy Photosmy phpBB Extensionscustom phpBB work & Development

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 10:47 am

Paul wrote:
Tue Dec 12, 2017 10:25 am
You need to put it after the {$SCRITS}.
Thanks!

Tried it but still no joy :-/ Made sure to clear the cache too.

Console shows these errors:

Code: Select all

viewtopic.php?f=2&t=3:483 Uncaught ReferenceError: jQuery is not defined
    at viewtopic.php?f=2&t=3:483
(anonymous) @ viewtopic.php?f=2&t=3:483
VM400 tooltip.js:56 Uncaught ReferenceError: jQuery is not defined
    at VM400 tooltip.js:56
(anonymous) @ VM400 tooltip.js:56
jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined
    at jquery-ui.js:14
    at jquery-ui.js:16
(anonymous) @ jquery-ui.js:14
(anonymous) @ jquery-ui.js:16
tooltip.js:56 Uncaught ReferenceError: jQuery is not defined
    at tooltip.js:56
(anonymous) @ tooltip.js:56
tooltip.js:56 Uncaught ReferenceError: jQuery is not defined
    at VM400 tooltip.js:56
(anonymous) @ tooltip.js:56
Inserted like this:

Code: Select all

<!-- injected via a module or an include -->

{$SCRIPTS}
<script src="https://ygoprodeck.com/tooltip.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<!-- IF S_PLUPLOAD -->

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 11:09 am

Ok so I figured out that I don't need to load the tooltip.js file since it seems to be loading it from the main site anyway.

The issue is that jquery seems to be breaking on phpbb and showing as "undefined". So I could load the page and check the tooltip, it works, then I could navigate away and come back and it doesn't work with the console saying "jquery is undefined".

Weird.

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 11:20 am

Fixed now I think.

Added this under the scripts section in the footer:

Code: Select all

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

User avatar
david63
Jr. Extension Validator
Posts: 14723
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Noob Question - How to load .js file correctly in header?

Post by david63 » Tue Dec 12, 2017 11:24 am

You don't need to load jquery at all - in a default phpBB install jquery is already loaded. Doing that you are loading it twice which has the potential to create problems.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 11:46 am

david63 wrote:
Tue Dec 12, 2017 11:24 am
You don't need to load jquery at all - in a default phpBB install jquery is already loaded. Doing that you are loading it twice which has the potential to create problems.
Yeah I thought that too! Which is why it's strange.

Without loading it again I keep getting jQuery is undefined error references to my tooltip.js file. Loading jQuery again removes the reference.

So it seems possibly the phpbb jquery isn't properly being loaded.

User avatar
david63
Jr. Extension Validator
Posts: 14723
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Noob Question - How to load .js file correctly in header?

Post by david63 » Tue Dec 12, 2017 11:59 am

AlanOC91 wrote:
Tue Dec 12, 2017 11:46 am
So it seems possibly the phpbb jquery isn't properly being loaded.
Or your file is not being properly loaded.

jquery works just fine in a default install and with many extensions - in fact the correct way to load your .js file is with an extension and not editing core files.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 12:02 pm

david63 wrote:
Tue Dec 12, 2017 11:59 am
AlanOC91 wrote:
Tue Dec 12, 2017 11:46 am
So it seems possibly the phpbb jquery isn't properly being loaded.
Or your file is not being properly loaded.

jquery works just fine in a default install and with many extensions - in fact the correct way to load your .js file is with an extension and not editing core files.
I'm not quite sure how to do that :(

As I mentioned above, I removed all instances of loading tooltip.js from overall_header and overall_footer and it's still being loaded from my actual website (from what I can tell).

So I'm not entirely sure how I could remedy that if it's being pulled anyway from my main website.

User avatar
canonknipser
Registered User
Posts: 1623
Joined: Thu Sep 08, 2011 4:16 am
Location: Germany
Name: Frank Jakobs
Contact:

Re: Noob Question - How to load .js file correctly in header?

Post by canonknipser » Tue Dec 12, 2017 12:08 pm

Did you clear the cache via acp?
Greetings, Frank
phpbb.de support team member
English is not my native language - no support via PM or mail
New arrival - Extensions and scripts for phpBB

AlanOC91
Registered User
Posts: 8
Joined: Sun Jul 16, 2017 2:25 pm

Re: Noob Question - How to load .js file correctly in header?

Post by AlanOC91 » Tue Dec 12, 2017 12:15 pm

canonknipser wrote:
Tue Dec 12, 2017 12:08 pm
Did you clear the cache via acp?
Yep! And cleared cloudflare cache (along with excluding the whole forum from caching/rocket loader).

Post Reply

Return to “phpBB Custom Coding”

Who is online

Users browsing this forum: No registered users and 4 guests