Customizing JavaScript Files in Plone 3

Currently, I am using Plone 3 and attempting to customize the default javascript file named table_sorter.js.

To keep things organized, I created a directory called "javascripts" under the browser directory of my product. I then registered this directory as a resource in the configure.zcml file:

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

The name "myproduct" is self-explanatory. Following that, in the jssregistry.xml file, I registered and arranged the order of the javascript files like so:

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

The aim of overriding the table_sorter.js file is to include icons on table headers by default, as the default behavior does not provide a way to indicate whether a table is sortable until it is clicked on.

Despite following the steps above, the customization doesn't seem to be working. I'm unsure where I might be making a mistake. Any assistance would be greatly appreciated.

javascriptplonezopegenericsetup

Answer №1

Ensure to include the generic setup import step by adding a file skins.xml to your gs profile with the following code snippet:

<?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>

Don't forget to reinstall your product after applying the new gs steps for changes to take effect.

Note: I'm providing this alternative answer as it is hard to read code in comments. Refer to @Martijn Pierters's original answer (and accompanying comments) for more context.

Answer №2

Instead of replacing the existing JavaScript file, you are simply adding a new one to the mix.

There are two options available in this scenario:

  1. Delete the original table_sorter.js from portal_javascript:

    <javascript id="table_sorter.js" remove="true" />

  2. Since the original table_sorter.js file is delivered through a skin layer, you have the choice to upload a new file with the same name to your own skin layer and override the original script.

Answer №3

If you've already uploaded your personalized JavaScript file to the static directory, follow these steps:

Open the "your/app/profiles/default/jsregistry.xml" file.

<?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>

Feel free to modify the attributes as needed. :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Currently, I am faced with the challenge of closing the igx-expansion-panel within my Angular project. While everything functions smoothly with a standard panel, things get a bit tricky when dealing with nested angular accordion structures using igx-accord ...

javascriptangulartypescriptignite-uiignite-ui-angular

Utilizing multiple div IDs within the same script functionality

I have multiple dropdown menus on a webpage, and whenever an onchange event happens with any of these menus, I want to utilize the same block of code rather than creating individual scripts for each menu's id. This approach is preferred as the page ma ...

javascriptjqueryajaxonchange

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

I am looking to incorporate {{ }} within the Angular "filter" filter, specifically while nested inside an ng-repeat. Let's consider the relationship below: var categories = [ {"title":"land"}, {"title":"sea"}, {"title":"air"} ]; var vehi ...

javascriptangularjsfilternestedangularjs-ng-repeat

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

javascriptjqueryhtmlangularjs

Sending Three.js meshes to a web worker through JavaScript

I have a collection of objects, which are meshes generated using Three.js, that I need to perform operations on within a web worker. My question is, how can I send these objects to the worker? My understanding is that there's a concept called transfe ...

javascriptthree.jsweb-workertransferable

Choose the minimum price from the JSON response of the API

I have made an AJAX request to an API and received the following JSON response below. I am trying to extract the lowest 'MinPrice' from the 'Quotes' data but finding it challenging to determine the best approach. One method I am consid ...

javascriptjqueryarraysjson

What is preventing me from getting jQuery UI 1.8.20 dialog to function on JSFiddle?

My attempt to implement jQuery UI dialog in JSFiddle has been unsuccessful, consistently resulting in a dialog opening error caused by a deep-seated issue within jQuery UI: Uncaught TypeError: Cannot read property '3' of undefined. Although I am ...

javascriptjquery-uijquery-ui-dialogjsfiddle

What is the best way to manage a promise's response?

I'm currently facing a situation where I need to create a petition to an endpoint and retrieve the URL of the backend that I intend to use. My setup involves a file with the API configuration where I instantiate axios. Previously, my approach was sim ...

javascriptreactjspromiseasync-awaitaxios

Connecting via web sockets through SSL is not functioning properly

My Web Socket functions correctly in both the localhost and production environments (https://www.example.com). However, upon deploying the same code to the pp environment (), I encounter the error message: WebSocket handshake - Unexpected response code: 4 ...

javascriptnode.jssslwebwebsocket

Disregard all numbers following the period in regex

I have developed a function to format numbers by adding commas every 3 digits: formatNumber: (num) => { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') }, The issue with this function is that it also add ...

javascriptnode.jsregex

What is the best way to create an animation for a dynamic menu background image

While hovering over a list item, I want to create an animation where the background image appears to zoom out. $(function () { var image = $('.menu').find('img').attr('src'); $('.menu ul li').mouseover(fun ...

javascripthtmlcss

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

One issue I'm facing is that I added Tabs from JQuery UI on my website. The tab containing paragraphs loads fine, but the tabs linked to other HTML pages (which don't have tabs) won't load. Here is my .js file code and .html code: $(funct ...

javascriptjqueryjquery-ui

Guide on navigating to a different page following a successful Google Sign In within React18

I'm facing an issue with redirection after signing in with Google on my React 18 project. Despite successfully logging in, the page does not redirect as expected. Below is a snippet of my Login.jsx file where the Google login functionality is implemen ...

javascriptreactjsreact-routerreact-router-dom

Is it possible to make each letter on a page a different color using JavaScript? I've noticed that there is always an additional set of span tags before each opening tag on the page

Page hosted using Google Drive Within the JS code: var doc_part = false; //denotes if a character is not part of the visible document var page_body; //function to generate random rgb values function randomInt(max, min) { return Math.floor((Math.ran ...

javascriptalgorithm

Is there a way to stop window.pageYOffset from resetting every time the page is rendered?

I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position. However, I've encountered som ...

javascriptcssreactjs

I am unable to fire a simple jQuery event when pressing a key until the next key is pressed

I am currently working on a project for a friend, where I have implemented a hidden text field. When the user starts typing in this field, the text is displayed in a div element to create an effect of typing directly onto the screen instead of an input fie ...

javascriptjqueryevent-handlingjquery-events

Removing an event from Fullcalendar

With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...

javascriptjqueryfullcalendar

How can I change the background image using CSS instead of HTML?

I initially created a non-responsive website for an existing project. Now I need to convert it into a responsive site. I tried changing the logo image to make it responsive, but it's not working as expected. <td colspan="2" style="background-image ...

javascriptcsshtml

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

javascripthtmlcss