By gateone on

Hi,

I found out that if you included JavaScript libraries of various kinds, especially some of the very popular AJAX libraries in your (PHPTemplate) templates in 4.7, this might break the support for AJAX and JavaScript features in Drupal itself, like e.g. the collabsible items as seen on the Admin page.

I am currently working on a site that for various reasons I chose to use the fabulous Nifty Corners 2 which is a nice way of styling rounded boxes that can contain some interesting effects, like rounded boxes with backgrounds, etc. or images that have automatically rounded borders.

So, following the tutorials of most of these JavaScript libraries, you are told to place a reference to the JavaScript library in question into the header portion of your layout, and in most cases a caller of the function somewhere in the body, or near the end of the body.

So I called the Nifty Corners 2 JavaScript libraries and additional CSS files in my page.tpl.php after calling the print $head and print $styles calls.

But when trying out the new feature, I can see that it works on the DIVs I like to have rounded (they are defined in layouts.js btw, to have them in one handy place), but the function in Drupal's own collapse.js stops working.

I have found out that this problem has occured before and has been described in the forums, but a solution to it could not be found. After playing around I figured out how to make this work and, it is really quite simple,

So, the general approach is to FIRST call your template specific JavaScripts and stuff, and THEN call the print $head and the print $styles call, which will output Drupal's own JavaScript includes and style sheets.

And hurray, it works! My Nifty Corners work AND the collapse feature and other AJAX-style stuff in 4.7 works! ;-)

As I am not a very good JavaScript programmer maybe someone can explain the reason for the importance of when and where to include an external JavaScript and maybe even how to do it differently alltogether?!

Thanks a lot,

Steve

⋅ Categories: Drupal 4.7.x

Comments

gateone’s picture

gateone commented

there is some more stuff on the subject to be found here on drupal.org.
Steve

bit2’s picture

bit2 commented

I had a similiar problem, when I tried to add some onload handler to my pages. It turned out that Drupal already had defined an onload handler and mine was simply overwriting it.

However Drupal's solution was to define an onload handler that would first call the previously defined onload handler and execute it's own code only after that. This logic is implemented in the addLoadEvent() function in drupal.js.

So probably the problem with your code was that it overwrote improperly some behaviour that was already defined in drupal.js.

kgp22’s picture

kgp22 commented

Hmmm... Looks like I'm not alone.

Nifty corners works. But the "COLLAPSING FIELDSETS" feature doesn't.

toma’s picture

toma commented

A nifty corners module available

http://drupal.org/project/niftycorners-module

---
All Google Blogs in one place
http://www.googledemo.org

Dash’s picture

Dash commented

Um

"So, the general approach is to FIRST call your template specific JavaScripts and stuff, and THEN call the print $head and the print $styles call, which will output Drupal's own JavaScript includes and style sheets."

I use Nifty Corners as well, and I've just done this on my test site and it works!

Thanks Panatlantica!

Skip The Budgie