2

I'm having a problem linking a javascript file to my template. I'm using the standard tag:

<script type="text/javascript" src="{template_root}site_script.js"></script>

Where {template_root} is the location of my template files. I have tested this URL (stored as a global variable} for accuracy. For testing purposes, my site_script.js file looks like this:

$( document ).ready(function() {
    alert( "ready!" );
});

However no dialogue is popping up. I took a look in the console log and it says "ReferenceError: Can't find variable: $". I'm really at a loss here and I would appreciate if someone can show me where I may have made an error?

I'm not sure if this is necessary or helpful, but here is my index template file for context:

<!doctype html>

<html>
    <head>
        <meta charset="UTF-8">

        <!-- Force proper sizing -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Styles that require EE Template Tag Parsing -->
        {exp:channel:entries channel="preferences"}<style type="text/css">
            body {background-image:url('{background_image}');}
            .color {color: #{primary_highlight_color};}
            .color_bg {background-color: #{primary_highlight_color};}
            .nav_circle {background-color:rgba(0,0,0,{nav_opacity_unselected});}
        </style>
        {/exp:channel:entries}

        <!-- TypeKit Scripts  -->
        <script type="text/javascript" src="//use.typekit.net/yjd5vpe.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

        {exp:channel:entries channel="preferences"}
            <title>{title}</title>
        {/exp:channel:entries}

        <!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='website/global'}" />
        <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='website/web'}" />
        <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='website/mobile'}" />

        <!-- Bootstrap -->
        <link href="{template_root}bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        {!--
        <!-- Development Stylesheets -->
        <link rel="stylesheet" type="text/css" media="all" href="global.css" />
        <link rel="stylesheet" type="text/css" media="all" href="web.css" />
        <link rel="stylesheet" type="text/css" media="all" href="mobile.css" />
        <!-- Development Javascript -->
        <script type="text/javascript" src="site_script.js"></script>
        --}



    </head>

    <body>
        <div id="wrapper">

            <!-- masthead Snippet-->
            <div class="masthead">
                {exp:channel:entries channel="preferences"}<div class="logo"><img src="{dandelion_logo}" /></div>{/exp:channel:entries}
                {exp:channel:entries channel="contact"}<div class="nav_social_icons" />test</div>{/exp:channel:entries}
                <div id="navigation">

                    <div class="nav_item">
                        <div class="nav_circle">
                            {exp:channel:entries channel="Cart"}<img src="{cart_icon}" class="nav_icon_cart" />
                        </div>
                        <div class="nav_title">
                            {title}
                        </div>{/exp:channel:entries}
                    </div> <!-- Cart .nav_item -->      

                    <div class="nav_item">
                        <div class="nav_circle">
                            {exp:channel:entries channel="Shop"}<img src="{shop_icon}" class="nav_icon_shop" />
                        </div>
                        <div class="nav_title">
                            {title}
                        </div>{/exp:channel:entries}
                    </div> <!-- Shop .nav_item -->    

                    <div class="nav_item">
                        <div class="nav_circle">
                            {exp:channel:entries channel="events"}<img src="{events_icon}" class="nav_icon_events" />
                        </div>
                        <div class="nav_title">
                            {title}
                        </div>{/exp:channel:entries}
                    </div> <!-- Events .nav_item -->  

                    <div class="nav_item">
                        <div class="nav_circle">
                            {exp:channel:entries channel="contact"}<img src="{contact_icon}" class="nav_icon_contact" />
                        </div>
                        <div class="nav_title">
                            {title}
                        </div>{/exp:channel:entries}
                    </div> <!-- Contact .nav_item -->  

                    <div class="nav_item">
                        <div class="nav_circle">
                            {exp:channel:entries channel="home"}<img src="{home_icon}" class="nav_icon_home" />
                        </div>
                        <div class="nav_title">
                            {title}
                        </div>{/exp:channel:entries}
                    </div> <!-- Home .nav_item -->

                </div> <!-- #navigation -->
            </div> <!-- .masthead -->






    WRAPPER BOTTOM<br />
        </div> <!-- .wrapper -->

    <!-- Javascript -->
    <script type="text/javascript" src="{template_root}site_script.js"></script>
    <!-- Bootstrap JQuery-->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="{template_root}bootstrap/js/bootstrap.min.js"></script>

    </body>
</html>
4

This is not actually EE-related - your scripts are in the wrong order. You're calling your site_script before you've loaded jQuery:

<script type="text/javascript" src="{template_root}site_script.js"></script>
<!-- Bootstrap JQuery-->
<script src="https://code.jquery.com/jquery.js"></script>

Reverse the order of those and you should be good.

1
  • Thank you. I can't believe I didn't notice this. Dec 4 '13 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.