klxwlls
(kw)
July 12, 2016, 2:57pm
1
Hi everyone,
I am trying to use Accrue.js (https://github.com/jpederson/Accrue.js/ ) in a document.
I currently have the calculator working fine in an HTML Widget, but I need the output (Payment Amount [%payment_amount%] to display in a text box/label.
I can’t seem to get the calculator to work outside of the Widget, and after inspecting the element, it looks like I can’t because that code is running within the widget.
Any help? Attached document.
accrue-test.zip (13.4 KB)
DBear
July 12, 2016, 3:06pm
2
Having a quick look at the github you could probably do this inside an element rather than a HTML widget
Add the Script code to your Head HTML and create a rectangle element with the class "calculator"
Note: not tested
klxwlls
(kw)
July 12, 2016, 3:21pm
3
Thanks for the tip, but it isn’t working when I place the script settings into the head. I have accrue loading as a resource, but when I give a rectangle a class of .calculator nothing happens.
DBear
July 12, 2016, 4:05pm
4
Another approach. I’m nice like that
accrue.js.hypetemplate.zip (17.5 KB)
and @klxwlls if you were needing to know how to put any of the results into other elements you can use the callback within the initial function like:
$(document).ready(function() {
$(".calculator").accrue({
callback: function ( elem, data ){
hypeDocument.getElementById("result").innerHTML = "<p>Payment Amount</p>$" + data["payment_amount_formatted"];
}
});
});
The data keys are as follows:
original_amount
payment_amount
payment_amount_formatted // rounded to 2 decimal places
num_payments
total_payments
total_payments_formatted
total_interest
total_interest_formatted
AND …
to get rid of the default response fields you can add the following:
$(document).ready(function(){
$(".calculator").accrue({
response_basic: '',
callback: function ( elem, data ){
hypeDocument.getElementById("result").innerHTML = "<p>Payment Amount</p>$" + data["payment_amount_formatted"];
}
});
});
OR
$(document).ready(function(){
$(".calculator").accrue({
response_basic: '<p><strong>Monthly Payment:</strong><br />$%payment_amount%</p>'
});
});
3 Likes