Using JQuery in Oracle ADF

This blog we will see how to use JQuery in Oracle ADF.
The below steps we need to follow to use JQuery in ADF.

• Add JQuery library (Jquery Library) into your fusion web application. Add the JavaScript file inside Lib.

• Add a JavaScript file in resource resources.

• Add the below method inside the new JavaScript file for change the color as per the entered text.

         function changeColorText() {
               if ($("input[name=it1]").val() != null) {
                   if (($("input[name=it1]").val() == 'AAA' )) {
                        $("input[name=it1]").css("color", "green");
                    }
                  else if (($("input[name=it1]").val() == 'BBB')) {
                        $("input[name=it1]").css("color", "magenta");
                    }
                   else if (($("input[name=it1]").val() == 'CCC')) {
                        $("input[name=it1]").css("color", "blue");
                    }
                   else if (($("input[name=it1]").val() == 'DDD')) {
                        $("input[name=it1]").css("color", "yellow");
                   }
                  else {
                        $("input[name=it1]").css("color", "red");
                   }
             }
          }

• Now create a jspx page, and call this above JavaScript file as a resource in jspx page, and also add Jquery Lib to jspx page as Resource.

        <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
        <af:resource type="javascript" source="/resources/js/inputTextJScript.js"/> 

• Just see the JSPX Page like the below

      <?xml version='1.0' encoding='UTF-8'?>
         <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"                                xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
       <jsp:directive.page contentType="text/html;charset=UTF-8"/>
        <f:view>
             <af:document title="JQueryCallADF.jspx" id="d1">
               <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
               <af:resource type="javascript" source="/resources/js/inputTextJScript.js"/>
               <af:form id="f1">
                <af:inputText label="Enter Text :" id="it1" contentStyle="font-weight:bold;">
                    <af:clientListener method="changeColorText" type="keyDown"/>
                </af:inputText>
              </af:form>
            </af:document>
         </f:view>
       </jsp:root>

• Now run the application and enter the value in text box the color change will display.

    You can download the code: Download