This is a migrated thread and some comments may be shown as answers.

Problem putting javascript for date picker into include file

3 Answers 43 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
andieje
Top achievements
Rank 1
andieje asked on 03 Jul 2009, 05:25 PM
Hi

I have a date picker for which the calendar icon is not shown but it pops up when you click in the textbox. This is achieved using javascript like so

 

function ToggleStartDateCalendarPopup()

 

{

$find(

 

"<%= dpStartDate.ClientID %>").showPopup();

}

 

<telerik:RadDatePicker ID="dpStartDate"

 

 

runat="server">

 

 

 

 

 

 

<DatePopupButton Visible="False"></DatePopupButton>

 

<DateInput onclick="ToggleStartDateCalendarPopup()">

 

 

</DateInput>
</
telerik:RadDatePicker>

This works fine but I wanted to put the javascript into an include file. However the code stops working when I do this and I get this error

Message: 'null' is null or not an object

I also tried adding the javascript using registerclientscriptblock but got the same error message

 

Dim s As New StringBuilder

 

s.AppendLine(

"<script>")

 

s.AppendLine(

"function ToggleStartDateCalendarPopup(){")

 

s.AppendLine(

"$find(""<%= dpStartDate.ClientID %>"").showPopup();}")

 

s.AppendLine(

"function ToggleEndDateCalendarPopup(){")

 

s.AppendLine(

"$find(""<%= dpEndDate.ClientID %>"").showPopup();}")

 

s.AppendLine(

"</script>")

 

 

If Not Page.IsPostBack Then

 

 

 

 

'Page.ClientScript.RegisterClientScriptInclude("DatePopups", ResolveClientUrl("~/JavaScript/DatePopups.js"))

 

 

 

Page.ClientScript.RegisterStartupScript(

Me.GetType(), "DatePopup", s.ToString)

 

 

The error is presumably because of the data binding expressions. How can i fix this so I can have my javascript in an include file that can be shared among pages?

thansk

 

 

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 06 Jul 2009, 09:20 AM
Hi andieje,

You can move the ToggleStartDateCalendarPopup() function to an external file only if you remove the code block. For example you can find out the client ID of the picker control, based on the client ID of its textbox:

ASPX

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <DateInput onclick="ToggleStartDateCalendarPopup(this)" />
    <DatePopupButton Visible="False" />
</telerik:RadDatePicker>


Javascript

function ToggleStartDateCalendarPopup(el)
{
    $find(el.id.replace("_dateInput_text", "")).showPopup();
}


Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
andieje
Top achievements
Rank 1
answered on 14 Jul 2009, 06:57 PM
Hello

Thanks for your last reply. I did think that had foxed my problem. However i have now discovered that since i have added set up the javascript as you suggested the RequiredFieldValidator does not work with the date picker.

Here is my basic code

         <telerik:raddatepicker id="dpStartDate" runat="server" skin="Web20" Width="120px">  
   <DatePopupButton Visible="False" CssClass="" HoverImageUrl="" ImageUrl=""></DatePopupButton> 
            <DateInput onclick="ToggleCalendarPopup(this)" Width="120px">  
            </DateInput> 
                    <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">  
                    </Calendar> 
</telerik:raddatepicker> 
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" 
                    Display="Dynamic" ErrorMessage="RequiredFieldValidator" ValidationGroup="JourneySearch">Date required</asp:RequiredFieldValidator></td

The javascript looks like this as i was advised by Dimo
 function ToggleCalendarPopup(el)  
 {  
    $find(el.id.replace("_dateInput_text", "")).showPopup();  
 }   

And now the required field validator doesn't work. It's definitely the javascript and not any silly mistake i might be making because if i remove this from the date picker,  <DateInput onclick="ToggleCalendarPopup(this)", the validator is working again.

Please can you explain the problem and advise how to fix it. Thanks
0
andieje
Top achievements
Rank 1
answered on 14 Jul 2009, 07:19 PM
Please ignore the last post. I was mistaken
Tags
Calendar
Asked by
andieje
Top achievements
Rank 1
Answers by
Dimo
Telerik team
andieje
Top achievements
Rank 1
Share this question
or