digitalwise
asked on
jquery cascading events
We have a rather complex process running
1. There is a grid at the top that allows the user to change a value in the grid and it will update ALL of the values in the 2nd grid that match the value in the top grid space. So if the original value was 1300 and they change it to 1500, all of the 1300 values change to 1500.
2. There is a percentage change field in the 2nd grid - we have original value, new value and percentage change. The new value field is what updates on the 1st grid change. I want the percentage change to update too but the second onchange doesn't seem to be triggering
This is the code that takes a change in the 1st grid and updates everything else in the 2nd grid. (Which works great)
This is the code that is supposed to fire after the 2nd one make the changes to .Grid2034. This does not.
The big thing is that the bottom grid is an output of all of the organizations (they fall somewhere on the grid) so I don't know how I would combine the two since i am looping through to set these functions. I am sure this is a completely stupid way of doing it so I am open to suggestions. There are about 1100 rows in the bottom grid.
This is what a row looks like from the 2nd grid - 1799 is the organizations id. the class="Grid2030" is where that institution falls in the grid.
1. There is a grid at the top that allows the user to change a value in the grid and it will update ALL of the values in the 2nd grid that match the value in the top grid space. So if the original value was 1300 and they change it to 1500, all of the 1300 values change to 1500.
2. There is a percentage change field in the 2nd grid - we have original value, new value and percentage change. The new value field is what updates on the 1st grid change. I want the percentage change to update too but the second onchange doesn't seem to be triggering
This is the code that takes a change in the 1st grid and updates everything else in the 2nd grid. (Which works great)
$('#Grid2030').change(function() {
var txtAmtval = $('#Grid2030').val();
//change txtInterest% value
$('.Grid2030').val(txtAmtval);
});This is the code that is supposed to fire after the 2nd one make the changes to .Grid2034. This does not.
$('#NewDues2627').blur(function() {
var txtNewDues = parseFloat($('#NewDues2627').val());
var txtOldDuesDues = parseFloat($('#OldDues2627').val());
//change txtInterest% value
$('#PChange2627').val(((txtNewDues - txtOldDuesDues) / txtOldDuesDues * 100).toFixed(2));
});The big thing is that the bottom grid is an output of all of the organizations (they fall somewhere on the grid) so I don't know how I would combine the two since i am looping through to set these functions. I am sure this is a completely stupid way of doing it so I am open to suggestions. There are about 1100 rows in the bottom grid.
This is what a row looks like from the 2nd grid - 1799 is the organizations id. the class="Grid2030" is where that institution falls in the grid.
<TR><TD valign="top">297</TD><TD valign="top" bgcolor="#CCCCCC">Institution</TD><TD><input type="text" size="15" value="610.00 " id="OldDues1799" readonly></TD><TD bgcolor="#CCCCCC"><input type="text" size="15" value="520.00" class="Grid2030" id="NewDues1799"></TD><TD><input type="text" size="15" value="-14.75 " id="PChange1799" readonly></TD></TR>ASKER
This is the whole top grid
Here are the first few lines of the of the bottom grid
<TABLE border=0 cellpadding="2" cellspacing="1">
<TR class="special">
<TD class="special"><strong>0-999</strong></TD><TD class="special"><input type="text" id="Grid2029" value=" 495" size="15"></TD>
<TD class="special"><input type="text" id="Grid2030" value=" 520" size="15"></TD>
<TD class="special"><input type="text" id="Grid2031" value=" 650" size="15"></TD>
<TD class="special"><input type="text" id="Grid2032" value=" 710" size="15"></TD>
<TD class="special"><input type="text" id="Grid2033" value=" 800" size="15"></TD>
<TD class="special"><input type="text" id="Grid2034" value=" 910" size="15"></TD>
<TD class="special"><input type="text" id="Grid2035" value="1060" size="15"></TD>
<TD class="special"><input type="text" id="Grid2036" value="1150" size="15"></TD>
<TD class="special"><input type="text" id="Grid2037" value="1300" size="15"></TD>
<TD class="special"><input type="text" id="Grid2038" value="1500" size="15"></TD>
</TR>
<TR class="special">
<TD class="special"><strong>1,000-1,999</strong></TD><TD class="special"><input type="text" id="Grid2129" value=" 535" size="15"></TD>
<TD class="special"><input type="text" id="Grid2130" value=" 610" size="15"></TD>
<TD class="special"><input type="text" id="Grid2131" value=" 700" size="15"></TD>
<TD class="special"><input type="text" id="Grid2132" value=" 810" size="15"></TD>
<TD class="special"><input type="text" id="Grid2133" value=" 900" size="15"></TD>
<TD class="special"><input type="text" id="Grid2134" value="1061" size="15"></TD>
<TD class="special"><input type="text" id="Grid2135" value="1170" size="15"></TD>
<TD class="special"><input type="text" id="Grid2136" value="1275" size="15"></TD>
<TD class="special"><input type="text" id="Grid2137" value="1420" size="15"></TD>
<TD class="special"><input type="text" id="Grid2138" value="1625" size="15"></TD>
</TR>
<TR class="special">
<TD class="special"><strong>2,000-4,999</strong></TD><TD class="special"><input type="text" id="Grid2229" value=" 685" size="15"></TD>
<TD class="special"><input type="text" id="Grid2230" value=" 840" size="15"></TD>
<TD class="special"><input type="text" id="Grid2231" value=" 900" size="15"></TD>
<TD class="special"><input type="text" id="Grid2232" value="1065" size="15"></TD>
<TD class="special"><input type="text" id="Grid2233" value="1100" size="15"></TD>
<TD class="special"><input type="text" id="Grid2234" value="1190" size="15"></TD>
<TD class="special"><input type="text" id="Grid2235" value="1350" size="15"></TD>
<TD class="special"><input type="text" id="Grid2236" value="1400" size="15"></TD>
<TD class="special"><input type="text" id="Grid2237" value="1595" size="15"></TD>
<TD class="special"><input type="text" id="Grid2238" value="1750" size="15"></TD>
</TR>
<TR class="special">
<TD class="special"><strong>5,000-11,999</strong></TD><TD class="special"><input type="text" id="Grid2329" value=" 840" size="15"></TD>
<TD class="special"><input type="text" id="Grid2330" value="1070" size="15"></TD>
<TD class="special"><input type="text" id="Grid2331" value="1180" size="15"></TD>
<TD class="special"><input type="text" id="Grid2332" value="1290" size="15"></TD>
<TD class="special"><input type="text" id="Grid2333" value="1300" size="15"></TD>
<TD class="special"><input type="text" id="Grid2334" value="1400" size="15"></TD>
<TD class="special"><input type="text" id="Grid2335" value="1500" size="15"></TD>
<TD class="special"><input type="text" id="Grid2336" value="1590" size="15"></TD>
<TD class="special"><input type="text" id="Grid2337" value="1725" size="15"></TD>
<TD class="special"><input type="text" id="Grid2338" value="1905" size="15"></TD>
</TR>
<TR class="special">
<TD class="special"><strong>12,000-19,999</strong></TD><TD class="special"><input type="text" id="Grid2429" value="1135" size="15"></TD>
<TD class="special"><input type="text" id="Grid2430" value="1300" size="15"></TD>
<TD class="special"><input type="text" id="Grid2431" value="1400" size="15"></TD>
<TD class="special"><input type="text" id="Grid2432" value="1475" size="15"></TD>
<TD class="special"><input type="text" id="Grid2433" value="1560" size="15"></TD>
<TD class="special"><input type="text" id="Grid2434" value="1625" size="15"></TD>
<TD class="special"><input type="text" id="Grid2435" value="1705" size="15"></TD>
<TD class="special"><input type="text" id="Grid2436" value="1880" size="15"></TD>
<TD class="special"><input type="text" id="Grid2437" value="1950" size="15"></TD>
<TD class="special"><input type="text" id="Grid2438" value="2100" size="15"></TD>
</TR>
<TR class="special">
<TD class="special"><strong>20,000+</strong></TD><TD class="special"><input type="text" id="Grid2529" value="1305" size="15"></TD>
<TD class="special"><input type="text" id="Grid2530" value="1510" size="15"></TD>
<TD class="special"><input type="text" id="Grid2531" value="1560" size="15"></TD>
<TD class="special"><input type="text" id="Grid2532" value="1600" size="15"></TD>
<TD class="special"><input type="text" id="Grid2533" value="1685" size="15"></TD>
<TD class="special"><input type="text" id="Grid2534" value="1790" size="15"></TD>
<TD class="special"><input type="text" id="Grid2535" value="1900" size="15"></TD>
<TD class="special"><input type="text" id="Grid2536" value="2050" size="15"></TD>
<TD class="special"><input type="text" id="Grid2537" value="2200" size="15"></TD>
<TD class="special"><input type="text" id="Grid2538" value="2460" size="15"></TD>
</TR>
</table>Here are the first few lines of the of the bottom grid
<TR><TD valign="top">1</TD><TD valign="top" bgcolor="#CCCCCC">Company Name</TD><TD><input type="text" size="15" value="1030.00" id="OldDues919398" readonly></TD><TD bgcolor="#CCCCCC"><input type="text" size="15" value="$1,190.00" class="Grid2234" id="NewDues919398"></TD><TD><input type="text" size="15" value="15.53 " id="PChange919398" readonly class="docalc"></TD></TR>
<TR><TD valign="top">2</TD><TD valign="top" bgcolor="#CCCCCC">Company Name</TD><TD><input type="text" size="15" value="1005.00" id="OldDues3537" readonly></TD><TD bgcolor="#CCCCCC"><input type="text" size="15" value="$1,190.00" class="Grid2234" id="NewDues3537"></TD><TD><input type="text" size="15" value="18.41 " id="PChange3537" readonly class="docalc"></TD></TR>
<TR><TD valign="top">3</TD><TD valign="top" bgcolor="#CCCCCC">Company Name</TD><TD><input type="text" size="15" value="570.00 " id="OldDues3228" readonly></TD><TD bgcolor="#CCCCCC"><input type="text" size="15" value="$495.00" class="Grid2029" id="NewDues3228"></TD><TD><input type="text" size="15" value="-13.16 " id="PChange3228" readonly class="docalc"></TD></TR>
<TR><TD valign="top">5</TD><TD valign="top" bgcolor="#CCCCCC">Company Name</TD><TD><input type="text" size="15" value="1030.00" id="OldDues7582" readonly></TD><TD bgcolor="#CCCCCC"><input type="text" size="15" value="$1,065.00" class="Grid2232" id="NewDues7582"></TD><TD><input type="text" size="15" value="3.40 " id="PChange7582" readonly class="docalc"></TD></TR>ASKER
And yes - I do have one for each piece because I didn't know how to relate the line items otherwise which just may be a failing of my imagination. The percent change field does update if I manually change the new value but not if the system changes the field - so the code works - it just doesn't trigger when I need it to!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you! this is perfect and not so clunky!
could you perhaps share a little bit more of your two grids? E.g. each containing 5 rows? Or provide/build a small demo at jsFiddle or jsBin.
Which jQuery version? Do you have for each element an own change Event / function?
Thanks.
Rainer