Using jQuery in ADF Pages

JQuery is one rich AJAX library. Which is very handy and very popular library used in modern web applications.

It gives a very rich look and feel also. For detail study of JQuery you can refer the site
JQuery.

We can easily use JQuery in ADF pages also. But there is one problem regarding this is that for many ADF components we can't use components id to be used in JQuery as the ids are rendered like <id provided>::content and JQuery would not allow ":" like special characters in $("#id") statement.

So I have taken a different approach here.

First create one Fusion Web Project. In the Webcontent create one folder to put the jquery javscripts in the folder.You can download the jquery javascripts from JQuery website.

Now create one web page where to use the JQuery

Add resource tag in the page <af:resource type="javascript" source="/<directory name>/jquery-1.x.min.js"/>

Now switch to the Source view instead of design view.

and add your javascript code like below:


 <af:resource type="javascript">
        function showInput() {
            if ($("input[name=it1]").val() != null) {
                if (($("input[name=it1]").val().length &gt; 3) && ($("input[name=it1]").val().length &lt; 6)) {
                    $("input[name=it1]").css("color", "red");
                }
                else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length &lt; 9 )){
                  $("input[name=it1]").css("color", "blue");
                }
                else {
                  $("input[name=it1]").css("color", "green");
                }
            }
        }
      </af:resource>

Here in the above code if the length is below 4 or greater than or equal 9 then the text color will be green otherwise it will show red or blue according to condition.

The complete code is here

<?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:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1" title="My JQuery Test Page">

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

      <af:resource type="javascript"

                   source="/js/jquery-ui-1.8.9.custom.min.js"/>

      <af:resource type="javascript">

        function showInput() {

            if ($("input[name=it1]").val() != null) {

                if (($("input[name=it1]").val().length &gt; 3) && ($("input[name=it1]").val().length &lt; 6)) {

                    $("input[name=it1]").css("color", "red");

                }

                else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length &lt; 9 )){

                  $("input[name=it1]").css("color", "blue");

                }

                else {

                  $("input[name=it1]").css("color", "green");

                }

            }

        }

      </af:resource>

      <af:form id="f1">

        <af:panelStretchLayout id="psl1">

          <f:facet name="top"/>

          <f:facet name="center">

            <!-- id="af_one_column_header_and_footer_scroll"   -->

            <af:panelGroupLayout layout="scroll" id="pgl1">

              <af:inputText label="Input Value" id="it1">

                <af:clientListener method="showInput" type="keyPress"/>

              </af:inputText>

            </af:panelGroupLayout>

          </f:facet>

          <f:facet name="bottom"/>

        </af:panelStretchLayout>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

Now if you run the page you will see the text color change o entering value ,

like below :

Please add comments for further queries .. :)