Running a javascript on repeater items from a button or focus?

     <script type="text/javascript" language="javascript">
         function calc() {
             var sum = 0;
             ('.cssSalary').each(function () {
                 sum = sum + parseInt((this).html());
             });
             ('.cssSum').html(sum);
         }
        </script>

Select allOpen in new window

			<asp:Repeater ID="Repeater4" runat="server">
			<ItemTemplate>
			<table>                    
		        <tr>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbTotalPieces" runat="server" CssClass="cssSum"></asp:TextBox></td>
                        </tr>
		        </table>
		        </ItemTemplate>
			</asp:Repeater>
			<BR>
			<button type="button" onclick='calc()'>Calc</button>

Select allOpen in new window

Returns...

Object doesn't support property or method 'each'


I've also tried putting the onclick='calc()' in the TD like in the example...same result.

I think its missing the $

$('.cssSalary').each(function () {
                 sum = sum + parseInt((this).html());

I'm getting '$' is not defined when I leave them in

Are you using JQuery?

Yes, I had my ref to jquery I copied from the page and mine is in a folder called scripts. I changed that and it's running without the errors, but not appearing to do anything.

Use F12 developer tools to debug the javascript to see if it is being called and what's it doing.

Ok, It's being called. The value of sum is NaN but I filled out all of the fields with numbers.


Repeater items:

                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Cssclass="cssSum"></asp:TextBox></td>

Select allOpen in new window

Trigger:

<button type="button" onclick='calc()'>Click Me!</button>

Select allOpen in new window

Jquery:

        <script type="text/javascript" language="javascript">

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                    sum = sum + parseInt($(this).html());
                });
                $('.cssSum').html(sum);
            }

        </script>

Select allOpen in new window

How many times is each function running? Is there any other control using cssSalary class?

It runs through once for each item in the repeater times the number of times cssSalary is listed. In the example I'm using, there are six items and the function is run 12times. There are no other instances of cssSalary in the code aside from those listed above.

Can you give either your complete markup or page source?

Ok, I'm just starting over here. Maybe you can help. Here's my current query...

            function calc() {
                var sum = 0;
                alert(sum);
            }

Select allOpen in new window

I've got this firing, and working properly. As expected, it returns the value of zero.

So I added this to the code:

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                   sum = parseInt($(this).html());
                });
                alert(sum);
            }

Select allOpen in new window

Here is the textbox in the repeater:
<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>

The alert still fires, but returns NaN

Just for grins, I tried this:

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                   sum = $(this).html();
                });
                alert(sum);
            }

Select allOpen in new window

Which just returned a blank alert. How would I just cycle through each repeater element and display the value in the alert? Maybe if I can figure that out, I can wrap this up.

Ok made some progress...

Here's my texboxes in my repeater:

<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>
<asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssUnits"></asp:TextBox>
<asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Height="19px" CssClass="cssTotal"></asp:TextBox>

Select allOpen in new window

My button that fires the jQuery:

<input type="button" id="filter" name="filter" value="Test" onclick="calc()" />

Select allOpen in new window

And my current jQuery:

        <script type="text/javascript" language="javascript">
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = $("input[id$=tbPLAPUnits]").val();
                });
                $('.cssUnits').each(function () {
                    sum2 = $("input[id$=tbPLUnits]").val();
                });
                sum3 = parseInt(sum) + parseInt(sum2)
                alert(sum3);
            }
        </script>

Select allOpen in new window

This will fire an alert with the total of the two textboxes. Works great. So now I need to figure out how to assign the value to the third textbox in the repeater instead of displaying it in an alert. Also I assume this will only work for 1 line in the repeater. Can I just do another "each" to make it work for every line?

Ok, a bit more progress...

I removed the cssClass from the 2nd 2 textboxes:

<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>
<asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" Height="19px"></asp:TextBox>
<asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Height="19px"></asp:TextBox>

Select allOpen in new window

Then modified the jQuery like this:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = $(this).val();
                    sum2 = $(this).val();
                    sum3 = parseInt(sum) + parseInt(sum2)
                    alert(sum3);
                });
            }
        </script>

Select allOpen in new window

This fires of the alert with the values I need. No to just figure out how to assign those values to the 3rd textbox.

Ok that actually wasnt working. I was using the same numbers in each line and it was just adding them from one texbox to itself. So back to the original code:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = sum + parseInt($(this).val());
                });
                alert(sum)
            }
        </script>

Select allOpen in new window

This is giving me the total of all textboxes (cssSalary) in all the rows in the repeater. How do I get the value for each row?

All three textboxes are in a table row. I assigned the "class" value of the row to "myRow" then modifed the jQuery like this:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.myRow').each(function () {
                    sum = parseInt($('.cssSalary').val());
                    sum2 = parseInt($('.cssSalary2').val());
                    sum3 = sum + sum2
                    alert(sum3)
                });
            }
        </script>

Select allOpen in new window

Interestingly, it knows to iterate through as many times as there are rows, but it only calculates the values for the textboxes in the first row. So in this scenario there are 3 rows in the table in the repeater, I get the same value in an alert 3 times.

Got it. Added this

$('#popup_Repeater4_ctl0' + i + '_tbTotalPieces').val(total)

Select allOpen in new window

Glad you got it working :-)

Answered myself