include css and js once in an extension

**flrt** · 04-10-2009 06:36 AM

Hello

I want to make an extension to embed extjs grid. So I need to add css and js link in the head of the page, ie

Code:

<link rel="stylesheet" type="text/css" 
href="http://wiki/skins/mystuff/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http://wiki/skins/mystuff/extjs/adapter/ext/ext-base.js"></script>

Then in my deki page, I create a classic table and I add a sort of

Code:

 {{ extjs.insertTable{tablename: "abc"} }}

where abc is the id of the table. The Javascript then parses the html table and inserts the javascript grid.

In fact, I can have several tables in one page. For instance :

Code:

 {{ extjs.insertTable{tablename: "abc"} }}
 {{ extjs.insertTable{tablename: "def"} }}
 {{ extjs.insertTable{tablename: "ghi"} }}

So I need the extension to test to import js+css only once.
But how can I adapt my head tag ?

Code:

<html xmlns:eval="http://mindtouch.com/2007/dekiscript">
 <head>
    <link rel="stylesheet" type="text/css" href="http://wiki/skins/mystuff/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://wiki/skins/mystuff/extjs/adapter/ext/ext-base.js"></script>
 </head>

with a kind of test (<eval:if...) of a setted variable (how to)
How to write an include_once ?

thanks

**Guerric** · 04-10-2009 07:46 PM

The HEAD and TAIL portions of the DekiScript XML extensions are only embedded once. Problem solved.

**neilw** · 04-15-2009 04:03 PM

Can you explain exactly how this works? For instance, if I have an external <script> include it only shows up once. But if I put jquery calls in the <head> that are different, they all show up separately. How does Deki decide which parts to include only once, and which to include each time?

As far as I've seen it seems to be pretty smart about it, but understanding how it really works would be very helpful, to (a) avoid getting bitten in the future, (b) avoid wasting time trying to explicitly avoid problems, or (c) know how to take advantage of it sometimes.

**Guerric** · 04-15-2009 07:27 PM

The head section makes sure you don't include resources twice. Consider this to be the defines/include section of the script. Anything that you don't want to be duplicated across invocations, like javascript includes or common styles, should go here.

The body section will be injected where the extension is invoked.

The tail section is a shortcut for Deki.$(function() {});, which is just a onDomReady event trigger. Whatever you put in the tail will get invoked after the page is loaded so you know that the DOM is accessible. I don't think there are any comparisons made here so every tail section gets embedded in the page.

**neilw** · 04-17-2009 08:54 PM

So does that mean that Javascript code defined in the head will be included every time the extension is invoked? Is it a problem if the same function is redefined over and over? Not talking about included code, but actual scripts wrapped in <script> element.

In one extension I generated a unique function name each time (using @id) to avoid this, but I'm still not sure if it's accomplishing anything useful.

**Guerric** · 04-17-2009 09:11 PM

If you want to have common code between all invocations of a function then put it in the head. If you want something specific to a singular invocation, put it in the body or tail.

Each section is synonymous with each section of an html document. Head => html head, body => html body, tail => After html body (not a real html tag)

**neilw** · 04-17-2009 10:06 PM

I just did some testing (what I should have done in the first place) and what I learned is very useful. This is probably worth a FAQ entry.

Anyway, here's what seems to be happening. It doesn't disagree with what Guerric posted but there are additional subtleties:

For all extension calls on a page, Deki accumulates the generated elements to insert into the page <head>.
Any redundant elements are eliminated. In this case, "redundant" means that the two elements are identical (e.g., two identical <scripts>)
Note that any inserted Dekiscript (including argument evaluations) is likely to make the output of different extension calls differ, and therefore each will be included in the page, even if the Javascript function name are the same.

This suggests that it would be most efficient to, where possible, keep "fixed" code and evaluated Dekiscript code in separate <script> elements in the head. That way, the fixed code common to all invocations will only be included once. This may not make a significant difference unless the common script code is large.

**SteveB** · 04-23-2009 03:23 PM

I started putting some notes about this together a long time ago, but never finished it. Work-in-progress can be found here: http://developer.mindtouch.com/User:...ge_Composition

**flrt** · 05-22-2009 10:01 PM

Hello

thanks for the response,
Is there a full documentation of the xml extension format ?
I do not have found it...

thanks in advance

**Guerric** · 05-22-2009 10:29 PM

Originally Posted by flrt

Hello

thanks for the response,
Is there a full documentation of the xml extension format ?
I do not have found it...

thanks in advance

Search is your friend.

Thread: include css and js once in an extension

Thread Tools

Search Thread

Display

include css and js once in an extension

Posting Permissions