Problem putting javascript for date picker into include file

[andieje]

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

 

 

 

 

 

 

[Dimo]

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.

[andieje]

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

[andieje]

Please ignore the last post. I was mistaken