How to set link's style upon clicking using Javascript in JDEV 12c

Question

Trying to achieve this in ADF 12c: the link's text is initially in bold, upon clicking the link, I want the text to be 'normal'. The code:

<af:link ...>    <<af:clientListener method="openPdfWindowCallback( ) /> </af:link>

<af:resource type="javascript">function openPdfWindowCallback(){   
   return function(event) {
     <!-- code to open pdf window -->
     var inputComponent = event.getSource();
     inputComponent.style.fontWeight = 'normal';   } 
 }</af:resource>

These 2 lines seem not working at all:

 var inputComponent = event.getSource();
 inputComponent.style.fontWeight = 'normal';

Is the first line correct to try to get the link itself at all?

Thanks in advance!

Answer 1

This will execute the JS code on the client, but because you are using the action listener of the link component, the page will redirect you. That means a round trip to the server which will again serve the page with the styles coded on the server effectively nullifying your attempt to update the styles. If you run the code below with "Preserve log" checked in your dev tools, you'll see that the code works but gets overridden by the styles on the server. You'll have to tell the server to change the styles on the page it's serving.

        <af:link id="l1" text="Here is a link to click"
                 inlineStyle="font-weight:bolder; margin-top:20px; margin-left:20px;">
            <af:clientListener method="openPdfWindowCallback" type="action"/>
        </af:link>
        <af:resource type="javascript">
          function openPdfWindowCallback(event) {
              // code to open pdf window 
              var inputComponent = event.getSource();
              console.log("My input component:", inputComponent);

              var elementRefernce = inputComponent.getClientId();
              console.log("my refernce:", elementRefernce);

              var myLink = document.getElementById(elementRefernce);
              console.log("My link:", myLink);

              console.log("font weight before:", myLink.style.fontWeight);
              myLink.style.fontWeight = 'normal';
              console.log("font weight after:", myLink.style.fontWeight);
          }
        </af:resource>