Jump to:

22997 Posts in 11620 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » Jquery Document.Ready() problem with Jquery UI library

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
Go to End
Author Topic: 2323 Views
  • lise
    Avatar
    Community Member
    47 Posts

    Jquery Document.Ready() problem with Jquery UI library Link to this post

    I am trying to use the JQuery UI accordion with SilverStripe 2.3.3. It works ok excepted that it does NOT load before the page is
    displayed. As a result we first see the "raw" markup (basically a <ul> structure ) before it gets properly styled by the jQuery Accordion library. (so yes the library works , just not initialized properly)

    I assume it is another problem with document.ready() but I can't figure it out.

    In my php file :

    function init() {
    parent::init();
    Requirements::themedCSS("core");
    Requirements::themedCSS("jquery-ui-1.7.2.custom");
    Requirements::JavaScript("mysite/javascript/jquery-1.3.2.min.js");
    Requirements::JavaScript("mysite/javascript/jquery-ui-1.7.2.custom.min.js");
    Requirements::JavaScript("mysite/javascript/ui.accordion.js");
    }

    The file ui.accordion.js :

    ;(function($) {
    $(document).ready(function() {
    jQuery.noConflict();
    jQuery("#accordion").accordion({ active: false,
    collapsible: true,
    autoHeight: false,
    header: 'h3' ,
             alwaysOpen: false});
    }
    );
    })(jQuery);

    I think this is what is documented in http://doc.silverstripe.org/doku.php?id=jquery#examples.

    If I insert an "alert()" in ui.accordion.js just after noConflict(), the message get printed *after* the page is loaded but
    of course, the accordion code has not been executed yet.
    Please could you tell me what I am doing wrong? I have to mention that I am not a Javascript expert ..so any help would be highly appreciated as I am really puzzled here.

    Thanks!

  • zenmonkey
    Avatar
    Community Member
    524 Posts

    Re: Jquery Document.Ready() problem with Jquery UI library Link to this post

    I've been having issues with script load order when defining requirements. Haven't been able to get stuff working when calling from the init function

    I found the easiest fix it was just to call the files the normal way the files in my Page.ss template. You shouldn't need the NoConfilct when you wrap your jQuery in the :(function($){}(jQuery); wrapper.

  • lise
    Avatar
    Community Member
    47 Posts

    Re: Jquery Document.Ready() problem with Jquery UI library Link to this post

    Thanks.
    Unfortunately, this is a large project and for consistency reason, I would prefer to keep the structure we have and continue
    to use "Requirements" ...

    I have the same problem with another Jquery plugins so I assume I must be doing something wrong.
    Any idea anyone?
    Thanks.

  • ajshort
    Avatar
    Community Member
    244 Posts

    Re: Jquery Document.Ready() problem with Jquery UI library Link to this post

    I would recommend installing firebug - it will let you track down and JS errors. I seriously doubt it's an issue with the order of the files inclusion.

    2323 Views
Page: 1
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.