LinkButton in GridView not properly working with JQuery

Using VB.NET 2010

Here is the issue I'm having:

I have a GridView with LinkButtons in Template fields.
Under the GridView I have a Panel that is hidden via CSS ( ie: display:none; ).
I have JQuery onclick event for the LinkButton; so when it's clicked the Panel slides into View under the GridView.

I'm using a class as the JQuery selector to target the LinkButton.
Here is the problem: The Panel will open but then disappear because of the PostBack of the page from the LinkButton.

Code:

---

<style type="text/css">
.hideMe{display:none;}
</style>

<script type="text/javascript">
    $(document).ready(function () {

        $("._EditLinkButton").click(function () {
            if ($("._panel1").is(":hidden")) {
                $("._panel1").show("fast");
            } else {
                $("._panel1").slideUp();
            }
        });
    });
</script>



<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Guid" HeaderText="Guid" />
<asp:BoundField DataField="FirstName" HeaderText="Guid" />
<asp:BoundField DataField="LastName" HeaderText="Guid" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="EditLinkButton" runat="server" CommandName="EditMe" CommandArgument="EditMe" Text="EditMe"  CssClass="_EditLinkButton"/>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField ButtonType="Link" Text="ButtonField" />
</Columns>
</asp:GridView>
<br />
<br />

<asp:Panel ID="Panel1" runat="server" GroupingText="Testing Panel" CssClass="_panel1 hideMe">
GUID:<asp:TextBox ID="GuidTB" runat="server" ></asp:TextBox>
FirstName:<asp:TextBox ID="FirstNameTB" runat="server" ></asp:TextBox>
LastName:<asp:TextBox ID="LastNameTB" runat="server" ></asp:TextBox>
</asp:Panel>

---

How is one to get around the PostBack of some asp.net server controls when using JQuery ?

I don't know if this would work (maybe ASP.NET would break it!), but you could give it a try:

Code:

---

    $(document).ready(function () {

        $("._EditLinkButton").click(function (event) {
            /*
            if ($("._panel1").is(":hidden")) {
                $("._panel1").show("fast");
            } else {
                $("._panel1").slideUp();
            }
            */
            $("._panel1").stop(true, true).slideToggle(); // Use the toggle instead of your own logic
            event.preventDefault();
        });
    });

---

everything important is in red.

basically, you're telling jQuery to stop the default action (of submitting) to happen. I also removed your custom logic and replaced it with the slideToggle() method. the stop() method is also used here to prevent your animation from hanging up and breaking if the button is clicked repeatedly in quick succession.

let me know if it works!

Yes, that works.

But since no postback, my gridview methods aren't called, (ie: row_created, etc...)


and thanks, this is a good start...