CODEWITHSUNDEEP
javascriptjqueryonchange
DonMarco
DonMarco

Reputation: 415

onChange triggers only once in a while

i have the following problem: I have a table with 2 input elements. If one of them bigger than the other, the whole row is supposed to be colored accordingly to the comparison. I trigger this with an onchange event and the first time while loading the site. The procedures work fine, but the onchange event only get triggered in 1 of 4 changes.

The table statement is the following:

<div class="grid">
 <table id="table" class="tableRegion w100">
  <thead style="text-align:left">
   <tr>
    <fmt:bundle basename="res/web/ec_resources">
     <td class="tableHeader">
    ...
     </td> ...
    </fmt:bundle>
   </tr>
  </thead>      
  <tbody>
   <c:set var="i" value="0"/>
   <c:forEach var="participation" items="${someForm.list}">
     <tr id="participationRow${i}">

And in here the code for the table > tr > td:

<td class="right bottom nowrap">
 <div>
  <c:out value="${someForm.event.currency.code}"/>
  <fmt:formatNumber maxFractionDigits="2" minFractionDigits="2" var="ovFee" value="${overallFee}" />
  <c:if test="${someForm.array[i].feeDebit != 0.0}">
   <spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" />
  </c:if><c:if test="${someForm.array[i].feeDebit == 0.0}">
   <spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" value="${ovFee}"/>
  </c:if>
 </div>
</td>

<td class="right bottom nowrap">
 <div class="padT5"><c:out value="${someForm.event.currency.code}"/> <spring:input class="right paid" path="array[${i}].feePaid" maxlength="7" size="6" onchange="isPaid(${i});"/></div>
</td>

The skript being called is the following:

$(document).ready(function(){
    $('#table > tbody > tr').each(function(i) {
        var paid = parseFloat($(this).find('input.paid').val());
        var debit = parseFloat($(this).find('input.debit').val());
        if (paid == debit)
            $('#participationRow'+i).addClass("green");
        else if (paid > debit)
            $('#participationRow'+i).addClass("yellow");
        }
    );
});

function isPaid(i){
    var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
    var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
    if (paid == debit)
        $('#participationRow'+i).addClass("green");
    else if (paid > debit)
        $('#participationRow'+i).addClass("yellow");

}

What is the reason for the event being triggered just once in a while? I cross-checked with jQuery and onclick. They all get only triggered once in a while. No matter if I leave by clicking away or tabbing away.

Upvotes: 0

Views: 3338

Answers (3)

DonMarco
DonMarco

Reputation: 415

Okay... looking a while and with the help of @kabaros und @Flater I found the following which worked:

$(document).ready(function(){
 $('input.paid').change(function(){
  var i = $(this).closest('tr')[0].sectionRowIndex;
  isPaid(i);
 });

The solution was the $('input.paid') which got triggered, rather than $('input'). And counting the row was not that easy as well, but the above code counts the rows right. Unfortunately the onchange in the input-field only triggers once in a while!

Upvotes: 0

kabaros
kabaros

Reputation: 5173

    function highlightIfPaid(i){
        var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
        var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
        if (paid == debit)
            $('#participationRow'+i).addClass("green");
        else if (paid > debit)
            $('#participationRow'+i).addClass("yellow");
    }

    $(document).ready(function(){
        //just use jquery for binding to change event,
        //my guess is that Spring doesn't have a value for i at the point and jquery is not loaded by then so $ is undefined
        $('input.debit').change(function(){
            //you need to get the index i based on your table structure
            //I assumed this is just the index of the row
            //I get this method from this other post http://stackoverflow.com/questions/1620391/find-table-row-index-using-jquery
            var i = $(this).closest('tr').prevAll().length;
            highlightIfPaid(i);
        });

//Dry: highlight your rows on first load
$('#table > tbody > tr').each(highlightIfPaid);
    });

Upvotes: 1

Flater
Flater

Reputation: 13783

Your code lacks any definition of a trigger when this is supposed to run.

The first part (the .each() block) is only executed on $(document).ready();, which means it is executed once per page load (right after the document has finished loading.)

The isPaid() function is nothing more than a function, I don't see where it is being called as it is not present in the current code snippet.

Your code seems OK by itself, but it just lacks any form of trigger.

You would expect something like:

$("input").change(function() {

    var the_row = $(this).parent().parent(); //finds the <tr> it belongs to.
    var i = the_row.attr("id").replace("participationRow","");

    isPaid(i);
});

There are ways to improve on this, but this is the vital key you're missing in your code.

Upvotes: 1

Related Questions