By _________ on

i have a D7 site. i'm trying to migrate a jquery-effect, that works just fine on my D6 frontpage, to the D7 site's front page.

for testing, i set up,

	/srv/www/d7
		/test
			jquery.easyAccordion.js
			utility.js
			test.css
			test.php
		/sites/test.loc/themes/test_fusion
			page--front.tpl.php

if i nav directly to:

http://test.loc/test/test.php

where,

cat /srv/www/d7/test/test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title>jQuery test</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyAccordion.js"></script>
	<script type="text/javascript" src="utility.js"></script>
	<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="sample">
	<div id="accordion-1">
		<dl>
			<dt>Slide 1</dt>
			<dd><h2>first slide</h2><p>Cum sociis natoque penatibus</p></dd>
			<dt>Slide 2</dt>
			<dd><h2>second slide</h2><p>Cum sociis natoque penatibus</p></dd>
		</dl>
	</div>
</div>
</body>
</html>

the jquery accordion appears & functions as expected: http://imageshack.us/photo/my-images/827/d7test.png/

but, if i create a D7 front page, with similar code,

cat /srv/www/d7/sites/test.loc/themes/test_fusion/page--front.tpl.php

<?php
	 drupal_add_js('test/jquery.easyAccordion.js');
	 drupal_add_js('test/utility.js');
	drupal_add_css('test/test.css');
?>
<div class="sample">
	<div id="accordion-1">
		<dl>
			<dt>Slide 1</dt>
			<dd><h2>first slide</h2><p>Cum sociis natoque penatibus</p></dd>
			<dt>Slide 2</dt>
			<dd><h2>second slide</h2><p>Cum sociis natoque penatibus</p></dd>
		</dl>
	</div>
</div>

if i nav to the front page, i.e. 'just' at:

http://test.loc/

the content and styling, including the parent theme's, are there, but there's no accordion -- just exploded content: http://imageshack.us/photo/my-images/199/d7front.png/

are the drupal_add_js/css() assignments correct in syntax for page--front usage? are the paths, relative to the main install dir, correct?

or, have i screwed something else up?

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

Drupal 7 include jQuery UI which includes and accordion plugin and the examples module includes and example of how to use it.

_________’s picture

_________ commented

it includes jquery, of course. it does NOT include my external library.

the issue here is adding that external jquery/javascript and getting it to work.

_________’s picture

_________ commented

i got a suggestion in #irc that i should move the js/css into my theme dir.

so i juggled & moved,

	/srv/www/d7
		/test
			jquery.easyAccordion.js
			utility.js
			test.css
			test.php
		/sites/test.loc/themes/test_fusion
			page--front.tpl.php
			/css
				test.css
			/js
				/ea
					jquery.easyAccordion.js
					utility.js

and changed the drupal_add_* code in page--front.tpl.php to read,

<?php
	drupal_add_js(drupal_get_path('theme','test_fusion') . '/js/ea/jquery.easyAccordion.js');
	drupal_add_js(drupal_get_path('theme','test_fusion') . '/js/ea/utility.js');
	drupal_add_css(drupal_get_path('theme','test_fusion') . '/css/test.css');
?>

when i nav to my front-page, i still have the same issue. content & styling are there, but 'exploded' as before; the jquery effect is still non-functional.

_________’s picture

_________ commented

Reading http://drupal.org/node/756722, the problem's fixed by changing the function init -- e.g., for the 'easyAccordion' plugin, changing

from @ Drupal6:

$(document).ready(function () {
	$('#accordion-1').easyAccordion({
		autoStart:     false,
		slideInterval: 5000,
		slideNum:      false,
	});
});

to @ Drupal7:

( function ($) {
	Drupal.behaviors.myTheme = {
		attach: function(context,settings) {
			$('#accordion-1',context).easyAccordion({
				autoStart:     false,
				slideInterval: 5000,
				slideNum:      false,
			});
		}
	};
})(jQuery);

The 'external' jQuery now works as expected in D7.