ASP LinkButton onclick show div

Question

I'm new at Jquery and im trying to display a div on the LinkButton ClickEvent (If I use a button instead of a linkbutton it will work)

This is my Jquery code

<script type="text/javascript">
            $(document).ready(function () {
                $('#<%=lbLog.ClientID%>').click(function () {

                    $("#login").show(2000);
                    alert("hello");
                });
            });
        </script>

The hello message is displayed by not the div

and this is my html code:

<asp:LinkButton ID="lbLog" runat="server" onclick="lbLog_Click">Login</asp:LinkButton>
        <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        <div id="login" style="display:none">            
            Username: <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfvUsername" runat="server" ControlToValidate="txtUsername" Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
            Password: <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
            <asp:Button ID="btnLog" runat="server" Text="Login" onclick="btnLog_Click" ValidationGroup="LogGroup" />
        </div>

Check in your html source code in the browser and see if there is not a added id on the div. — Dejan.S, Jan 05 '13 at 18:24
Can you add the html that is output from the above code? View source on the web page inside the browser. — Kyle Nunery, Jan 05 '13 at 18:53

score 1 · Answer 1 · answered Jan 05 '13 at 18:25

1

try this

$("#login").css('display','block');

answered Jan 05 '13 at 18:25

bipen

36,319
9
49
62

score 0 · Answer 2 · answered Jan 05 '13 at 18:28

0

You don't need onclick="lbLog_Click". The jquery selector for the ID looks incorrect '#<%=lbLog.ClientID%>'. View the source and make sure the id on the linkbutton matches what your passing to the selector in your javascript code.

answered Jan 05 '13 at 18:28

Kyle Nunery

2,048
19
23

this is wrong....if such was the case then.. how will he get a hello message.. i wonder..:) – bipen Jan 05 '13 at 18:30

Denys Wessels · Accepted Answer · 2013-01-05T19:20:01.467

The ASP.NET link button will cause a postback which will refresh the page and hide the div thanks to style="display:none" no matter how you change your jQuery function. Try this instead:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fakeLink").click(function () {
            $("#login").show(2000);
        });
    });
</script>
<style type="text/css">
    .fakeLink
    {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }
</style>

   <div>
    <span class="fakeLink" id="fakeLink">Login</span>
    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
    <div id="login" style="display:none;">
        Username:
        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="rfvUsername" runat="server" ControlToValidate="txtUsername"
            Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
        Password:
        <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
        <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword"
            Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
        <asp:Button ID="btnLog" runat="server" Text="Login" OnClick="btnLog_Click" ValidationGroup="LogGroup" />
    </div>
</div>

It worked Thank you, but I need to change the Log in to Log out, that's why I was try to use the link button because the link button change be changed through c# code — Eliza, Jan 05 '13 at 19:38

ASP LinkButton onclick show div

3 Answers3