Save star rating in a gridview row using jquery ajax

Question

I have a gridview with each row containing star rating, When the user clicks save on a row it should update the rating value to the database using ajax, i am using the code from http://rateit.codeplex.com to implement rating. so i need to use a div in each row with the given class as below

            <asp:TemplateField HeaderText="rate" HeaderStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <div class="rateit" id="divrate"></div>
            </ItemTemplate>
        </asp:TemplateField>

and the save button is this

            <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="imgSave" OnClientClick="javascript:return SaveItem(<% Eval("ID") %>, <% divrate.ClientID( %>);" runat="server" ImageUrl="~/Imgs/Yes.gif" AlternateText="Save"  />
            </ItemTemplate>
        </asp:TemplateField>

and the javascript function is

function SaveItem(RowID,RatingControlID){

         var ri = $(RatingControlID);
         var value = ri.rateit('value'); //rateit is the class used in div

         $.ajax({
             url: 'rateit.aspx', //save function
             data: { id: RowID, value: value }, 
             type: 'POST',
             success: function (data) {
                 $('#response').append('<li>' + data + '</li>');

             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });
     });

But in the function call itself it gives error

Answer 1

You didn't terminate your ClientID call:

OnClientClick="javascript:return SaveItem(<% Eval("ID") %>, <% divrate.ClientID( %>);"

becomes:

OnClientClick="javascript:return SaveItem(<% Eval("ID") %>, <% divrate.ClientID() %>);"