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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Javascript 404 issue!


Go to End


10 Posts   4236 Views

Avatar
mhdesign

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 Page.ss 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!

Avatar
Willr

Forum Moderator, 5523 Posts

7 September 2013 at 2:15pm

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

Avatar
mhdesign

Community Member, 216 Posts

7 September 2013 at 4:13pm

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

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<% base_tag %>
		<title>$Title | Site Header</title>
		$MetaTags(false)
		<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);
			 </style> 
		<![endif]-->
		
		<!--[if IE 7]>
			<style type="text/css">
			 @import url(themes/mysite/css/ie7.css);
 			</style> 
		<![endif]-->

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

Any tips?

Avatar
Willr

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) %>

Avatar
mhdesign

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:

localhost/mysite/index.php/js/flaunt.js

localhost/mysite/index.php/js/flaunt.min.js

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

why? ?????

Avatar
Willr

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.

Avatar
mhdesign

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
})(jQuery);

In my code I have:


/*
Flaunt.js v1.0.0
by Todd Motto: http://www.toddmotto.com
Latest version: https://github.com/toddmotto/flaunt-js
Copyright 2013 Todd Motto
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
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
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav-submenu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
})(jQuery);

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!

Avatar
mhdesign

Community Member, 216 Posts

9 September 2013 at 5:02pm

OK, jQuery I have as part of this script is

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Is this what SilverStripe is having an issue with?

Go to Top