I tried to make a callout to SAP webservice through Javascript Remoting and writing the response to the visualforce page DOM using the same javascript. Now, i have an issue that the amount field which i am writing to DOM ignored the formatting option for that. Any suggestions please.

I am writing "GrandTotal" to this apex tag and it ignores to apply the currency format.

                <apex:outputText id="GrandTotal" value="{0,number,currency}">
                    <apex:param value="{!InvTotalAmount}" />

and the output is just a plain without $ currency symbol and thousand separator.


Visualforce page code snippet:

<apex:pageBlock id="OpenInvoices" title="Open Invoices" rendered="{!displayOpenInvoices}" >
    <div id="invTable" style="display:none">
        <table width="100%">
                <td width="15%"><b>Number of Open Invoices:</b></td>
                <td id="textInvNumOf" width="5%" align="left">{!InvNumOf}</td>     
                <td width="8%"><b>Total Amount:</b></td>
                <td width="15%" align="left">
                    <apex:outputText id="GrandTotal" value="{0,number,currency}">
                        <apex:param value="{!InvTotalAmount}" />

and the javascript remoting script is given below.

<script type="text/javascript">
    function getRemoteInvoicesData(CustNo) {
            function(result, event){
                if (event.status) {
                    // Get DOM IDs for HTML and Visualforce elements like this
                    var strHeader = '<table id="example" class="dataTable" cellspacing="0" width="100%">';
                    strHeader +='<thead><tr><th>Invoice Number</th><th>Invoice Date</th><th>Payer</th><th>Payer Name</th><th>Amount</th><th>Currency</th><th>Payment Due Date</th><th>Overdue Days</th></tr></thead>';
                    var strRowData = '<tbody>';
                    var strFullData = '';
                    var GrandAmt = 0.0;
                    var i = 0;
                    for (; i < result.length; i++) {
                            strRowData += '<tr><td>'+result[0,i].InvoiceNumber+'</td>';
                            strRowData += '<td>'+result[1,i].InvoiceDateCSV+'</td>';
                            strRowData += '<td>'+result[2,i].Payer+'</td>';
                            strRowData += '<td>'+result[3,i].PayerName+'</td>';
                            strRowData += '<td>'+result[4,i].Amount+'</td>';
                            GrandAmt += result[4,i].Amount;
                            strRowData += '<td>'+result[5,i].Curren+'</td>';
                            strRowData += '<td>'+result[6,i].PaymentDueDateCSV+'</td>';
                            strRowData += '<td>'+result[7,i].NoDueDays+'</td></tr>';

                    strFullData = strHeader+strRowData+'</tbody></thead></table>'; 

                    document.getElementById('{!$Component.myForm.OpenInvoices.GrandTotal}').innerHTML = '$'+GrandAmt.toFixed(2);
                    document.getElementById('textInvNumOf').innerHTML = i;
                    document.getElementById('AllOpenInv').innerHTML = strFullData;

                    sPaginationType: "full_numbers"            
                } else if (event.type === 'exception') {
                    document.getElementById("AllOpenInv").innerHTML = 
                        event.message + "<br/>\n<pre>" + event.where + "</pre>";
                } else {
                    document.getElementById("AllOpenInv").innerHTML = event.message;
            {escape: false, timeout: 120000}
        return true;

$(document).ready(function() {
        var j$ = jQuery.noConflict();            
            sPaginationType: "full_numbers"            


1 Answer 1


The formatting of a visualforce page is only applied when the page is rendered server side, not on the browser. So when you manipulate the DOM directly it's not going to do anything to get it back into the format string.

You'll need to either do the formatting yourself, or ditch remoting and do the call to TestOpenInvoices in your controller.

Honestly, it's a little strange to have the page itself do this. JS Remoting is usually more useful for when your using angular or some other UI framework that just needs a data back-end, or for AJAX calls that you'll handle all the UI work for. Your use case is just doing the initial data load, which is probably cleaner to do server side (at least from an MVC perspective).

If you're new to Visualforce you might check out their workbook which will give you an intro into controller's and data bindings.

  • Thanks @Ralph. Because of performance issue i used javascripting. apex: visualforce components are utilizing the server resources heavily and i often hit the governor limits (heap size, apex cpu time, viewstate size, etc,) and then i switched over to JS remoting just for this usecase.
    – Bforce
    Jul 10, 2014 at 7:10
  • Makes sense given the repeating elements although there are strategies for addressing each of those. In any case, if you take you're route you're taking over responsibility for formatting and will need to handle that in your js. Jul 10, 2014 at 23:59
  • ps the viewstate is a real pain, this answer discusses how to go about reducing it. Jul 11, 2014 at 0:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .