Implementing money.js on multiple fields on same page - php

Question

I'm struggling with conceptually how to implement this (what events to bind to etc).
I'm using CakePHP and have a view with the following:
An array of products to display and an associated price ($products['Product']['price'])
Each product has a base currency set ($product['Currency]['currency'])
I have money.js, accounting.js and another JS that sets JSON data for fx.rates and fx.base
I know the currency that the user wants to see and will likely differ from the product base currency (SessionComponent::read('User.Preferences.Currency')
A div to display the currency shortname (USD) and converted value, each div with unique id
My simple test works fine - using inline-php I've put a bit of JS on the page between two script tags.
<script>
var value = accounting.unformat(<? echo $product['Product']['price'] ?>); // clean up number (eg. user input)
var target = "<? echo SessionComponent::read('User.Preference.currency'); ?>"; // or some user input
var convertedValue = fx(value).from("<? echo $product['Currency']['currency'] >").to(target);
accounting.formatMoney(convertedValue, {
symbol: target,
format: "%v %s"
}); // eg. "53,180.08 GBP"
alert(convertedValue);
</script>
Fine. Works great. But what I can't work out is how to implement this on a page with N number of products.
I'm assuming I create a JS function, something like:
fx_convert(divid, price, fromcurrency, tocurrency)
And in my Cake view, I use inline php to echo the function parameters.
What is the clean way to use jQuery for this function, and have the price 'divs' call fx_convert and update their content with the converted value?
Or is my thinking totally backwards on this? All help is greatly appreciated.

Answer 1

After some decent sleep, figured it out. :)
Using inline PHP, I pass the to/from currencies via the div attributes and set a uniform class name. e.g.
<div class="fx" fx-from="<?php echo $product['Currency']['currency']; ?>" fx-to="<?php echo SessionComponent::read('User.Preference.currency') ?>" fx-value="<?php echo $product['Product']['price']; ?>"></div>
And then use the following jQuery snippet to loop over all elements of class "fx" and do the required calculation (using the excellent money.js and accounting.js)
$(document).ready(function() {
$(".fx").each( function( index, element ){
var value = accounting.unformat($(this).attr("fx-value")); // clean up number (eg. user input)
var target = $(this).attr("fx-to"); // or some user input
var convertedValue = fx(value).from($(this).attr("fx-from")).to(target);
$(this).html(accounting.formatMoney(convertedValue, {
symbol: target,
format: "%v %s"
}));
});
});
Still need to refactor and tidy up, but the solution is there.