jQuery in theme not working right. . .

Permalink
Greetings all,
I've got a nifty drop-down menu I've made that uses a little jQuery to make drop-downs roll down and bounce at the bottom. It's subtle and looks great. Only problem is, once I plugged it into c5 using Auto-Nav, the effect is no longer visible in Safari, Chrome, or FF. Oddly enough it works still in IE—that's a first.
I'm wondering if there's some setting in the c5 jQuery that I need to change, or if I need to add something to my theme's jQuery script to make it over-ride the c5 jQuery for this option only.
Any help is greatly appreciated!

Abs0lute
View Replies:
LucasAnderson replied on at Permalink Reply
LucasAnderson
You're not loading jQuery (the main jQuery script) in your template header, are you? concrete5 does this automatically by nature, and loading it twice will cause issues.
Abs0lute replied on at Permalink Reply
Abs0lute
No.
Here's what I'm loading, and it's in the footer right before the ending body tag.
<!--   * jQUERY (linked to Google hosted libraries)   *     -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>   
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/scripts.js"></script>

I removed the two links to the google hosted api's, and that didn't do anything, and the effect quite working in IE too.

Originally, the c5 editor disappeared when I first activated my template. Found out it was b/c of the links, so I have them wrapped in php that disables them if in edit mode:
<?php
/* Hide this when in EDIT MODE so it doesn't conflict w/ c5's jQuery, which is needed for editing */
  $u = new user();
  $p = new Permissions($c);
    if (!($p->canApproveCollection())) {   
?>
jQuery links here
<?php
   } 
?>


Any ideas?
Thanks for your help!
12345j replied on at Permalink Reply
12345j
take a look at this line
<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/scripts.js"></script>
and the beggining part of it- it should be
<?php=$this->getThemePath()?>/
Abs0lute replied on at Permalink Reply
Abs0lute
Nice catch. Took care of that and still no dice.
Not sure why, works fine in local testing as straight HTML.
Also, is the jquery.effects library included in c5? I don't see it in the core. But if I connect to the google api version, the nice bounce effect still doesn't work.
Thanks in advance.
Abs0lute replied on at Permalink Reply
Abs0lute
Hey 12345j,
First time I did this fix I missed the "=" after <?php b/c of it's light green color. I didn't see it. Just noticed it, tried it, and it gives an error of "Unexpected "=" on line. . . ".
I haven't actually seen the = method used before, just echos.
Is it supposed to be "=" instead of "echo". None of the themes I've looked at use "=". Just wondering where you got that.
12345j replied on at Permalink Reply
12345j
http://www.concrete5.org/documentation/how-tos/designers/make-a-theme/
it uses php short tags, so i just added the official
ankitoo97 replied on at Permalink Reply
i went through all your jquery posts, but still i am finding it difficult to come over the jquery problems i am having. there is no edit bar at the top but when i remove my javascript and also the files link attached to it, it works properly with edit bar. plz help...
12345j replied on at Permalink Reply
12345j
sharpfence.com / index.php
Abs0lute replied on at Permalink Reply
Abs0lute
Yes. Every page shows the navigation menu.
12345j replied on at Permalink Reply
12345j
well I still see the google hosted jquery. ALso, i wouldn't use the @import for c5. Maybe clear the cache?
Abs0lute replied on at Permalink Reply
Abs0lute
Yeah, I removed it and saw it didn't do any good, and it caused it to quit working in IE, so I put it back in.
I commented it out again and emptied the cache so you can see for yourself. It's not active now. Animation effect still doesn't work, and it doesn't work in IE now.
As for the @imports, I have not had any issues at all so I think they're fine to use. The issue here is w/ jQuery, not the CSS.
Thanks for your advice.
Abs0lute replied on at Permalink Reply
Abs0lute
Hey 12345j!
Just wanted to see if you had any ideas on why the animation isn't working. I commented out the links to the jQuery. Do you know if c5 has the "jquery.effects.core.js" ?
I looked in the concrete/js folder, but I don't see that exact name there, though it could be under a different name I suppose.
Do I need to have that one commented out, or just the link to the jQuery library?
Shotster replied on at Permalink Reply
Shotster
For one thing, you are loading jQuery twice, just as LucasAnderson cautioned against. It's being loaded in the doc head by C5, and then you are loading it again from Google's CDN at the end of the doc. There might be other issues as well, but this is certainly something you should correct.

-Steve
Abs0lute replied on at Permalink Reply
Abs0lute
Thanks for the reply shotster. I removed the jQuery linked to google earlier by just commenting it out. It still doesn't work. I'm stumped.
Shotster replied on at Permalink Reply
Shotster
Well, when I load the page now, it says that the file...

/js/scripts.js

...cannot be found.

-Steve
creatovisguru replied on at Permalink Reply
creatovisguru
Because it's looking for the JS file at the root level.

/js/file.js

INSTEAD OF

/themes/<themename>/js/file.js
Abs0lute replied on at Permalink Reply
Abs0lute
No. It's got the theme js file correctly and still doesn't work.
I'm thinking maybe something in the c5 jQuery core overrides it?
datatainment replied on at Permalink Reply
datatainment
Same Problem here. Using jQuery for some special effects, but when trying to integrate C5 to the website the Edit Bar disappears when putting the

<?php Loader::element('header_required'); ?>

in top of the head. putting Loader::element to the bottom in the head, my effects don't work, but the edit bar is back.
Comparing the jquery.js in /concrete/js with the 1.4.2 from jquery.com it's not the same file! So uses C5 a customized jquery.js ?
Mnkras replied on at Permalink Reply
Mnkras
jquery can be compiled with different features, which is why there are differences
datatainment replied on at Permalink Reply
datatainment
But than it's definitely wrong to say "jquery is already included in C5 and there's no need to load it again". Also many other things like menus or effects don't work with C5 correctly.
As normal developer I take the tools like jquery "as is" fromhttp://docs.jquery.com/Downloading_jQuery#Download_jQuery....

But what's the solution then?
Mnkras replied on at Permalink Reply
Mnkras
In the docs under system one of the pages shows what jquery libraries are
loaded, and no its not misleading.
On Mar 7, 2011 5:15 AM, "Concrete5 Community" <[email protected]>
wrote:
datatainment replied on at Permalink Reply
datatainment
You can also see the loaded js in concrete/js, but comparing the file sizes you'll discover the differences between the official jQuery release and the used one.

the only thing bothering me is the head in jquery.js:

/*!
* jQuery JavaScript Library v1.4.2
*http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*http://jquery.org/license
*
* Includes Sizzle.js
*http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500

which is not the case. that's all I want to say..
Abs0lute replied on at Permalink Reply
Abs0lute
Hey sk01,
I never got the issue resolved. Loved the menu I had, and it worked in IE only—again, that's probably the only time I'll say that. I just settled for not having it, unfortunately. c5's usefullness is too great to let a little thing like a drop-down menu bounce keep me from using it. Though it would have been nice to have. Maybe someday ˆ—ˆ. Did you ever figure out a solution?
clmedia replied on at Permalink Reply
clmedia
Had a similar issue & went in and replaced the concrete/jquery.js file with the contents ofhttps://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js...

Fixed my issue. But I've not thoroughly tested the rest of my site or questioned the core team as to whether they modified the jquery file in ways that are necessary (??).
Abs0lute replied on at Permalink Reply
Abs0lute
Good idea!
I may give that a whirl. Rather than replace the content, could it just be commented out or deleted then a link inserted to get the latest version of jQuery from google?
I'm sure it could be scraped w/ PHP as well.
Just musing. What's your thoughts?
Thanks of the advice too!
clmedia replied on at Permalink Reply
clmedia
Well, what I did actually isn't the best fix because it messes with a core file. The other option would be to create a local /elements/header_required.php file. Around line 63, you can call the google version rather than the local version.

However, if you're logged in, jquery still gets called and I can't put my finger on why just yet. I'll let you know as I get time to dig a little deeper.
clmedia replied on at Permalink Reply
clmedia
Temporarily, instead of hacking the core, I've created a jquery.js file in my local js/ directory and copied Google's updated version there.

But I'm still curious about where jquery gets called other than the header_required.php file.
Agetis replied on at Permalink Reply 1 Attachment
Agetis
I have a Jquery issue and I can't find the source of the problem.

I want to use a nice Jquery RollOver effect and implemented a HTML block. The effect needs these files:

1.http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js...
2.http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min....
3. jquery.easing.1.3.js
4. jquery.iconmenu.js - this is the Jquery written for the effect.

and this code:
<script type="text/javascript">
         $(function() {
            $('#sti-menu').iconmenu();
         });
      </script>


I know that there could be some issues with the first couple of files, since C5 loads them automatically (or?), so I Commented them out and just left the last "jquery.iconmenu.js". But even this file makes the C5 edit mode frozen and the effect is not working.

Can somebody take a look what's going on?
I attached the last file

Thank you!
agetis
JohntheFish replied on at Permalink Reply
JohntheFish
You need jquery and ui, but you need to make sure the C5 version of both is also added in view mode (they are only added by C5 by default in edit mode).

Also, you probably don't want your effects to be enabled in edit mode, so need to put an 'if not edit mode' about the code.

There are plenty of examples in the forums and in the howtos if you search, with where and how to load the files and test for edit mode.
Agetis replied on at Permalink Reply
Agetis
@JohntheFish thanks for your suggestions. I've searched around the forum and found a solution that worked.
So what did I do:

1. Since I used the HTML block I copied also the head to this block. But now I copied all my <head> content into the header.php file.

2. The second thing is a suggestion I found in forums to put the line
<?php  Loader::element('header_required'); ?>

before you JavaScript and jQuery is being called. This helped and the Rollover effect started to work! Yeay.


3. Then after checking other pages on my site I found an issue with the "Amiant Image Gallery" I'm using. It didn't even load the thumbnails. So I started to delete the JavaScript lines line after line and found that
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

line is causing the trouble. And since C5 is apparently loading this jQuery file by its self the RollOver didn't stop working. Cool.

I hope this will help someone.

Is there a list of jQuery files that C5 is loading? It could be helpful to further eliminate my JavaScript lines that are unnecessary.
Agetis replied on at Permalink Reply
Agetis
After more testsing I found some issues again while in the edit mode. When trying to click on a block the pop-up windows is all distorted. This was corrected by deleting yet another script line

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>


but since the rollover needs this file I tryied JohntheFishs suggestion and put the ifEditMode statement around it.
Now my code looks like that.
<?php  if (!$c->isEditMode()) { ?>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>  <?php  } ?>


This solves the issue in a way. But I do still get a little floating pop-up window with the word "Help" written on it in the edit mode. Now sure where that came from.

My question at this place is: Is my ifEditMode statement correct or is there a better solution?
JohntheFish replied on at Permalink Reply
JohntheFish
Please, never include jquery or jquery ui from anywhere other than the C5 versions. That is the root cause of your difficulties. I am sorry I thought I had made that clear earlier, but obviously I had not.

C5 will always include its own versions of these in edit mode. The C5 version of jQuery UI has its own version of dialog. When you include the CDN versions you get will spurious double loading faults and break many of C5's dialogs.

The code you should include in your block controller on_load function, or in your theme header, is:
$this->addHeaderItem($html->javascript("jquery.js"));
$this->addHeaderItem($html->css("jquery.ui.css"));
$this->addHeaderItem($html->javascript("jquery.ui.js"));

C5 will then get these from the C5 versions of the scripts.

Then, you can put the isEditMode test about the code that inserts your own script that calls various jQuery methods. That way, C5 has what it needs to function, and your own script is blocked from interfering in edit mode.

The only exception to the above is if you are using a development build of C5.5, which is fully compatible with the CDN versions of jQuery.
Agetis replied on at Permalink Reply
Agetis
Thanks for that. I didn't know this information about the CDN.

I now added your C5 links to the header.php, needed though to exclude the first jquery.js link since it again interfered with my gallery, but the rollover effect wasn't affected. And yes, there is no more issues in the edit mode.
So it worked! Thanks.

Only one thing, I couldn't link to the files like you suggested - I believe you meant to include those links into a <php echo line - but now I used the full URL to make it work.
JohntheFish replied on at Permalink Reply
JohntheFish
When you call add header item from the on_load event of a block controller, the relevant scripts are added to a table of scripts that C5 then consolidates (removes duplicates) and outputs in the header element of your theme with Loader::element('header_required'). In that context, duplication does not matter because C5 is designed to sort it out.

When you are actually within a theme header element, you are correct that you actually need to write the path. However, be careful about doing so because you could still end up with a double inclusion of jQuery.ui, particularly when in edit more - once from the C5 header_required, and once from your own link, which is one of the places where the !isEditMode test is useful.
ankitoo97 replied on at Permalink Reply
i cant understand your instructions. can u help in deeper details
szucslaszlo replied on at Permalink Reply
Hello world! The main question of the topic is somewhat old, but I thought it may be helpful for someone if I post my solution to this problem. Similar to the original post, I had perfectly working jQuery code, which stopped working when integrated into C5. Unfortunatelly, it was not working in any browsers for me. The problem turned out to be, that Loader::element('header_required') was needed to be called before the actual <script> elements. I had just copied the base structure from an online tutorial and had not thought of this. So, the solution for my problem was to change this:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/css/default.css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/cufon-yui.js"></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/titillium-cufon.js" /></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/main.js"></script>
        <?php
        Loader::element('header_required');
        ?>


to this:

<?php
        Loader::element('header_required');
        ?>
      <link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/css/default.css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/cufon-yui.js"></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/titillium-cufon.js" /></script>
      <script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/js/main.js"></script>


Good luck for anyone stumbling across this problem!
Waazes replied on at Permalink Reply
Hey!

I did try that, but the problem still exists. The menu (scrolling between pages) isn't working. When i remove the "<?=Loader::element("footer_required");?>" php code, it works again.
The page is located:http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/...
Any other suggestions?

Thank you!
mhawke replied on at Permalink Reply
mhawke
It appears you are loading jQuery twice which is a no-no.

Try removing this old version from your theme:

http://tigu.hk.tlu.ee/~kristjan.ulst/uusrif/concrete5/themes/rif/js...
Waazes replied on at Permalink Reply
Thanks!! That worked!