I am using q1 2009 rad controls & Ajax manger also.
I am trying to add RadAjaxmange in my pages to avoid postback operation on my page. But when i add RadAjaxManger for Rad dropdown list. After adding RadAjaxmanger when i select item from dropdown its showing javascript error. please see my Javascript error below.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; MS-RTC LM 8; .NET4.0C; .NET4.0E)
Timestamp: Wed, 8 Dec 2010 22:05:30 UTC
Message: Sys.InvalidOperationException: Two components with the same id 'ctl00_Cph1_CalendarExtender1' can't be added to the application.
Line: 3654
Char: 59
Code: 0
URI: http://localhost:2065/NDIWeb/ScriptResource.axd?d=jO6lj8d7MPtcjhVtE5RwyJDsREURMbGvovQRWfOSAflo-_iG0Te3w-aVNsEkrrZRjAdsxnEEatXuPpVt_SY0GgFT0hbY8eF7SfQvNW8DPG_QZKnBMDFKG07_snOYIQdEaZtF58fuzoFD3n-aXSkAuR4s8zL_EG1I1sDKTWcFIDU6GIKg0&t=634172965859113573
see my code below, For RadAjaxMAnge i set Ajax controlID -> Update panel ID. if i made a mistake please respond to my post.
<%@ MasterType VirtualPath="~/NDIMaster.master" %> //added script manger in MAster page. <%@ Register Assembly="RadComboBox.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> <%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> <asp:Content ID="Content1" ContentPlaceHolderID="Cph1" Runat="Server"> <asp:UpdatePanel runat="server" ID="update1" UpdateMode="Conditional" > <ContentTemplate > <div style="text-align: center;" id="divsearch"> <br /> <rad:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <rad:AjaxSetting AjaxControlID="update1"> <UpdatedControls> <rad:AjaxUpdatedControl ControlID ="radddlcust" /> </UpdatedControls> </rad:AjaxSetting> </AjaxSettings> </rad:RadAjaxManager> <table border="0" width="820px" style="text-align:center;" tit le="This table organize the page content" summary="This table organize the page content"> <tr align="center"> <td style="width:780px; height: 86px;" colspan="4" align="center"> <asp:Panel runat="server" ID="pnlcust" Enabled="true" CssClass="borderPanel" HorizontalAlign="Center" Width="820px"> <table width="820px" align="center" style="vertical-align:top;margin-bottom:3px;"> <tr class="HeaderRowIndented"> <td colspan="16" title="AppilcationHistory" > Application History</td> </tr> <tr align="center"> <td align="center"> <asp:Label runat="server" ID="Label3" Text="Application No" ToolTip="Customer" CssClass = "label" /> </td> <td align="center"> <asp:Label runat="server" ID="Label1" Text="From Date" ToolTip="FromDate" CssClass = "label" /> </td> <td align="center"> <asp:Label runat="server" ID="Label2" Text="To Date" ToolTip="ToDate" CssClass = "label" /> </td> </tr> <tr> <td> <rad:RadComboBox ID="radddlcust" runat="server" Width="200px" Skin="Vista" Height="250px" SkinsPath="~/RadControls/ComboBox/Skins" AllowCustomText="true" MarkFirstMatch="true" ToolTip="Select Application Name" AutoPostBack="true" OnClientSelectedIndexChanged = "ValidateCombobox" OnItemsRequested="radddlcust_ItemsRequested" OnSelectedIndexChanged="radddlcust_OnSelectedIndexChanged" > <Items> <rad:RadComboBoxItem Text="- Select -" Value="" /> </Items> </rad:RadComboBox> </td> <td> <asp:TextBox runat="server" ID="txtfromdate" CssClass="textbox" OnChange= "Validate()" OnTextChanged="txtfromdate_OnTextChanged" ToolTip="Select date" AutoPostBack="true" /> <ajax:CalendarExtender runat="server" ID="CalendarExtender1" Animated = "true" TargetControlID="txtfromdate" Format="MM/dd/yyyy" PopupButtonID="imagefromdate" /> <asp:ImageButton runat="server" id="imagefromdate" ImageUrl="~/images/calendar_blue.GIF" ToolTip="select from date" /> <ajax:TextBoxWatermarkExtender ID="txtwextfromdate1" runat="server" TargetControlID="txtfromdate" BehaviorID="FromwatermarkID" WatermarkText="- Select the date -" /> </td> <td> <asp:TextBox runat="server" ID="txttodate" CssClass="textbox" ToolTip="Select date" OnTextChanged="txttodate_OnTextChanged" AutoPostBack="true" OnChange= "Validate()" /> <ajax:CalendarExtender runat="server" ID="CalendarExtender2" TargetControlID="txttodate" Animated = "true" Format="MM/dd/yyyy" PopupButtonID="imgtodate" PopupPosition="BottomRight" /> <asp:ImageButton runat="server" id="imgtodate" ImageUrl="~/images/calendar_blue.GIF" ToolTip="select to date" /> <ajax:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txttodate" WatermarkText="- Select the date -" /> </td> <td> <asp:Button runat="server" ID="btnviewresults" Text="Submit" ToolTip="ViewResults" OnClientClick = "return Validate()" CssClass="button" OnClick="btnviewresults_Click" /> </td> <td align="right" style="width: 18px"> <asp:Button runat="server" ID="btncancel" Text="Cancel" ToolTip="Cancel selected values" CssClass="button" OnClientClick = "return confirm('Are you sure that you wish to cancel all data?');" OnClick="btncancel_Click" /> </td> <td align="left" style="width: 0px"></td> </tr> </table> </asp:Panel> </td> </tr> </table><br /> </asp:Panel> <script type="text/javascript"> var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1;//January is 0! var yyyy = today.getFullYear(); if(dd<10){dd='0'+dd;} if(mm<10){mm='0'+mm;} var todaydate = mm+'/'+dd+'/'+yyyy ; document.getElementById("<% =txttodate.ClientID %>").value = todaydate; function Validate() { var FromDate = document.getElementById("<% =txtfromdate.ClientID %>").value; var ToDate = document.getElementById("<% =txttodate.ClientID %>").value; var ButtonResults = document.getElementById("<% =btnviewresults.ClientID %>"); var ApplicationNo = <%=radddlcust.ClientID%>; var ApplicationNoValue = document.getElementById(ApplicationNo.InputID).value; if(ToDate > todaydate) { alert(" ToDate can not be greater than Today Date '" + todaydate + "'" ); document.getElementById("<% =txttodate.ClientID %>").value = todaydate; return false; } if(FromDate != "" && ToDate != "") { if(FromDate > ToDate) { alert("Please select valid Date. FromDate can not be less than ToDate."); $find("FromwatermarkID").set_Text("- Select the date -"); return false; } } if((FromDate == "- Select the date -") && (ApplicationNoValue == "- Select/Type Application Name -") ) { alert("Please select Application No/From Date."); return false; } if((FromDate != "- Select the date -") && (ApplicationNoValue != "- Select/Type Application Name -")) { ApplicationNo.Items[0].Select(); document.getElementById("<% =txtfromdate.ClientID %>").value = FromDate; return false; } if ((ToDate != todaydate) && (ApplicationNoValue != "- Select/Type Application Name -")) { ApplicationNo.Items[0].Select(); document.getElementById("<% =txttodate.ClientID %>").value = ToDate; return false; } return true; } function ValidateCombobox(item) { var FromDate = document.getElementById("<% =txtfromdate.ClientID %>").value; var ToDate = document.getElementById("<% =txttodate.ClientID %>").value; var ApplicationNo = <%=radddlcust.ClientID%>; var ApplicationNoValue = document.getElementById(ApplicationNo.InputID).value; var ButtonResults = document.getElementById("<% =btnviewresults.ClientID %>"); var item = ApplicationNo.Items[0].Text; //alert(todaydate); ButtonResults.disabled = false; // alert(ToDate); if(ApplicationNoValue != item) { $find("FromwatermarkID").set_Text("- Select the date -"); document.getElementById("<%=txttodate.ClientID%>").value =todaydate; } } function Navigate() { javascript:window.open("~/Modules/Search Summary.aspx"); } </script> </div> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="150" DynamicLayout="true" AssociatedUpdatePanelID="update1"> <ProgressTemplate> <div style="background-color:white;filter:alpha(opacity=95);position:absolute;width:100%;height:100%;top:0;left:0;z-index:50000;"> <div style="vertical-align:middle;text-align:center;cursor:wait;position:static;top:50%;left:50%;-moz-user-select: none;z-index:50001;"> <users:LoadingPanel ID="uLoadingPanel1" runat="server" Visible="true" /> </div> </div> </ProgressTemplate> </asp:UpdateProgress> </asp:Content>