Include jQuery into OS BIRT
Clement Wong
E mod
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>
<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
0
Categories
- All Categories
- 107 Developer Announcements
- 53 Articles
- 105 General Questions
- 141 IM Services
- 43 OpenText Hackathon
- 32 Developer Tools
- 20.6K Analytics
- 4.1K AppWorks
- 8.9K Extended ECM
- 898 Cloud Fax and Notifications
- 76 Digital Asset Management
- 9.3K Documentum
- 29 eDOCS
- 118 Exstream
- 39.8K TeamSite
- 1.7K Web Experience Management