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 ::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 /jquery-1.x.min.js”/>

Now switch to the Source view instead of design view.

and add your javascript code like below:

function showInput() {
if ($(“input[name=it1]”).val() != null) {
if (($(“input[name=it1]”).val().length > 3) && ($(“input[name=it1]”).val().length < 6)) {
$(“input[name=it1]”).css(“color”, “red”);
}
else if (($(“input[name=it1]”).val().length >= 6) && ($(“input[name=it1]”).val().length < 9 )){
$(“input[name=it1]”).css(“color”, “blue”);
}
else {
$(“input[name=it1]”).css(“color”, “green”);
}
}
}