grief with jquery in head template

Grief with jquery in head template, a forum discussion on Jojo CMS. Join us for more discussions on Grief with jquery in head template on our General Discussion forum.

Back to Forum Index : Back to General Discussion   RSS
synfield

15 Aug 2008
Posts: 43

I changed the head.tpl to add some jquery plugins and now I can't get access to the jquery object at all, the following code never gets invoked;

{if !$templateoptions || $templateoptions.jquery || $isadmin}
<script type="text/javascript" src="{cycle values=$NEXTASSET}external/jquery/jquery-1.2.6.pack.js"></script>
{/if}

I even copied the head.tpl from the dev site copy, which works, and overwrote the local copy, run setup cltl-f5, deleted smarty cache.

Still no luck, can't understand why the dev site shows the javascript tag for jquery, whereas the local doesn't. Even if I add the jquery tag in, and can see it from the browser source view, I still get the mozilla javascript console errors re: jquery object no found etc..

How do you sought the namespace issues with jquery as I notice you have a number of them in the head.tpl?

Regards
Harvey

Core Developer

Harvey

15 Aug 2008
Posts: 327

Firstly, if you can, the best way of adding extra stuff to head is to create a file called customhead.tpl - this gets inserted into the document head without you having to touch head.tpl (you will see an include in head.tpl showing you where customhead.tpl is called).

But back to the original problem...

It sounds like Jojo is calling a different copy of head.tpl to the one you want it to. Normally I would recommend pressing CTRL-F5, running setup, and emptying everything in /mysite/cache/smarty/templates_c/ but it sounds like you have done that already.

The only thing I can think of is that you have a stray copy of head.tpl in one of the plugins or your theme, and this is being used in preference to the one you want to be using. I'd suggest doing a quick witch hunt for any extra copies of the file in plugins / themes, and double-check that that smarty cache folder actually got emptied (you may have got a permission denied error when trying to delete and maybe you didn't notice).

Let me know if that sheds any light on the situation, otherwise I might need to get you to email me specifics so I can have a closer look.

Cheers,

Harvey.
synfield

17 Aug 2008
Posts: 43

Harvey, thanks for reply. I get the above issues frequently when trying to update the head or customhead template.

For instance I have gone back to using a customhead.tpl which has the following contents;

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="{cycle values=$NEXTASSET}external/jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#s2').cycle({
fx: 'fade',
speed: 2500
});

$('.btn').each(function(){

var b = $(this);
var tt = b.text() || b.val();
if ($(':submit,:button',this)) {
//b.replaceWith("<a style='cursor: pointer;' class='" + b.attr("class") + "' href='" + $(".btn").attr("href") + "'><i></i><span><span></span><i></i>" + tt + "</span></a>");
b.replaceWith("<a style='cursor: pointer;' class='" + b.attr("class") + "' href='" + b.attr("href") + "'><i></i><span><span></span><i></i>" + tt + "</span></a>");

}

});

});
</script>

But If I then empty the cache, smarty cache, browser cache, run setup, and view the browser source code, i get;

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="external/jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function());

$('.btn').each(function()

});

});
</script>

Bizzare, it strips out my code??

Can you please advise how the following vars are populated and from where.

{if !$templateoptions || $templateoptions.jquery || $isadmin}


Thanks.
synfield

17 Aug 2008
Posts: 43

Sorry, my screw up, I deleted a critical line in the head.tpl while I was editing it, also needed to replace {} in the javascript with {ldelim} & {rdelim} in the customhead.tpl, as initially confused the file as a javascript include file rather a tpl file.

Would still like to know where the $templateoptions, $templateoptions.jquery, $js, $documentready vars come from, in the head.tpl.
synfield

17 Aug 2008
Posts: 43

Just a note for me and anyone else upgrading to RC1, for future reference, the external scripts are no longer in the external folder under the main site, but under the jojo_core plugin external folder. Also cached under mysite > cache > external.
Harvey

Core Developer

Harvey

18 Aug 2008
Posts: 327

Aah, yes, the old 'escaping braces' issue rearing it's head again.

You can also enclose all your script in {literal}{/literal} tags if you don't need any dynamic code.

Keep in mind the preferred way of adding script is still via an external js file - providing you don't need any dynamic code to create the js. To do this, create YOURTHEME/js/functions.js and add your code in there.

$templateoptions is being deprecated, and is only there to support existing sites, as is $js. I'll need to check on $documentready but I think this is also largely un-used, since we added the $content['javascript'] method to Jojo in the past few months.

There are a few preferred ways of getting script and other content into the head, each with it's own advantages.

1. customhead.tpl - create a new file in any plugin / theme called customhead.tpl, and this will be included on all pages. Be sure to escape braces in Smarty.

2. js/functions.js - Add your script to any plugin or theme's functions.js file, and this will be compiled into the main js/common.js file that is served to the browser. The advantage of this is that it's cached on the client-side, and won't add extra bulk to every page request like customhead.tpl does.
The disadvantage is that you can't create the script dynamically. There is no need to escape braces here.

3. $content['javascript'] or $content['css'] - This method is for when your custom plugin needs to return script for it's pages only - not sitewide. I think the contact plugin uses this method to place the validation functions in the document head - which are only ever needed on the contact page. Because these validation rules are generated dynamically (depending what fields show on the contact form), this code can't go in the external js file.
To use this method, simply add a new element to the $content variable that your plugin's _getContent() function returns to Jojo. You don't need to include the <script> or <style> tags.

4. Modify head.tpl - our least recommended method, because you will potentially need to re-do your changes every time you upgrade Jojo. But as a quick and easy way of getting a change done, you make a copy of jojo_core/templates/head.tpl into YOURTHEME/templates/head.tpl - and then run setup to clear the appropriate cache. Jojo will use the copy in your theme in preference to the copy in jojo_core.
If you do find yourself needing to use this method, and none of the other methods above will work for you - probably best to let us know so we can add a new hook or find some other (cleaner) way of getting the job done.

5. It's also worth mentioning the foot hook as an another way of adding scritp - we use this for adding Google Analytics code so that the site doesn't hang if the Google server is having a bad day. To do this, create a new hook around the 'foot' hook point. I'm pretty sure this is documented in the docs under hooks / filters.
Back to Forum Index : Back to General Discussion   RSS
You must be logged in to post a reply



You need to Register or Log In before posting on these forums.