Lately there have been too many people wanting to know how to execute Javascript in Celerity.
Let me show you how it done.
First a quick note on JRuby installation.
Here are few useful links to install JRuby under
-
1. Linux(ubuntu) should work for other linux packages as well.
2. Windows.
Just to confirm,kindly type jruby -v on terminal or cmd depending on OS you are using and you should get the version of jruby you are running.
Mine output was
jruby -v jruby 1.4.0 (ruby 1.8.7 patchlevel 174) (2010-03-11 6586) (OpenJDK Client VM 1.6.0_0) [i386-java]
Now go ahead and just install celerity gem.
More about celerity installation can be found here also just quickly check whether the sample code work for you.If it work then your ready go and for those it don’t well you just need to tweak a bit.
Ok enough of installation,now we start with running javascript under celerity.
Here is my test HTML File “index.html.”
<html><head><script type=”text/javascript”>function populateDropDown() {var select = document.getElementById(‘colors’);var options = [‘Ruby’, ‘JRuby’, ‘IronRuby’, ‘Rails’];var index;for(index = 0; index < options.length; index++) {var option = document.createElement(‘option’);option.appendChild(document.createTextNode(options[index]));option.value = options[index];select.appendChild(option);}}</script><script type=”text/javascript”>function add_new_language() {var wrapper = document.getElementById(‘wrapper’);var input = document.createElement(‘input’);var br = document.createElement(‘br’);input.setAttribute(‘type’,’text’);wrapper.appendChild(br);wrapper.appendChild(input);}</script></head><body onload=”populateDropDown()”><h1>Select Your Favourite Language</h1><form><select id=”colors”></select> <a href=”#” onclick=”add_new_language()” >More Language</a><br/><span id=”wrapper”></span></form></body></html>
Here my sample code in JRuby.
require "rubygems"
require "celerity"
browser = Celerity::Browser.new(:browser => :firefox)
browser.goto("file:///home/guest/Desktop/index.html")
Now basically one can run the javascript just by a simply calling the method fire_event on the html tag that has the associated event that you want to fire.
e.g the anchor tag above has a onclick event associated with it.
browser.document.get_html_elements_by_tag_name('a').first.fire_event('click')
Now modified the html content i.e (after javascript execution) can be obtain using “browser.xml”.
Here mine output.
puts browser.xml
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<html>
<head>
<script type=”text/javascript”>
//<![CDATA[
function populateDropDown() {
var select = document.getElementById(‘colors’);
var options = [‘Ruby’, ‘JRuby’, ‘IronRuby’, ‘Rails’];
var index;
for(index = 0; index < options.length; index++) {
var option = document.createElement(‘option’);
option.appendChild(document.createTextNode(options[index]));
option.value = options[index];
select.appendChild(option);
}
}
//]]>
</script><script type=”text/javascript”>
//<![CDATA[
function add_new_language() {
var wrapper =document.getElementById(‘wrapper’);
var input = document.createElement(‘input’);
var br = document.createElement(‘br’);
input.setAttribute(‘type’,’text’);
wrapper.appendChild(br);
wrapper.appendChild(input);
}
//]]>
</script>
</head><body onload=”populateDropDown()”>
<h1>Select Your Favourite Language</h1><form>
<select id=”colors”>
<option value=”Ruby” selected=”selected”>Ruby</option>
<option value=”JRuby”>JRuby</option>
<option value=”IronRuby”>IronRuby</option>
<option value=”Rails”>Rails</option>
</select><a href=”#” onclick=”add_new_language()” >More Language</a>
<br/>
<span id=”wrapper”>
<br/>
<input type=”text”/> <!— generated by javascipt –>
</span>
</form>
</body>
</html>
Here how I made the whole flow generic.
#List of Tag that has event Handler
TAGS = ['iframe' ,'img', 'frame', 'frameset', 'ilayer', 'input', 'layer', 'select', 'a', 'area', 'form', 'object', 'script', 'embed', 'applet', 'option', 'button']
# defining a Constant with list of event_hander
EVENT_HANDLERS = ['onclick','onmouseover','onselect','onsubmit']
# List of events that can trigger a function
EVENTS = ['click','mouseover','select','submit']
TAGS.each do |tag|
browser.document.get_html_elements_by_tag_name(tag).each do |element|
EVENT_HANDLERS.each_with_index do |event_handle,i|
element.fire_event(EVENTS[i]) if element.hasAttribute(event_handle)
end
end
end
Note : – One didn’t need to fire_event for onload as the onload event is fired as soon as the page is load using browser.goto .
Other options available are : –
Thank You
