3

I have a row that displays numeric values from an apex:repeat. I'm looking for a way to loop through and add the values to display the total. I'm sure this can be done with jQuery and I feel like I'm on the right path but would appreciate some guidance

Visualforce:

<table>
    <tr>    
        <apex:repeat value="{!numericValues}" var="q" id="total">
            <td><apex:outputField value="{!q.values}"/></td>
        </apex:repeat>
    </tr>
</table>

<div id='displayForTotal'></div>

jQuery:

$(document).ready(function(){
    function totalValue(){
        var a = jQuery('#total');
        var total = 0;
        for(i=0; i<a.length; i++){
            total += a[i];
        }
        return total;
        $('#displayForTotal').val(total);
    }
})
  • 2
    Any reason why you can't do this in your Visualforce page's Controller/ Controller Extension? – Derek F May 9 '16 at 19:17
6

You've got a few problems here.

First, "total" isn't the ID of the repeat element in the traditional HTML sense. I'm pretty sure it doesn't even get rendered into the final HTML, so JavaScript can't see it. Normally you'd use id values on Visualforce elements to reRender it, not do something in JavaScript to it.

Second, even if the repeat did have an id, the sub-elements you've designed won't share that id (they won't even have an id, based on your code)... even if you could query the repeat element directly, all'd you'd get is a single element that contains the node the repeat is represented by.

Third, you're putting raw numbers into HTML elements, at which point they become just plain text, which means you have to extract them by parsing the values using a combination of parseInt/parseFloat and jQuery.text. Without doing that, you'll just end up with string concatenation (for example, 12 + 34 becomes 1234, not 46).

Fourth, you're actually just returning a function that contains a function, so the totaling part won't actually be run anyways. Nested functions are usually used to be called inside the function they're contained in, so there's no easy way to get at them from outside the function, which you'd have to do to even call it.

Fifth, you're "returning" before you output your results. There's no need to return, and doing so would cause your output line to not get called. You should only "return" when you need to exit a function early or return a value, and you should always remember that when a "return" happens, no further code beyond that point in the function will run.

Perhaps the easiest way to get what you're looking for might start like this:

<table>
    <tr>
        <apex:repeat value="{!numericValues}" var="q" id="total">
            <td class="numericValue">{!q.values}</td>
        </apex:repeat>
    </tr>
</table>
<div id='displayForTotal'></div>

And...

$(document).ready(function(){
    var total = 0;
    $('.numericValue').each(
        function() {
            total += parseFloat($(this).text());
        });
        $('#displayForTotal').val(total);
    })

All of that said, you could always render the value in pure Visualforce using apex:variable. Other questions on this forum address how to use that feature, if you decide you want to try that route. For example, on this answer I outline some code that sums a value and outputs it.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.