The upshot of it is, I looked at the Rails console within Aptana at what commands were being run. Most of the where, for example:

gem install rails -l

All I did, is take each of the commands run automatically from the console and removed the -l option:

gem install rails

Everything installed perfectly in no time at all, and it’s all now up and running!

So let’s get started….

The first thing to do is download the latest version of jquery.

Next grab:

• thickbox.js (thickbox-compressed.js)
• thickbox.css
• loadingAnimation.gif

First, make sure the page you are trying to use the Thickbox on, has a valid DTD – it will not function correctly if you don’t. I as a rule, use the Strict DTD.

Next we include the javascript files we have downloaded, and the css file – taking note to replace the path and filenames if you downloaded the compressed versions:

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/>
<script type=”text/javascript” src=”javascript/jquery.1.6.4.pack.js“></script>
<script type=”text/javascript” src=”javascript/thickbox-compressed.js“></script>
<link rel=”stylesheet” href=”css/thickbox.css” type=”text/css” media=”screen” />

Now that we have those included, we need to quickly edit thickbox.css, and tell it where to find the loadingAnimation.gif that we downloaded earlier. By default it looks for images/loadingAnimation.gif, so if this is where you’ve put it, you can ignore this step.

We should now be good to go, to try your thickbox out – there are a few ways to do this,the most common being from a text or image link, opening up the thickbox to contain an image, so we’ll use that as our example.

Text link:

<a href=”path-to-your/image.jpg” class=”thickbox”>Show Image</a>

Image link:

<a href=”path-to-your/image.jpg” class=”thickbox”><img src=”path-to-your/link-image.jpg” /></a>

The class=”thickbox” is the important bit, so make sure you’ve got that in there!

This should give you a working, (very) basic example of the thickbox. Once you’re happy with that, look at the rest of the examples, and you will find you can use it for various things, not just for showing pictures!

The other thing, which one of my developers claims to be very good at and knows almost all there is to know about it, is CSS.

The contractors however, have pointed out many many problems with our css, and have recommended resetting the styles on the sites, before doing anything. I don’t claim to be good at CSS, I know the basics but apart from that, I get my hands dirty with the backend code – so this link proved very useful and insightful when it was given to me. Explains style resets very well, and I now know what we need to do…. the question is will it ever happen?!

JavaScript bra size calculator

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/> the full amount ($amountDue).
<input type=”radio” name=”payRemainingBalance” value=”false” /> another amount. (Enter the amount you wish to pay in the field below)</td>
<div id=”anotherAmount”>
Another Amount: <input type=”text” name=”paymentAmount” id=”paymentAmount” maxlength=”8″ />
</div>

Using jQuery, this is very simple to do:

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();
});
});

</script>

As we don’t have an id on the radio button, we use the name of the input as the identifier, and a simple one liner to establish what the new value of the radio button is.

Due to the focus being on making it clear what is happening, it could be quite easy when you select the radio button, to miss what has changed on the page (a new input box appearing), so I decided to try and highlight the newly displayed input box by fading the background colour of the input box, in and out.  In order to do this in jQuery, you need the jQuery Color plugin.

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();

if ($(“input[@name='payFullAmount']:checked”).val() == ‘false’) {
$(“#paymentAmount”).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000);
}

});
});

</script>

Our starting background colour is #FFFFFF, we fade to #EFB559 in 1 second, back to #FFFFFF in 1 second, to #EFB559 in 1 second, and finally back to #FFFFFF in 1 second.  This gives the effect of highlighting the field in an orange colour twice, hopefullyhelping the user notice what has changed on the page.

So here, our TreeMap structure is….

TreeMap tMap = new TreeMap();
tMap.put(1, “London”);
tMap.put(2, “New York”);
tMap.put(3, “Paris”);
tMap.put(4, “Sydney”);
tMap.put(5, “Geneva”);

Looping through this in Velocity and getting the values OR the keys is easy enough to do, and can be found through searching on Google, but pulling out both is hard to find. Presuming we’re passed the above TreeMap to the Velocity layer as$cities

// loop through the keySet of our TreeMap and assign
// the key to $cityKey
#foreach ($cityKey in $cities.keySet())

// using the current $cityKey, get the value assigned
// to that key and set it to the variable $city
#set ($city = $cities.get($cityKey))

Key: $cityKey
City: $city

#end

Very basic example, but hopefully it’s useful to someone!

AJAX refers to not interfering with the display and behaviour of the existing page, whilst communicating with the server in the ‘background’. Once it’s received a response, then the page can be updated.

Yes clicking a link and making things appear/disappear might be done with Javascript, but it is not making an asynchronous call to the server for anything, which is quite a key part of the whole concept of AJAX!