I am trying to call a function on my code behind page after a date has been selected from the calendar. I have tried using the popupbuttonid and the click event for that button and I have tried the text box textchanged event. Nothing seems to work. Does any one know how to do this?
Thanks in advance!
Hi dowens,
You should set the property OnClientDateSelectionChanged of the CalendarExtender.
As value, you should give it a function. But the function should be without brackets or an error will occur (not sure why)
Take a look at the following example:
<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { alert('test'); } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1"OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> </div> </form></body></html> I hope this helps!Wim
MY BAD .......
The following example call's code behind: (the one in the button's click method on the serverside).
<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { var serverButton = document.getElementById('Button1'); serverButton.click(); serverButton = null; } </script> <style type="text/css"> .hide { visibility:hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /> </div> </form></body></html> Kind regards,Wim
deblemewim,
I tried your suggestion and it still won't work. Here is the code for the script function and the calendar extender. If you notice the PopupButtonID is the same button that I am trying to call the click event for. I thought this might be the problem so I removed it and it still doesn't work.
function test()
{
var serverButton = document.getElementById('btnEDate');
serverButton.click();
serverButton =null;
}
<cc1:CalendarExtenderID="ceEdate"runat="server"
TargetControlID="txtEDate"
PopupButtonID="btnEDate"
CssClass="MyCalendar"
OnClientDateSelectionChanged="test">
</cc1:CalendarExtender>
Hi dowens,
Well, I don't see your whole code, but I think the your code is not working because your PopupButtonID is a Button (imagebutton, inputbutton, ordinary asp button, ...).
I don't think that is possible!!
When you look at the ajax toolkit examples, they also use either the control (textbox) itself to let the calendar popup, OR they use an image (<img id="myImage" ... ).
So that is the setup you have to go for!!
Is your calendar poping up? Is is that what isn't working?
In my example, I use an image, so the calendar gets poped up. Then, I've set the property OnClientDateSelectionChanged to trigger a javascript function whenever the date changes in the TargetControlID .
When that happens, the javascript locates an ordinary asp:button on the page (which I have hidden), and it triggers it's click event. That way I get code-behind.
If this still doesn't answer your questions, please let me know what exactly you are willing to achieve.
Kind regards,
Wim
Wim,
I think I may have found the issue. The function "test" is not finding the button. Even if I don't hide the button it still doesn't find it. I think the issue may be that I am using a masterpage. I tried your code on a test page and it works fine. The only difference I can find is the master page. I have placed the function in the <head> of the masterpage and I have also tried it on the content page. Neither one works.
Hi dowens,
Sorry for my late reply...
I did some research (since masterpages are quite new to me ...) and I found the following:http://forums.asp.net/t/1031073.aspx (xplaining about how to call javascript from a masterpage).
Now my example should work!
So, on my content page I have the following:
<%@. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function test() {var serverButton = document.getElementById("<%= Button1.ClientID%>"); serverButton.click(); serverButton = null; } </script> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /></asp:Content>The script is now in the content page, but I guess it should also be possible to place it somewhere else or just use a link to it (haven't tested that ..)
Hope this helps!
Wim
Wim,
It works great!! Thanks for your help.
Dale
No comments:
Post a Comment