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

Jquery Document.Ready() problem with Jquery UI library


Reply


4 Posts   2579 Views

Avatar
lise

Community Member, 47 Posts

5 December 2009 at 9:41am

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!

Avatar
zenmonkey

Community Member, 532 Posts

5 December 2009 at 9:59am

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.

Avatar
lise

Community Member, 47 Posts

6 December 2009 at 6:39pm

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.

Avatar
ajshort

Community Member, 244 Posts

6 December 2009 at 9:30pm

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.