Jump to:

23459 Posts in 18906 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » Stuck in a Javascript prison.....HELP

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

Page: 1 2
Go to End
Author Topic: 3801 Views
  • jigster
    Avatar
    Community Member
    15 Posts

    Re: Stuck in a Javascript prison.....HELP Link to this post

    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!!

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Stuck in a Javascript prison.....HELP Link to this post

    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>

  • lawless
    Avatar
    Community Member
    33 Posts

    Re: Stuck in a Javascript prison.....HELP Link to this post

    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.

  • lawless
    Avatar
    Community Member
    33 Posts

    Re: Stuck in a Javascript prison.....HELP Link to this post

    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/

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Stuck in a Javascript prison.....HELP Link to this post

    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

    3801 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.