Formatting not working while writing the response to DOM through JS Remoting

Question

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}" />
                </apex:outputText>

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

2537789.35

Visualforce page code snippet:

<apex:pageBlock id="OpenInvoices" title="Open Invoices" rendered="{!displayOpenInvoices}" >
    <div id="invTable" style="display:none">
        <table width="100%">
            <tr>
                <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}" />
                    </apex:outputText>

and the javascript remoting script is given below.

        </apex:pageBlock>
    </div>
    </apex:form> 
<script type="text/javascript">
    function getRemoteInvoicesData(CustNo) {
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.NewOpenDocumentsController.TestOpenInvoices}',
                CustNo,
            function(result, event){
            //alert(result);
            //alert(event.status);
                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;
                    //alert(result.length);
                    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>'; 
                    j$('#loading-image').hide();
                    j$('#invTable').show();

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

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

$(document).ready(function() {
        var j$ = jQuery.noConflict();            
        j$('#example').dataTable({                
            sPaginationType: "full_numbers"            
            });
            }); 
  </script>      
 </body>

</apex:page>

score 1 · Answer 1 · answered Jul 09 '14 at 22:03

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.

answered Jul 09 '14 at 22:03

Ralph Callaway

24,529
17
112
190

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 '14 at 07: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. – Ralph Callaway Jul 10 '14 at 23:59
ps the viewstate is a real pain, this answer discusses how to go about reducing it. – Ralph Callaway Jul 11 '14 at 00:08

Formatting not working while writing the response to DOM through JS Remoting

1 Answers1