Saturday, March 24, 2012

Panel close button with AJAX

Hello All,

I want to use this wonderful AJAX Framework to something very simple:

Inside an UpdatePanel I have a Panel. Now just below the Panel I want to place a button or link that when clicked will hide the Panel and do this client side (without requiring a post back). I know how to do this with a postback and a method that sets Panel.Visible = false, but I don't want to call the server for this, just hide the Panel client side.

So I ask to the MS AJAX experts out there: what is the easy and elegant way of doing this with MS AJAX Framework and/or AJAX Control Toolkit.

Thank you!


Use this JS for the button/link click: $get('PanelClientID').style.display = 'none';

Hi Neutrino,

My understanding of what your want is to make your panel which is indside an UpdatePanel without any postbacks. If I have misunderstood, please feel free to let me know.

You can use $get(Panel's ClientID).style.display = 'none'. Here is the sample:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><script runat="server"></script><html xmlns="" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"><%=DateTime.Now.ToString()%> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button"OnClientClick="return hidePanel()"/> </ContentTemplate> </asp:UpdatePanel> <script type="text/javascript" language="javascript">function hidePanel(){ $get("<%= Panel1.ClientID%>").style.display='none'; return false; } </script> </form></body></html>

Note: Please pay special attention to the part of "Bold". IfOnClientClick don't return false, a postback will be occured in this case.

Best regards,


Thanks to both. Great simple solution.

No comments:

Post a Comment