Posted by Maestro232 on December 27, 2012 at 4:17pm
Any of you JQuery UI experts want to try your hand at this problem?
I am trying to achieve the accordion jquery effect on one of my Drupal sites but it's not working. Here's what I have so far...
my html head section seems to have all the scripts pulled in correctly...
<head profile="http://www.w3.org/1999/xhtml/vocab">
<style media="all" type="text/css">@import url("https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.core.css?mfp3rz");
@import url("https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.theme.css?mfp3rz");
@import url("https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.accordion.css?mfp3rz");</style>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/jquery.js?v=1.4.4" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/jquery.once.js?v=1.2" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.core.min.js?v=1.8.7" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.widget.min.js?v=1.8.7" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/jquery.ba-bbq.js?v=1.2.1" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/ui/jquery.ui.accordion.min.js?v=1.8.7" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/misc/jquery.cookie.js?v=1.0" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/sites/default/themes/afsomega/js/nav.js?mfp3rz" type="text/javascript"></script>
<script src="https://umwebdev.oit.umass.edu/afsystems/sites/default/themes/omega/omega/js/jquery.formalize.js?mfp3rz" type="text/javascript"></script>
<script type="text/javascript">
</head>The nav.js which is referenced in the head is as follows...
(function($) {
$(document).ready(function(){
$("#accordion").accordion();
});
});And the HTML div element being referenced is as follows...
<div id="accordion">
<h3>Section 1</h3>
<div><p>Mauris mauris ante...</p></div>
<h3>Section 2</h3>
<div><p>Sed non urna....</p></div>
</div>I can't figure out what's going wrong. I am noticing that the jquery.formalize script is loading after my custom nav.js script in the header, but I can't think why that would be a problem. Also, I am using all sorts of other jquery calls in the nav.js which are working. It is just the jQuery UI elements that don't seem to be working.
Any ideas?
Comments
Did you figure this out
Did you figure this out yet?
Drupal with JQuery is an ecosystem, so you need to have all the parts working, plus making sure your cache is cleared in the browser and on the server.
The first thing I might do is change nav.js to display a pop-up. This would tell me if JQuery is at all working and if the most up to date JS file was found.
(function($) {$(document).ready(function(){
alert("This part is working.");
});
});
Not yet.
Thanks for the reply. I haven't figured this out yet. In regards to testing JQuery, I am already using some on the page without trouble. It seems to be the UI elements (accordian, tabs, etc...) that aren't working, even though I can see the jquery UI files come through in the page header.
Implement hook_preprocess_page()
jQuery UI does come out of box in Drupal 7 but you need to add it to a page or all pages if necessary. One approach is to simply copy the code below and place it into your theme's template.php file. Be sure to replace myTheme with your theme's name, clear cache and you should be good to go.
/*** Implements hook_preprocess_page()
*/
function myTheme_preprocess_page(&$variables) {
drupal_add_library('system', 'ui');
drupal_add_library('system', 'ui.accordion');
}