Getting Javascript inside HTMLWidget to display output in Label

Using JavaScript with Hype
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)

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

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.

4

Another approach. I’m nice like that :slight_smile:

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
5

Wow sir! Thanks a ton!