Jump to:

3398 Posts in 979 Topics by 855 members

Template Questions

SilverStripe Forums » Template Questions » Javascript 404 issue!

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

Page: 1 2
Go to End
Author Topic: 869 Views
  • arthurdent
    Avatar
    Community Member
    133 Posts

    Javascript 404 issue! Link to this post

    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!

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Javascript 404 issue! Link to this post

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

  • arthurdent
    Avatar
    Community Member
    133 Posts

    Re: Javascript 404 issue! Link to this post

    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?

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Javascript 404 issue! Link to this post

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

  • arthurdent
    Avatar
    Community Member
    133 Posts

    Re: Javascript 404 issue! Link to this post

    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? ?????

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Javascript 404 issue! Link to this post

    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.

  • arthurdent
    Avatar
    Community Member
    133 Posts

    Re: Javascript 404 issue! Link to this post

    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!

  • arthurdent
    Avatar
    Community Member
    133 Posts

    Re: Javascript 404 issue! Link to this post

    OK, jQuery I have as part of this script is

    Is this what SilverStripe is having an issue with?

    869 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.