Include jQuery into OS BIRT
Options
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
- 108 Developer Announcements
- 49 Articles
- 100 General Questions
- 122 IM Services
- 40 OpenText Hackathon
- 31 Developer Tools
- 20.6K Analytics
- 4.1K AppWorks
- 8.9K Extended ECM
- 897 Cloud Fax and Notifications
- 77 Digital Asset Management
- 9.3K Documentum
- 29 eDOCS
- 120 Exstream
- 39.8K TeamSite
- 1.7K Web Experience Management