CODEWITHSUNDEEP
javascriptjqueryhtml
thepersonwho
thepersonwho

Reputation: 85

jQuery .text() method repeating itself. How to make it run only once?

<tr class="<%= payment_paid(f.paid)%>" id="paidrow">
     <td>
       <% if !f.paid %>
       <%= check_box_tag "pin_number[]", f.id, checked= !f.paid? %>
       <%end%>
     </td>

     <td class="pin"><%= f.year %></td>
     <td class="val"><%= f.quarter %></td>
     <td align="right" class="price"><%= number_to_currency(f.amount, unit: "", precision: 2)%></td>


      <script>
        mergecommonrows();
        setTimeout(addpaidrows,1000);
      </script>
  </tr>

function addpaidrows(){
$(document).ready(function(){
    var table = $("#property_dtl_table_body");
    var rows = table.find("tr#paidrow.payment_paid");
    var first = parseFloat(rows.find('.price').text());
    sum = first;
    var startIndex = 0;
    var lastIndex = 0;
    var startText = rows.find('.price').text();

    var colsLength = 4;
    var removeLater = new Array();

    for(var i=3; i<colsLength; i++){
      for(var j=1; j<rows.length; j++){
        var cRow =$(rows[j]);
        var cCol = $(cRow.find('.price'));
        var currentText = cCol.text();
        var currentNumber = parseFloat(cRow.find('.price').text());
        cCol.css("background","#c8fcc1");
        console.log(cCol);
        removeLater.push(cCol);
        lastIndex=j;
        var spanLength = lastIndex-startIndex;
        if(spanLength>=1){
          console.log(lastIndex+" - "+startIndex)
          //console.log($($(rows[startIndex]).find('.price')))
          $($(rows[startIndex]).find('.price')[i]).attr("rowspan",spanLength+1);
        }
        lastIndex = j;
        startIndex = j;
        startText = currentText;

      var spanLength = lastIndex-startIndex;
        if(spanLength>=1){
            console.log(lastIndex+" - "+startIndex)
            //console.log($($(rows[startIndex]).find("td")[i]))
            $($(rows[startIndex]).find('.price')[i]).attr("rowspan",spanLength+1);
        }
      console.log("---"); 
     sum = sum + currentNumber; 

      }
    }


    console.log(sum);
    var frist = rows.find('.price').text();




    for(var i in removeLater){
          $(removeLater[i]).remove();
      }    

      $('tr#paidrow.payment_paid td.price').text(sum.toFixed(2))    
});
}

I'm making a program where after the Javascript file does its thing, the text in the upper right hand corner of the table will be replaced with the 'sum.toFixed(2)' variable (in this case, 67.97). It works, but the problem is that the .text() method repeats itself, causing the result to become NaN, since the other numbers required to make the sum.toFixed(2) are erased after it has been added to the sum. And based on the console below, it seems that that is the cause of the problem.

enter image description here

enter image description here

Upvotes: 1

Views: 276

Answers (2)

thepersonwho
thepersonwho

Reputation: 85

I solved the problem. I added an if-else statement that checks if the sum is NaN (not a number) or not. If it is NaN, no output will be shown. But if it isn't, the output will show.

      if (sum != sum){

      }
      else {
         rows.find('.price').first().text(sum.toFixed(2));
      }

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074178

Unfortunately, text is slightly unusual as compared to other jQuery methods. From the documentation:

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

Almost every other accessor function in jQuery accesses only the first of the matched elements, but text combines all of their text.

If you want the text of only the first matched item, you have to do that on purpose:

var first = parseFloat(rows.find('.price').first().text());
// ---------------------------------------^^^^^^^^

Upvotes: 1

Related Questions