Jquery returns old value after append

Question

I am submiting a form which adds a new item to a table as well as updates a total value. The form is in a jquery dialog and below is the buttons option specified.

                buttons: {
                    Save: function() {
                        $.post(mysaveurl , $("#fee_form").serialize(),
                            function(data) { 
                                var $mydata= $(data);
                                var newremovefeeurl = "${removefeeNoIds}" + $mydata.find("td:last").attr("id");
                                $mydata.find("td:last").attr("id", newremovefeeurl);
                                $( "#totalfees" ).before($mydata);  
                                enablespinner();
                                var mynewtotal = parseFloat($("#total").text()) + parseFloat($mydata.find(".cost").text());
        $("#total").empty().html(mynewtotal).toFixed(2);

       alert($("#total").text());           
       //var mynewtotalurl = $("#total").attr("updateurl");
       //$.post(mynewtotalurl , { newtotal: $("#total").text() } );
                            }                           
                        );
                        $( this ).remove();
                    }

The post simply adds a new table row to an existing table and updates the value stored inside the element with ID "total". No problem so far.

After reseting the "total" value with mynewtotal in the code. I the proceed to alert the contents of "total" which should be the new updated value. Insted, I get the old value even after it was updated.

I want to do another post as indicated by the commented code above.

please advise.

Answer 1

It looks like:

$("#total").empty().html(mynewtotal).toFixed(2);

should be

$("#total").empty().html(mynewtotal.toFixed(2));

so that you're operating on the total, not the return of the jQuery function.