Include jQuery into OS BIRT

Clement Wong
Clement Wong E mod
edited February 11, 2022 in Analytics #1
We've seen that commercial BIRT includes jQuery so calling functions to highlight rows or creating mouse-overs are easy to do. Reference samples include this forum post with an attached example or this DevShare with an extensive example.<br />
<br />
So how can jQuery be used in OS BIRT?<br />
<br />
With the release of BIRT 4.3, we've included the ability to use head.js (see release notes for more info) to load external JavaScript libraries. If you're using an older version, you still can load external JavaScript libraries via the dynamic library loader -- see this DevShare for an example.<br />
<br />
The attached example was tested in OS BIRT 4.5.0, but should be able to run in OS BIRT 4.3 or higher.<br />
<br />
In the clientInitialize event, we load jQuery with a callback once the library is loaded. Because the OS BIRT viewer uses prototype.js, which defines the $ JavaScript function, we need to move the jQuery $ to another name.<br />
<br />
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",function() {<br />
window.jq191 = jQuery.noConflict();<br />
<br />
// OS BIRT Viewer uses prototype.js so we'll need to move the jQuery default $ to something else<br />
<br />
});
<br />
<br />
<br />
In the table, we place a simple <DIV> placeholder in the table so that we can find this DOM element with jQuery.<br />
<br />
<div id="here"></div><br />
<br />
Now, we can use jQuery to find all the <TR>s to highlight the row colors, and also apply a mouse over and mouse out to the row. You will notice that I'm using jq191 instead of the default jQuery $.<br />
<br />
<script><br />
allCells = jq191("#here").closest("table").find( "td" );<br />
<br />
allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE");<br />
allCells.parent().parent().parent().find("tr:even").css("background-color", "");<br />
<br />
allCells<br />
.on("mouseover", function() {<br />
var el = jq191(this);<br />
el.parent().css("background","#DDDDDD");<br />
})<br />
.on("mouseout", function() {<br />
allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE")<br />
allCells.parent().parent().parent().find("tr:even").css("background-color", "")<br />
});<br />
</script>
Warning No formatter is installed for the format ipb