Question

I’m trying to reuse some script that I have working on another page, but am consistently getting an error with this one.

I have a .js file called CalendarPopup.js. It’s linked to my HTML like this:

<script type="text/javascript" src="/administrator/components/com_arrcard/js/CalendarPopup.js"></script>

It’s a javascript library that displays a popup calendar the user can choose a date from when they click a link. The value then gets put into a field. Here’s the code that displays the field and link:

<tr id="birthDate">
<td align="left" valign="top">
    <script type="text/javascript">
    var calStart = new CalendarPopup("calendar");
    calStart.showNavigationDropdowns();
    </script>
    Birth Date:
</td>

  <td>
    <input style="width:124px;" type="text" name="birthdate" value="" />
    <a href="#" onclick="calStart.select(document.instantForm.birthdate,'anchorBirthdate','MM/dd/yyyy'); return false;" id="anchorBirthdate">select</a>
  </td>
</tr>

Then there’s a div that actually holds the calendar:

<div id="calendar" style="position:absolute;visibility:hidden; background-color:white; layer-background-color:white;"></div>

All of this works flawlessly on one page, but on this new one, I’m getting the error

CalendarPopup is not defined

on this line:

var calStart = new CalendarPopup("calendar");

What am I missing? I’m sure it’s something really obvious, but I’ve been staring at it for too long and just can’t see it.

Answer 1

Make sure the script that defines the CalendarPopup class is in a place where it is executed before any other javascript references it.