Jump to:

22972 Posts in 11596 Topics by 2824 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: 3639 Views
  • jigster
    Avatar
    Community Member
    15 Posts

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

    Hello please help me I am having difficulites creating a rotating image in my homepage

    I'm trying to use the jQuery Cycle Lite Plugin in SilverStripe but always get the error "$("#slideshow) is null

    1. put jquery.cycle.lite.js and jquery-1.3.2.js in mysite/javascript

    2. in Homepage_Controller I have put

    function init() {

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

    3. in Homepage.ss I have included the following in the head of the document

    <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>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#slideshow').cycle();
    });
    </script>

    I have tried using the jQuery.noConflict (); code but this returns the error $ is not a function.

    I have also used the following code :

    jQuery(document).ready(function () {
    jQuery('#slideshow').cycle();
    });

    but this returns the error
    jQuery("#slideshow") is not a function,

    I feel I have tried everything possible to get this to work but it will not, any help will be appreciated!

  • jamesg
    Avatar
    Community Member
    8 Posts

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

    I'm not entirely sure about this but have you tried switching the two lines:

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

    Around so that they're in this order:

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

    It seems to me that jquery should be included before any jquery plugins.

    Hope that helps.

    Edit: Although looking at your requirement calls they are in the correct order... can you link to the site your having troubles on that might make things easier?

  • banal
    Avatar
    Community Member
    901 Posts

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

    I think the problem occurs, because you're including jQuery and the cycle plugin twice. Once in the init method, and a second time in your template source-code. Get rid of either one of those and load jQuery first (as jamesg pointed out).

  • jigster
    Avatar
    Community Member
    15 Posts

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

    Hi thanks for the advice, unfortunately it didnt work, I have attached the source code and if you could let me know if anything is wrong it would be greatly appreciated (as it is the error messgae $ ("#slideshow is null") is displayed in firebug.

    The page can be found at

    http://www.srmpromotions.com/

    Thanks.

    Attached Files
  • jigster
    Avatar
    Community Member
    15 Posts

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

    Hey thanks for replying, unfortunately it didnt wotk, I have attached the codes t this reply, if you can find any errors I will really appreciate it, thanks alot.

    http://www.srmpromotions.com/

    Attached Files
  • banal
    Avatar
    Community Member
    901 Posts

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

    Umm.. It is null, because it doesn't exist? You don't have an element with id="slideshow" in your source. If you want to address items by class, use $(".slideshow"). #slideshow will find the element with the id slideshow

  • jigster
    Avatar
    Community Member
    15 Posts

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

    Hi, I have followed your advice and modified the code accordingly (#'slideshow' to '.slideshow') but the same error message occurs, if I remove:

    $(document).ready(function()

    the error message turns to $('.slideshow').cycle is not a function...I am totally lost as to what is going wrong. I think I have tried pretty much everything! would there be any reason why it is not recognising the function?

  • banal
    Avatar
    Community Member
    901 Posts

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

    1) You still include jQuery and the cycle script twice on your page (http://www.srmpromotions.com/)
    2) It won't work when the slideshow div is commented out, as in your page
    3) I managed to make it work, by downloading your html source, removed the second jQuery and cycle script inclusion, un-commented the div (with class="slideshow") and added the following:

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

    /* // the above is equivalent to:
    jQuery(document).ready(function(){
       jQuery(".slideshow").cycle({fx: 'fade'});
    });
    */

    /* // remove this old code, of course:
    $(".slideshow").cycle({
       fx: 'fade'
    });
    */

    What you might want to do:
    Get a basic understanding of jQuery (http://docs.jquery.com/Tutorials)
    Fix your HTML! Invalid HTML may result in non-working or broken scripts.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.srmpromotions.com%2F

    3639 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.