Include jQuery into OS BIRT

Clement WongClement Wong EM mod
edited September 2015 in DevShare Downloads
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.



So how can jQuery be used in OS BIRT?



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.



The attached example was tested in OS BIRT 4.5.0, but should be able to run in OS BIRT 4.3 or higher.



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.



head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",function() {

window.jq191 = jQuery.noConflict();



// OS BIRT Viewer uses prototype.js so we'll need to move the jQuery default $ to something else



});





In the table, we place a simple <DIV> placeholder in the table so that we can find this DOM element with jQuery.



<div id="here"></div>



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 $.



<script>

allCells = jq191("#here").closest("table").find( "td" );



allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE");

allCells.parent().parent().parent().find("tr:even").css("background-color", "");



allCells

.on("mouseover", function() {

var el = jq191(this);

el.parent().css("background","#DDDDDD");

})

.on("mouseout", function() {

allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE")

allCells.parent().parent().parent().find("tr:even").css("background-color", "")

});

</script>

Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com

Sign In or Register to comment.