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!