I have a page with a datepicker control as well as a textbox. When the date changes in the datepicker, I would like to change the text in the textbox. I do not want to postback during this process so I have ajaxified the datepicker control with the ajaxmanager. The problem is that when I select a date, the page stops responding and I get the IE message "A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?" How can this problem be resolved? My code is below:
---------------------------------------------------------------------------
<
rad:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<rad:AjaxSetting AjaxControlID="dateWeekStartDate">
<UpdatedControls>
<rad:AjaxUpdatedControl ControlID="dateWeekStartDate" />
<rad:AjaxUpdatedControl ControlID="txtWeekEndDate" />
</UpdatedControls>
</rad:AjaxSetting>
</AjaxSettings>
</rad:RadAjaxManager>
<
div class="row">
<div class="titleColumn">
Date:
</div>
<div class="column">
<rad:RadDatePicker ID="dateWeekStartDate" runat="server" Skin="None" OnSelectedDateChanged="dateWeekStartDate_SelectedDateChanged">
<DateInput Skin="None" CssClass="calInput" AutoPostBack="true"></DateInput>
<PopupButton CssClass="calButton" ToolTip="" />
<Calendar runat="server" ID="calStart" CssClass="calendar" EnableNavigation="true" >
<TitleStyle CssClass="calTitle" />
<DayStyle CssClass="calDay" />
<CalendarTableStyle CssClass="calTable" />
</Calendar>
</rad:RadDatePicker>
</div>
</div>
<div class="row">
<div class="titleColumn">
Date:
</div>
<div class="column">
<asp:TextBox runat="server" ID="txtWeekEndDate" ReadOnly="true"></asp:TextBox>
</div>
</div>
-----------------------------------------------------------------------------------------------------------------------
protected
void dateWeekStartDate_SelectedDateChanged(object sender, Telerik.WebControls.SelectedDateChangedEventArgs e)
{
txtWeekEndDate.Text = dateWeekStartDate.SelectedDate.ToString();
}
------------------------------------------------------------------------------------------------------------------------
Any help would be greatly appreciated.
Thank you,
Jennifer
18 Answers, 1 is accepted
Please, replace the postback from the DateInput control with enabling the AutoPostBack of the RadDatePicker itself instead.
Let us know how it works for you.
Kind regards,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thank you for your reply. I put the AutoPostBack="true" in the datepicker control iteself instead of in the dateinput, but I am still getting the same message.
-------------------------------------------------------------------
<
rad:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<rad:AjaxSetting AjaxControlID="dateWeekStartDate">
<UpdatedControls>
<rad:AjaxUpdatedControl ControlID="dateWeekStartDate" />
<rad:AjaxUpdatedControl ControlID="txtWeekEndDate" />
</UpdatedControls>
</rad:AjaxSetting>
</AjaxSettings>
</rad:RadAjaxManager>
<
div class="row">
<div class="titleColumn">
Date:
</div>
<div class="column">
<rad:RadDatePicker ID="dateWeekStartDate" runat="server" Skin="None" AutoPostBack="true" OnSelectedDateChanged="dateWeekStartDate_SelectedDateChanged">
<DateInput Skin="None" CssClass="calInput"></DateInput>
<PopupButton CssClass="calButton" ToolTip="" />
<Calendar runat="server" ID="calStart" CssClass="calendar" EnableNavigation="true" EnableMonthYearFastNavigation="false">
<TitleStyle CssClass="calTitle" />
<DayStyle CssClass="calDay" />
<CalendarTableStyle CssClass="calTable" />
</Calendar>
</rad:RadDatePicker>
</div>
</div>
<div class="row">
<div class="titleColumn">
Date:
</div>
<div class="column">
<asp:TextBox runat="server" ID="txtWeekEndDate" ReadOnly="true"></asp:TextBox>
</div>
</div>
----------------------------------------------------------------protected
void dateWeekStartDate_SelectedDateChanged(object sender, Telerik.WebControls.SelectedDateChangedEventArgs e)
{
txtWeekEndDate.Text = dateWeekStartDate.SelectedDate.ToString();
}
----------------------------------------------------------------Any other suggestions?
Thank you,
Jennifer
Rank 1
Jennifer
Your example is quite simple and should not cause such a problem in general. Have you tried removing the stiles (CssClass settings) to see if it makes any difference?
It will be really helpful if you can post the exact version of the components - RadAjax and RadCalendar which you run with. If it is an option, please give the latest Q1 2008 version a try (RadAjax v1.8.5, RadCalendar v2.2.5) and let us know if you need further assistance.
Sincerely yours,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thanks again for your reply. I am getting the error with the latest versions of the ajaxmanager and datepicker controls so upgrading is not an option.
However, I did strip the control of all css styles and found that the control works as expected when the Skin="None" property is removed from the datepicker. Is this a bug? I would prefer not to create a new skin for the control if possible.
Thank you,
Jennifer
Thank you for the additional details. I was able to reproduce the problem locally and we were also able to identify the source of the problem.
Please, set RadAjaxManager's EnablePageHeadUpdate="false" to resolve the problem. The devs will investigate the issue and it will be resolved for the next version expected in a month.
Thank you for reporting that and for your cooperation! I have updated your Telerik points as a small token of gratitude. Please, excuse us for the caused inconvenience.
Regards,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Adding the EnablePageHeadUpdate="false" solved my problem. Thank you very much for your help!
Jennifer
You're welcome.
I've send you a hotfix in your support ticket which resolves the problem so that you can turn on the page head updates again. The bug fix will be included in the next official Q2 2008 version scheduled for 22nd of July.
All the best,
Konstantin Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Or at least, could you make the hotfix available for other users?
I'm getting JavaScript error when using DatePicker inside WebUserControl being loaded dynamically in repsonse to ajax request. There are RadSplitter, RadMenu, RadToolbar and RadPanelBar. UserControl being loaded inside of RadPane, in response to click on RadMenu or RadPanelBar items. AFter loading the control, IE 7 states: JavaScript Error: expected ':'.
I guess it's some kind of same problem (DatePicker can't register its client-side scripts properly). Workarounds suggested in this topic, did not help. I also tried to put another DatePicker on the page itself (so loaded among the page, without any Ajaxifying etc.), hoping that it will register client script and then the second one (inside dynamically loaded control) will function properly then. No success :(
Any thoughts? Or maybe Q2 release could help - can you state any date when it will be released?
All examples are online and the site (downloads, purchases, release notes, documentation, etc.) will be updated completely by the end of the day.
Best wishes,
Vlad
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
As for "all examples are online" - do you mean there is some stuff which would help to beat "JavaScript Error: Expected ':'" in datepicker being loaded dynamically with Ajax on the page, as I described in previous message? Could you please give a link because I haven't found it.
In your samples, it's working good. But there are no samples illustrating something similar to my situation.
No, there is no such a live demo I'm afraid. I've just verified however you can already download the new release from your Client.NET account. This KB will help you to upgrade your project.
If that does not help, I will kindly ask you to submit a private support ticket where you will be able to attach a sample web site, which replicates the error. Please, make sure we can run the demo locally and we will get back to you with our findings/resolution shortly.
All the best,
Konstantin Petkov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Rank 1
I'm sorry to hear you still get this error. Should you have a sample to reproduce that with, we will gladly investigate the issue and resolve it as soon as possible.
Let us know if we could be of further help.
Sincerely yours,
Konstantin Petkov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Rank 1
i am using telerik datepicker in modal poup .when i am trying to open dialogour it shows the following error
a script on this page is causing internet explorer run slowly if continues to run your computer may become unresponsive
please help me
here is the code
<script type="text/javascript">
$(function () {
$("#dialog1").dialogr({ autoOpen: false });
$("#dialog2").dialogr({ autoOpen: false });
$("#dialog3").dialogr({ autoOpen: false });
$("#dialog4").dialogr({ autoOpen: false });
$("#open-btn1").click(function () {
$("#dialog1").dialogr('open')
$("#dialog1").parent().appendTo($("form:first"));
});
$("#open-btn2").click(function () {
$("#dialog2").dialogr('open');
$("#dialog2").parent().appendTo($("form:first"));
});
$("#open-btn3").click(function () {
$("#dialog3").dialogr('open');
$("#dialog3").parent().appendTo($("form:first"));
});
});
});
</script>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Tasks.ascx.cs" Inherits="VAM.SnapFoundry.Collaboration.Controls.Tasks" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>
<asp:Panel ID="panelRemind" runat="server">
<telerik:RadAjaxManager ID="radMgr" runat="server" EnablePageHeadUpdate="false" EnableEmbeddedScripts="false"></telerik:RadAjaxManager>
<div class="conversion_details" style="background-color: #FFFFFF; padding-bottom: 10px;">
<div class="taskHeader">
<h5>
Task Reminder</h5>
<span class="conversionClos-Btn"><a id="btnCloseRemind" href="#" style="float: right;">
<img src="../../Assets/Images/close_icon.gif" alt="close icon" width="15" height="15"
border="0" /></a> </span>
</div>
<asp:UpdatePanel ID="UpdatePanelReminder" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="hdReminderEntityID" runat="server" />
<asp:HiddenField ID="hdReminderEntityType" runat="server" />
<asp:HiddenField ID="hdReminderTaskID" runat="server" />
<div class="contactform">
<fieldset>
<span>Reminder Date<br />
</span>
<telerik:RadDateTimePicker ID="radReminderDate" runat="server" Style="position: static"
Height="20px" dateinput-allowempty="true" dateinput-hideonblur="true" Culture="en-US"
Width="200px" ZIndex="150000">
<TimeView ID="TimeView2" Interval="00:15:00" runat="server">
</TimeView>
<DateInput ID="DateInput2" DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" Width=""
runat="server">
</DateInput>
<DatePopupButton ImageUrl="../../Assets/Images/calender_icon.gif" HoverImageUrl="../../Assets/Images/calender_icon.gif"
CssClass=""></DatePopupButton>
<TimePopupButton ImageUrl="../../Assets/Images/clock_icon.gif" HoverImageUrl="../../Assets/Images/clock_icon.gif" />
</telerik:RadDateTimePicker>
</fieldset>
<fieldset>
<br />
<asp:Label ID="lblReminderErrMsg" runat="server" Visible="false" ForeColor="Red"></asp:Label>
<br />
<asp:Button ID="btnAddRemind" Text="Add Reminder" runat="server" OnClick="btnAddRemind_Click"
ValidationGroup="ValidateTaskReminders" UseSubmitBehavior="false" CssClass="conver_save"
Style="width: auto;" />
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="width: 100%; margin-left: 40%; float: left;">
<%-- <asp:Button ID="btnCloseRemind" Text="Close" runat="server" UseSubmitBehavior="false"
CssClass="conver_save" />--%>
</div>
</div>
</asp:Panel>
please help me
Rank 1
Naresh:
Its hard to tell from your partial code excerpt what is going on here. I wanted to be certain that you have inserted your javascript in the proper location of the xhtml, as follows:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <scripts> <%--Needed for JavaScript IntelliSense in VS2010--%> <%--For VS2008 replace RadScriptManager with ScriptManager--%> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </scripts></telerik:RadScriptManager><script type="text/javascript"> //Put your JavaScript code here.</script> and, that you are using the RadScriptManager and proper jQuery references.
Feel free to provide more details.