Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Stuck in a Javascript prison.....HELP


Go to End
Reply


13 Posts   4058 Views

Avatar
jigster

Community Member, 15 Posts

7 August 2009 at 4:49am

Hi thanks for your help I have managed to get it working! I did what you advised and also included:

<script type="text/javascript" src="mysite/javascript/jquery.js"</script>

as well as:

<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>

in the body of the page and now it works perfectly! Thanks again!!

Avatar
banal

Community Member, 901 Posts

7 August 2009 at 6:36pm

Well. One jQuery should be enough. Either:

<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>

or

<script type="text/javascript" src="mysite/javascript/jquery.js"</script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>

Avatar
lawless

Community Member, 33 Posts

7 October 2009 at 5:51pm

Edited: 24/10/2009 5:06pm

I'm trying to do the exact same thing jigster did, but with no luck.

I even grabbed his example files to see where he was putting his code. Still no luck.

I got a static example working just fine with the jquery js files.

But no matter what I try in Silverstripe I can't get the images to rotate, I just get the first image static.

I've managed to get the js includes in the head along with the function banal wrote. I'm guessing my problem lies in the Requirements:: calls that initialize the js files. By viewing the source code from my browser everything is there that's in my working example, the only difference is it being within the SS framework.

Any help would be greatly appreciated.

Avatar
lawless

Community Member, 33 Posts

24 October 2009 at 5:20pm

Edited: 24/10/2009 5:31pm

Just as a follow up to this in case any one else has trouble with jQuery and the Cycle.lite, I finally got it working.

It seems it was a conflict between jQuery and prototype over the $ shortcut for calling jQuery.

I had to change Banal's code snippet

$(function(){
$("#slideshow").cycle({fx: 'fade'});
});

to this

jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});

That got rid of the conflict between jQuery and prototype js libraries. Just a quick mention of that the "Q" in jQuery is capital. On a *nix system this will not work if that's lowercase as *nix is case sensitive. Don't ask how long it took me to figure that one out.

So my working code ended up being...:

In mysite/code/HomePage.php file I added this

class HomePage_Controller extends Page_Controller {

public function init() {
      parent::init();

      Requirements::javascript("mysite/javascript/jquery-1.3.2.min.js");
      Requirements::javascript("mysite/javascript/jquery.cycle.lite.js");
   }
}

And in my themes/Blackcandy/templates/HomePage.ss file I added this at the bottom -

<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>

<script type="text/javascript">

jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});

</script>

Then in the CMS for the Home page I added the following HTML

<div id="slideshow">
<a href="link1/"><img src="assets/image1.jpg" /></a>
<a href="link2/"><img src="assets/image2.jpg" /></a>
<a href="link3/"><img src="assets/image3.jpg" /></a>
</div>

Hopefully that helps someone out. The trick was to use Firebug to debug the javascript using the console.

I also found a really cool link for working with jQuery along the way: http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/

Avatar
banal

Community Member, 901 Posts

24 October 2009 at 10:54pm

Hi

Glad you resolved you issue. Just as an addition: It's usually good practice to wrap your jQuery stuff in a closure, like this:

;(function($) {
   // all your jQuery code here. eg:
   $(function(){
      // on document ready stuff here.
   });
})(jQuery);

The red colored wrapper makes sure, that the dollar sign maps to the jQuery function, even when there are other libs. The $(function(){ ... }); call is a shorthand version of $(document).ready(function(){ ... });
Here's some more info regarding SilverStripe and jQuery: http://doc.silverstripe.org/doku.php?id=jquery

Go to Top