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
>