Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Javascript 404 issue!

Go to End

10 Posts   2903 Views


Community Member, 216 Posts

4 September 2013 at 6:14pm

Edited: 04/09/2013 6:15pm

OK, hopefully someone can help me with today's problem.

I've been working on a responsive website design with a SilverStripe 3.0 backend (for those who haven't tried it, responsive design allows a single site to be optimised for a wide range of screen sizes, form smartphones to desktop and beyond). Anyhoo, one of the trickier elements of Responsive Design is site navigation. Thin of it this way. When working on a smartphone you don't want the whole screen taken up with multi-level navigation. So the trick is to 'hide' the navigation until you need it. Often this involves a bit of Javascript wizardry.

So I found a script called 'flaunt.js' and played with it, ending up with a static prototype that worked just as I wanted it to. The next part was to port this to a Silverstripe theme. And this is where I've hit the wall.

In my file head I added the following:

<% require javascript(mysite/javacript/flaunt.js) %>

And I put the Javascript file in the appropriate location.

Ran the page up and Firebug tells me something different:

localhost/site/index.php/js/flaunt.js (and then a 404 error)

I've tried other locations (themes/mytheme/javacript/) and changed the path appropriately. I've removed flaunt.js and the path completely, done a ?flush=1 and ?flush=all for good measure, dev/build/ etc, but the error remains. Silverstripe is now looking for flaunt.js -- somewhere...

Can anybody offer any advice? Thanks!


Forum Moderator, 5523 Posts

7 September 2013 at 2:15pm

Have you got a <% base_tag %> in your template?


Community Member, 216 Posts

7 September 2013 at 4:13pm

Hi Willr! Yes, I do have a base tag. Head of is currently as follows:

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<% base_tag %>
		<title>$Title | Site Header</title>
		<link rel="shortcut icon" href="/favicon.ico" />
 		<% require themedCSS(layout) %> 
		<% require themedCSS(typography) %> 
 		<% require themedCSS(form) %> 
		<% require themedCSS(navstyles) %> 
 		<% require themedCSS(prettyPhotoCustom) %>
		<!--[if IE 6]>
			 <style type="text/css">
			 @import url(themes/mysite/css/ie6.css);
		<!--[if IE 7]>
			<style type="text/css">
			 @import url(themes/mysite/css/ie7.css);

		<% require css(cms/css/lightbox.css) %>
                <% require javascript(mysite/javacript/flaunt.js) %>

Any tips?


Forum Moderator, 5523 Posts

7 September 2013 at 4:19pm

You should only have an index.php file in your url if you haven't got mod_rewrite turned on, try enabling that, if your host cannot support it then you may need to write your things like <% require javascript(../mysite/javacript/flaunt.js) %>


Community Member, 216 Posts

7 September 2013 at 7:38pm

Testing locally and still having issues with mod_rewrite -- haven't been able to get it to run on for some reason though it shouldn't be a problem in a live environment...

There are actually TWO instances of flaunt.js (one is a modification) so I've set them both up as you suggest. Unfortunately it's still looking for the following:



Pulled all the code out again but this error persists...

why? ?????


Forum Moderator, 5523 Posts

8 September 2013 at 11:44am

Take a look at the mod_rewrite issue, might be the easiest fix short term, the other suggestion would be to use an absolute url for the javascript file (e.g http://localhost/mysite/javsacript/fluent.js) while in dev environments. Likely a bug with the Requirements engine that non rewrite environments include the index.php flag.


Community Member, 216 Posts

9 September 2013 at 4:58pm

Well, that's an improvement... at least it's loading now!!

It's thrown me another curve ball -- apparently I have the following:

ReferenceError: jQuery is not defined

In my code I have:

Flaunt.js v1.0.0
by Todd Motto:
Latest version:
Copyright 2013 Todd Motto
Licensed under the MIT license
Flaunt JS, stylish responsive navigations with nested click to reveal.
;(function($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
// Toggle the arrow using CSS3 transforms

Can you please tell me where I would define jQuery (or what this even means? I know jQuery is part of SilverStripe but how do I 'define' it?)

Thanks again!


Community Member, 216 Posts

9 September 2013 at 5:02pm

OK, jQuery I have as part of this script is

Is this what SilverStripe is having an issue with?

Go to Top