1

I have some values that I am inserting using jquery .load. I want to add those values together and display the result in a div (or span or whatever). Here is the code I am using to insert the values (numbers but just as plain text):

Above the closing body tag: I have:

$( "#result1" ).load( "mypage.php?f=15 .threadcount" );
$( "#result2" ).load( "mypage.php?f=16 .threadcount" );
$( "#result3" ).load( "mypage.php?f=25 .threadcount" );
$( "#result4" ).load( "mypage.php?f=18 .threadcount" );

And displaying those values further up the page using:

<div id="result1"></div>, <div id="result2"></div>... etc.

To add them together and show the total I've tried using this answer to "Add values together using jquery"

But this gives me "$NaN" as my total value. I'm assuming because it's loading that value at the same time as doing the sum? Or it doesn't recognise that bit of text coming in frm .load as a number?

I've also tried to alter code such as used in this answer to "Dynamically adding the sum of field in Jquery" answer, which adds values from form inputs as they're typed, but I'm not getting anywhere with that either.

Many thanks for any advice you can give.

Community
  • 1
  • 1
Jo_pinkish
  • 111
  • 2

2 Answers2

1

All those .load() operations are asynchronous. That means they complete sometime in the future. You will have to wait until they are all done until you can correctly calculate your sum. I will add some example code for how you could do that.

var cnt = 0;
function done() {
    --cnt;
    if (cnt <= 0) {
        // all requests done now
        // put code here to calculate your sum
    }
}

cnt = 4;
$( "#result1" ).load( "mypage.php?f=15 .threadcount" , done);
$( "#result2" ).load( "mypage.php?f=16 .threadcount" , done);
$( "#result3" ).load( "mypage.php?f=25 .threadcount" , done);
$( "#result4" ).load( "mypage.php?f=18 .threadcount" , done);

Or, a version using jQuery promises:

function loadResult(target, query) {
    var def = $.Deferred();
    $("#result" + target).load("mypage.php?f=" + query + " .threadcount", function() {
        def.resolve();
    });
    return def.promise();
}

$.when(loadResult(1,15), loadResult(2,16), loadResult(3,25), loadResult(4,18)).then(function() {
    // calculate the result here
});
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks for replying. I've tried both methods but my skills in this area are limited! I think I'm getting there with your first suggestion but again I am getting $NaN where the total sum should be. Here is the code I have used (yours plus my attempt to calculate the sum) – Jo_pinkish Nov 08 '14 at 16:00
  • (Oops, forgot enter key sends the comment) `var cnt = 0; function done() { --cnt; if (cnt <= 0) { var sum = 0; $('#result1,#result2,#result3,#result4').each(function(){ sum += parseFloat($(this).text().substr(1)); }); $('#total_result').text('$' + Math.round(sum * 100) / 100); } } cnt = 4; $( "#result1" ).load( "mypage.php?f=15 .threadcount" , done); $( "#result2" ).load( "mypage.php?f=16 .threadcount" , done); $( "#result3" ).load( "mypage.php?f=25 .threadcount" , done); $( "#result4" ).load( "mypage.php?f=18 .threadcount" , done);` – Jo_pinkish Nov 08 '14 at 16:01
  • Sorry, don't know what I'm doing wrong here trying to enter code! used the backticks but it hasn't displayed nicely. Still getting the hang of this system. – Jo_pinkish Nov 08 '14 at 16:03
  • @Jo_pinkish - you can't put multi-line code in comments. It simply isn't readable. If you need to share some multi-line code, you can use the edit link to add it to the end of your answer (properly formatted as code with an explanation for why you're adding it) and then add a comment here that is directed at the individual you want to see it that points them to that edit so they will notice it. – jfriend00 Nov 08 '14 at 16:37
  • @Jo_pinkish - If you're getting `NaN`, then obviously, you aren't finding or parsing the number correctly when doing the sum. Some basic debugging is in order. Use `console.log()` to examine intermediate values to see what intermediate values you are getting to try to figure out what's happening. – jfriend00 Nov 08 '14 at 16:41
0

You can use deferred objects to accomplish that, as follows:

var 
d1 = $.get( "mypage.php?f=15", function(data) { $("#result1").html( $(data).find(".threadcount") ); }),
d2 = $.get( "mypage.php?f=16", function(data) { $("#result2").html( $(data).find(".threadcount") ); }),
d3 = $.get( "mypage.php?f=25", function(data) { $("#result3").html( $(data).find(".threadcount") ); }),
d4 = $.get( "mypage.php?f=18", function(data) { $("#result4").html( $(data).find(".threadcount") ); });

$.when( d1, d2, d3, d4 ).then( function() {
    var sum = +$('#result1').text() + $('#result2').text() + $('#result3').text() + $('#result4').text();
});
PeterKA
  • 24,158
  • 5
  • 26
  • 48