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)

$('#Grid2030').change(function() {
       var txtAmtval = $('#Grid2030').val();
  //change txtInterest% value
  $('.Grid2030').val(txtAmtval);
    });

Open in new window


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));
    });

Open in new window


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>

Open in new window

digitalwiseAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
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
0
digitalwiseAuthor Commented:
This is the whole top 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>

Open in new window


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>

Open in new window

0
digitalwiseAuthor Commented:
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!
0
Rainer JeschorCommented:
Hi,
thanks for providing the sample data.

The following generic functions should do the trick for all of your first and second grid fields:
$(document).ready(function () {
    $('input','#masterGridTable').change(function() {
		var txtAmtval = $(this).val();
        var txtClassId = "." + $(this).attr("id");
  		//change txtInterest% value
  		$(txtClassId).val(txtAmtval).change();
    });

    $("input[id^='NewDues']").change(function() {
        var currentId = $(this).attr("id").replace("NewDues","");
        var oldId = "#OldDues" + currentId;
        var changeId = "#PChange" + currentId;
       	var txtNewDues = parseFloat($(this).val());
	   	var txtOldDuesDues = parseFloat($(oldId).val());
  		//change txtInterest% value
  		$(changeId).val(((txtNewDues - txtOldDuesDues) / txtOldDuesDues * 100).toFixed(2));
    });
});

Open in new window

without the need to declare the change function for each field in code.

LIve sample:
http://jsfiddle.net/EE_RainerJ/44zkfqbk/

HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
digitalwiseAuthor Commented:
Thank you!     this is perfect and not so clunky!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.