Parse javascript variable into iframe src

Question

I have been asked to deploy a Value Click tracking pixel on a website order receipt page. Data must be dynamically placed into the src of an iframe.

I've got the correct data declared as variables as shown below:

<script type="text/javascript">
//makes a copy of the total order revenue
var totalPrice = jQuery('.veryImportant.ordertotal div').html();
jQuery('#buttons').append('<p id="totalPrice">'+totalPrice+'</p>');
//removes the £ pound symbol from the duplicated string
var val = jQuery('#totalPrice').html();
jQuery('#totalPrice').html(val.substring(1, val.length));
//required variables
var orderid = jQuery('.ordernumber strong').text(); //order ID number
var revenue = jQuery('#totalPrice').text(); // total order revenue
var quantity = jQuery('#totalQuantity').text(); //quantity per table row/product name
//testing the variables print the correct values
alert(orderid + " " + revenue + " " + sku + " " + quantity);
</script>

(for anybody wondering about 'sku', that already exists in the page, so I'm lucky on that one)

I need the variables to print their values dynamically inside this iframe, which I'll be placing under the jQuery above:

<iframe src="https://secure.img-cdn.mediaplex.com/0/24663/universal.html?page_name=sale&Sale=1&Amount={' + revenue + '}&Quantity={' + quantity + '}&mpuid={' + sku + ',' + orderid + '}" HEIGHT=1 WIDTH=1 FRAMEBORDER=0></iframe>

Above I've tried adding the variable names but encased with a space and a + symbol, but that's not working. It's simply showing exactly the above in the browser.

Any ideas, people?

Answer 1

OK so I managed to resolve this. The method is pretty long winded, but alas I had to work around a few hurdles (hence the why I had to duplicate and move some data around)

<!-- order confirmation page VALUE CLICK -->
<venda_block mode=value,<venda_tpxt mode=get,name=track>=orderreceipt><!-- applies this     code block to the order receipt page only -->
<!-- HTML -->
<p id="valueClickSrc"></p><!-- acts as a store for the js to construct and deploy the dynamic src -->
<iframe id="iframe1" src="#" HEIGHT=1 WIDTH=1 FRAMEBORDER=0></iframe> <!-- the actual      tracking iframe which will be populated by js -->
<p id="totalQuantity" style="position:relative; z-index:9999; background:#066; font-size:14px; color:#FFF;"><venda_shopcart mode=getqty></venda></p><!-- serves to 'wrap' the quantity so that it can be selected by id -->
<!-- witch craft -->
<script type="text/javascript">
var totalPrice = jQuery('.veryImportant.ordertotal div').html(); //grabs the order total     price from the receipt and stores it in a variable
jQuery('#buttons').append('<p id="totalPrice" style="display:none;">'+totalPrice+'</p>'); //prints the total price inside a p tag so that it can be selected
var val = jQuery('#totalPrice').html(); //grabs the order total price from the newly printed p tag above
jQuery('#totalPrice').html(val.substring(1, val.length)); //removes the first character from the #totalPrice string (in this case, the unwanted £ GBP pound symbol)
var orderid = jQuery('.ordernumber strong').text(); //order ID number
var revenue = jQuery('#totalPrice').text(); // total order revenue
var quantity = jQuery('#totalQuantity').text(); //quantity per table row/product name
// sku is a variable that appears to already be in side the default checkout page js. I got lucky with that one.
alert(orderid + " " + revenue + " " + sku + " " + quantity); //tests that all variables are printing as they should
jQuery('#valueClickSrc').html('https://secure.img-cdn.mediaplex.com/0/24663/universal.html?page_name=sale&Sale=1&Amount=%7b'+revenue+'%7d&Quantity=%7b'+quantity+'%7d&mpuid='+sku+'id'+ orderid); //writes the dynamic url with a combination of text and variables. This is placed inside the <p> above called #valueClickSrc
var valueClickSrc = jQuery('#valueClickSrc').html(); //stores the content of the <p> above into a variable
jQuery('#iframe1').attr('src', valueClickSrc); //applies the content from #valueClickSrc into the src attribute of the iframe
</script>
</venda_block>
<!-- End Value Click tag -->

For anybody working on the Venda platform, they may find this useful.

If anybody has suggestions, I'd be happy to hear them.