Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Adding a "total" row to ACBC BYO and updating it

Hello Sawtooth Community,

This is going to be a bit long / complex, sorry about this.

I'm programming an ACBC.  In the BYO, I would like to add a custom total price row below the actual total price to show a "price after discount" (which is total price / sum of costs multiplied by a numerical value).

Total price, as calculated by summed pricing is ACBC_BYO_13.
The attribute that will define the discount factor is ACBC_BYO_5.
Because the discount factor is conditional on 2 attributes, I am using the Conditional Display to show some text including a span that contains the value (<span id="discount">) so I can go and grab it.

What is not working: after I make a choice in attribute 5, which defines the discount factor, the Conditional Display works and I see the #discount span.  But the value grabbed from #discount returns 0 in the console log.  And of course the discounted price shows as 0 as well.
Only after making a choice in *another* attribute does the console log show me the correct discount factor (variable discount), and calculations then work / the discounted price is correct.

So what I would need is to grab the value of #discount right after a selection is made on ACBC_BYO_5.

Any idea?

<script type="text/javascript">
$(document).on("ssi_ready", function(){
// adding a 2nd tr below Total price for Discounted price -at first hidden
$('tr.acbc_task_bottom_row').after('<tr class="acbc_task_bottom_row bottom2"><td class="inner_table_cell">&nbsp;</td><td class="total_label_cell inner_table_cell">Discounted monthly price</td><td class="price_cell total_price inner_table_cell"><table cellpadding="0" cellspacing="0"><tbody><tr><td>$</td><td><input name="ACBC_BYO_14" type="tel" id="ACBC_BYO_14" class="acbc_byo_price_box numeric_input" disabled="" tabindex="597"></td></tr></tbody></table></td></tr>')
$('tr.bottom2').hide();

$('select').change(function(){
// grabbing the current total price
var price = parseInt($('#ACBC_BYO_13').val().replace(',',''));    
// grabbing the current discount value -in a conditional display below the byo
var discount = parseFloat($('#discount').html());
// calculating the discounted price
var discounted = $.number(price * discount,0,".",",");


// if the discount multiplier is not 1 (which means, no discount) and if a choice has been made in attribute 5, show the discounted price row
if(discount!=1 && $('[name="ACBC_BYO_5"]').val()!=""){$('tr.bottom2').show();}
// assigning the discounted price to the numerical cell of the additional tr added earlier in the script
$('#ACBC_BYO_14').val(discounted);
})

});
</script>
asked Oct 24 by amic Bronze (1,285 points)
It sounds like you may have a race condition of sorts on your hands.  I'm guessing that the value displayed always "lags" by one input, showing what it should have shown one input earlier, right?  That would suggest that the problem is that the code you have posted is running before whatever code is meant to change the "#discount" element.  Could you share the code that is meant to change "#discount"?
Hi Zach,

what makes #discount appear is the built-in conditional display function for the BYO.  i.e. you make a choice in attribute 5, and below the BYO the field shows-up.
What I can't seem to make happen is for my code to execute after this appears on screen indeed.
Ah, I see.  Perhaps our best option would be to avoid using conditional display at all, and instead implementing the display logic on our own in this code.  As you've done already, we can programmatically read the dropdown values using script like this:

$('[name="ACBC_BYO_5"]').val()


We should be able to use something like that in place of your line 11.  I could help write that bit of code, but I'd need to know what attributes / levels map to what discount values.
Hi Zach,

a bit more complex than this because Attribute 5 does not actually includes the discount value (it's a %, so can't be used as such) + it depends on 2 other attributes.

I'll mess around with the code a bit and shout if I'm stuck!
I understand that the value of the dropdown might not be directly the number you want, but conditionals could be used to convert it to the percent needed just like your conditional display.

var discount;
var attribute3 = $('[name="ACBC_BYO_3"]').val();
if (attribute3 == 1) {
    discount = .9;
}
if (attribute3 == 2) {
    discount = .8;
}
...


Whatever logic is happening in the conditional display could be reproduced in this JavaScript.
Hey again,

indeed, that's what I am about to try.
Fingers crossed (although that makes typing javascript a tad tricky).

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...