Follow Us on Twitter

Invoke JavaScript from backing bean in ADF 11g

by Marcel Maas on May 24, 2012 · 10 comments

So, lets say you are working with ADF11g but also want to leverage the power of JQuery to display a messagebox that fades away after some seconds. For instance after creating a message. We can create the following JavaScript to make a message box appear, and slowly fade out after 5 seconds.

function autoremove(selector){
    $(selector).fadeTo(5000, 1.0);
                          opacity: 0,
                          margin: '-50px 24px 0px 24px'
                          }, 1000, function() {

In this code snippet we first show the box by removing a css class called hideBox. I then misuse the fade functionality to wait for 5 seconds. (there are surely better ways to do so) Then I use the animate function to fade and close the box to finally add the hideBox styleClass again.

But how to call this from a backing bean where my logic for storing the message is located? Use the following snippet.

* Add a script to the render kit
public static void addScriptOnPartialRequest(String script) {
    FacesContext context = FacesContext.getCurrentInstance();
    if (AdfFacesContext.getCurrentInstance().isPartialRequest(context)) {
        ExtendedRenderKitService erks =
        Service.getRenderKitService(context, ExtendedRenderKitService.class);
        erks.addScript(context, script);

You can see we first get a handle to the AdfFacesContext which we use in turn to invoke a piece of javascript code.

In our case we call the method as such:

JsfUtils.addScriptOnPartialRequest(" autoremove('.autofade');");

As you can see we call the function autoremove using the css selector ‘.autofade’.

This way you can leverage the power of JQuery or any other JavaScript from a bean! Give it a try!


As promised, here is an example project: Example JDeveloper Project


A small addition to this post:

For this to work flawlessly you would have to disable content compression or else your style classes will be compressed from “.autoremove” to something like “.xyz”. You can do this by setting the following context parameter in your web.xml.


Alternatively you could use the id for a lookup or AdfPage.PAGE.findComponent() to get a handle to the dom element.

Invoke JavaScript from backing bean in ADF 11g, 4.3 out of 5 based on 7 ratings
VN:D [1.9.22_1171]
Rating: 4.3/5 (7 votes cast)

{ 10 comments… read them below or add one }

Suresh May 25, 2012 at 4:50 am

Hi ,

Nice one !! leveraging the power of Jquery !!

can you share the working sample piece.

How are you adding the required jquery lib?



Marcel Maas May 25, 2012 at 11:43 am

Hi Suresh,

Good to hear you like the post. You can add the required lib by using the following tags:

<af:resource type="javascript" source="/../SpacesAssets/js/jquery-1.7.2.min.js" />
<af:resource type="javascript" source="/../SpacesAssets/js/functions.js" />

As you can see I use the jquery in combination with ADF and Webcenter spaces and it is packaged in a different deployment.

But you would usually try to simply add it to your own ADF project and reference it the same way. Right now I am not able to directly share my code, but I shall create a sample project and share it later this week.



Suresh May 25, 2012 at 11:46 am


I am not able to see any syntax.. hope you missed pasting it.

Eagerly waiting for you project 🙂



Suresh May 25, 2012 at 11:46 am

okay got it ]


Marcel Maas May 25, 2012 at 11:49 am

You were to fast for me, but you can see it now. 🙂 I will keep you updated!


Marcel Maas June 7, 2012 at 12:16 pm

Hi Suresh, as promised I have added an example project.

have fun with it!


Edgar Galván June 6, 2012 at 8:23 pm

Hi Marcel,

Is it recomendable to affect the behavior of ADF Components via Javascript or JQuery?


Marcel Maas June 7, 2012 at 10:58 am

Hi Edgar,

I think you should only do so with components that are not doing any important work such as displaying a feedback message. The thing is since jquery runs client side you always have the risk of someone injecting custom javascript into your application. Having said so JQuery runs fine in combination with ADF. So to recap my advice would be to use the ADF components to do the job, if they are insufficient then you can extend their functionality using for example JQuery.

Good luck!


Sankar Panneerselvam August 4, 2014 at 5:56 pm

Does ExtendedRenderKitService support loading JavaFx elements inside ADF?


GingerHead January 15, 2019 at 1:22 pm

Hello marcel,

Is there a way to remove the script or prevent it from execcuting? I mean after adding the script and before randering the page.


Leave a Comment


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS