Trying to run a Jquery function from UpdatePanel inside a Repeater (on ItemCommand)

Question

I have a repeater, and inside this repeater i have an UpdatePanel. In this UpdatePanel i have a that is hidden, and i want to display it in the Repeater_ItemCommand event. I'm struggeling figuring this out, and i'm not a Jquery-guru.. In Firebug-console it says: ReferenceError: showError is not defined

This is the UpdatePanel (the div #errorMessage is in the bottom):

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <%# GetComments (DataBinder.Eval(Container, "DataItem.id")) %>
                        <div class="contact_form">
                            <ul>
                                <li>
                                    <h2>Skriv en kommentar til oss!</h2>
                                </li>
                                <li>
                                    <asp:TextBox ID="txtName" runat="server" CssClass="txtBox" placeholder="Ditt navn" />                                                                                                                                                        
                                    <span class="form_hint">Ditt navn skal stå her</span>
                                </li>
                                <li>
                                    <asp:TextBox ID="txtCaptcha" runat="server" CssClass="txtBox" placeholder="Skriv resultatet av 10 pluss 6 her" />                                                                            
                                    <span class="form_hint">Du klarer vel å regne ut 10+6? :-)</span>
                                </li>
                                <li>
                                    <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" placeholder="Din kommentar"  />                                                                            
                                </li>                                                                        
                                <li>
                                    <asp:Button ID="cmdSaveComment" CssClass="button" runat="server" CommandName="SaveComment" CommandArgument='<%# Eval("id")%>' Text="Puliser kommentar" />
                                </li>                                                                        
                            </ul>
                            <div id="#errorMessage<%# Eval("id") %>" style="display:none;">
                                <p>Du må skrive resultatet av 10+6 i boksen for å få publisert kommentaren</p>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

In my .js file, i've made this function:

$(document).ready(function showError (divId) {
        $id = divId;
        $("#errorMessage" + $id + '').show("slide");        
        return false;    
});

And in the codebehind, where i want to trigger this:

protected void RepeaterBlog_ItemCommand(Object Sender, RepeaterCommandEventArgs e)
        {            
            if (e.CommandName == "SaveComment")
            {
                int blogID = Int32.Parse(e.CommandArgument.ToString());
                string name = ((TextBox)e.Item.FindControl("txtName")).Text;
                string comment = ((TextBox)e.Item.FindControl("txtComment")).Text;
                string captcha = ((TextBox)e.Item.FindControl("txtCaptcha")).Text;

                if (captcha == "16")
                {
                    if (name == "")
                    {
                        name = "Anonym";
                    }
                    name = name.Replace("'", "'");
                    comment = comment.Replace("'", "'");
                    dh.NewComment(name, comment, blogID);
                    GetItems();
                }
                else
                {
                    //show error box
                    string js = "$(document).ready(function () { showError('" + blogID.ToString() + "'); });";
                    ScriptManager.RegisterStartupScript(this, GetType(), blogID.ToString(), js, true);

                    //string js = "$(document).ready(function () {$(document).on('show', function() { $('#errorMessage" + blogID.ToString() + "').show('slide');return false;})});";
                    //ScriptManager.RegisterStartupScript(this, this.GetType(), blogID.ToString(), js, true);

                }             
            }            
        }

Can someone please help me figuring out what i'm doing wrong?

Answer 1

You really don't need to use the $(document).ready(... wrapper when you are. This is used to run javascript after all the page elements have loaded, but for what you need just remove this and use straight javascript function calls.

Your js file:

function showError (divId) {
        $id = divId;
        $("#errorMessage" + $id + '').show("slide");        
        return false;    
}

Your .Net code

////
else
{
    //show error box
    string js = "showError('" + blogID.ToString() + "');";
    ScriptManager.RegisterStartupScript(this, GetType(), blogID.ToString(), js, true);
}
////      

Also, in your errorMessage div you shouldn't include the hashtag in the ID. In your jquery call you use this to signify you are referring to and ID element, but this should not be part of the ID assignment.

<div id="errorMessage<%# Eval("id") %>" style="display:none;">
    <p>Du må skrive resultatet av 10+6 i boksen for å få publisert kommentaren</p>
</div>