Thread

I’m having trouble adding a menu that using JQuery, plus an addition .js file to function correctly. I’m a noob, so this question likely has a simple answer, and I think the problem is how I’m storing or referencing the additional .js file in my template.

I created a JavaScript template in my template group containing the extra ‘Accordion’ code. I referenced the general jquery code from Google (as the EE docs say) and added a reference to the ‘Accordion’ source template. See the example below (I had to modify the script tag to post this message):

script src="http://www.google.com/jsapi" /script
script type="text/javascript"
  google.load("jquery", "1.2");
/script
script type="text/javascript" src="accordion" /script

Here is the original source code on the menu’s site:

script type="text/javascript" src="jquery.js" /script
script type="text/javascript" src="accordion.js" /script
script type="text/javascript"
jQuery().ready(function(){    
    // applying the settings
    jQuery('#theMenu').Accordion({
        active: 'h3.selected',
        header: 'h3.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
    });
    jQuery('#xtraMenu').Accordion({
        active: 'h4.selected',
        header: 'h4.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
    });
});

This is the menu I’m trying to add <http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php>. Any help is apprecaited!

You will want to use the path tag to get the proper url to the javascript template.  It should should look like this:

<script type="text/javascript" src="{path='template_group/accordion'}"></script>

Is there a particular trick to getting Javascript to work from an EE template? I’ve tried a few jQuery utilities which work fine when called from a static JS file, but not when called from an EE template.

This works:

script src=“http://localhost:8888/ee/jscripts/glider.js” type=“text/javascript”

But this does not:

script type=“text/javascript” src=”{path='template_group/glider.js'}”

I set the template to Javascript instead of web page.

RonnieMc,

Set the template type to static.  From what I’ve been able to gather, when set to type-javascript, issues arise because of the whitespace or lack thereof.  In my experience, I’ve had better luck getting type-javascript to work when the js files weren’t compressed, but when they were, they fail.  Changing the type to Static works like a charm…  sucks because you don’t get the nice little JS icon next to your template:(

sts

Stephen, so far it only works when the System Prefs > Output & Debugging Prefs is set to 1: PHP/SQL error messages shown only to Super Admins.

But, it works with the template to either Static or Javascript. If the Debugging Prefs are set to 0:, then neither one works.

Would that be considered a bug?

hmm, you got me:)  Are your javascript files compressed?

I don’t think so. How can I determine which are compressed and which are not (other than file size)?

Open them up and see if they are nicely indented and spaced out in a way that is readable versus all the whitespace removed leaving a bunch of text smashed together.  This is what the production version (compressed) typically looks like in order to save on file size.

Nope, no compression. It looks like regular Javascript with lots of indents and white space here and there.

It’s funny, but the script in the templates works fine only when the Sys Prefs > Output is set to 1 to show PHP/SQL errors to super admins, but not when set to 0. Strange.