Plone 3 : Overriding the default Javascript files

Question

I am using Plone 3 and currently trying to override one of the default javascript files i.e. table_sorter.js.

Under the browser directory of my product, I created a directory "javascripts" (just to keep things organized), then registered the directory as a ressource, in configure.zcml:

<browser:resourceDirectory
    name="myproduct.javascripts" 
    directory="javascripts" 
    layer=".interfaces.IThemeSpecific" />

Where "myproduct" is self explanatory. Then in jssregistry.xml, I registered and ordered the javascript files:

<javascript id="++resource++myproduct.javascripts/table_sorter.js" 
    enabled="True" 
    cookable="False" 
    inline="False" 
    insert-after="jquery.js" />

Where table_sorter.js is the name of the javascript file that I need to override.

The reason I need to override the file is because the default has no way of telling the user whether a table is sortable or not until it is clicked on. I need to include icons on the table header by default.

I have followed the above steps but it does not seem to work. I have no idea where I'm going wrong. Any help will be highly appreciated.

Giacomo Spettoli · Accepted Answer · 2011-11-28T10:53:57.567

You are missing the generic setup import step. Add a file skins.xml to your gs profile with this code:

<?xml version="1.0"?>
<object name="portal_skins" allow_any="False" cookie_persistence="False">

    <object name="plonetheme_mytheme_js"
        meta_type="Filesystem Directory View"
        directory="your.product:skins/plonetheme_mytheme_js"/>

    <skin-path name="*">
        <layer name="plonetheme_mytheme_js"
            insert-after="custom"/>
    </skin-path>

</object>

After that, rembember to reinstall your product in order to apply your new gs step

Note: I'm giving another answer simply because code in comments isn't readable. Look at the @Martijn Pierters 's answer (and comments) for the initial part.

score 1 · Answer 2 · answered Nov 28 '11 at 08:25

1

You are not overriding the original JavaScript file, only adding a new one.

You can do two different things here:

Remove the original table_sorter.js from portal_javascript:
```
<javascript id="table_sorter.js" remove="true" />
```
Because the original table_sorter.js file is server through a skin layer, you can put a new file with the same name in your own skin layer to override the original.

answered Nov 28 '11 at 08:25

Martijn Pieters

1,048,767
296
4,058
3,343

Thank you @Martijn. However, I still cannot get it to work. I have created a folder in skins to hold the overriden javascript files. I have also added a reference to the folder in skins.zcml as follows: ``. Do you know where I'm going wrong with this? Thanks for the help so far. – Frankline Nov 28 '11 at 09:39

score 0 · Answer 3 · answered Dec 20 '13 at 10:09

Considering that you have already placed your customised javascript file into your static directory, do as follows.

In file "your/app/profiles/default/jsregistry.xml"

<?xml version="1.0"?>
<object name="portal_javascripts">
    <javascript id="table_sorter.js" remove="True" enabled="False" />

    <javascript cacheable="True" compression="none" cookable="True"
                enabled="True" expression=""
                id="++resource++your.app/path/to/customised/script/table_sorter.js" inline="False"/>
</object>

Modify the attributes as you wish. :)

Plone 3 : Overriding the default Javascript files

3 Answers3