jQuery UI not binding on popup windows

Question

I get my datepicker control to bind fine to anything with a class of calendarTrigger on any of my pages, however on Popups (Of which use a Master Page and have the script files on it's master page) they don't bind to trigger datepicker UI elements.

Is there something I am missing ?

jQuery Code Held Within the UserInterfaceScripts.js

$(document).ready(function () {

    $(".calendarTrigger").datepicker( {showAnim: 'fadeIn', changeMonth: true, changeYear: true, yearRange: '1950:2010' }); 
});

The Script Code Held within the Parent Master Page, as well as the popup Master Page

<script type="text/javascript" language="javascript" src="/scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/scripts/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="/scripts/UserInterfaceScripts.js"></script>

The ASP Code on the Popup: (What you're looking for is the textbox with a CssClass of calendarControl) (Disregard the showCalendar Function old functionality that I'm replacing)

<asp:Table runat="server" CellSpacing="0">
        <asp:TableRow>
            <asp:TableCell ColumnSpan="2">
            <asp:TextBox ID="searchText" runat="server" Width="500" style="color: #AAA;" Value="Enter the first few letters of the Test Name"
                onClick="clickedOnce(this);"></asp:TextBox>
            </asp:TableCell>
            </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell>
                <asp:Table ID="Table1" runat="server" CellSpacing="0"><asp:TableRow><asp:TableCell>
                Date
                <br />
                <asp:TextBox ID="testDateOther" runat="server" CssClass="calendarTrigger">
                </asp:TextBox>
                </asp:TableCell>
                 <asp:TableCell Width="20">
                    <br />
                <a id="testDate" runat="server" href="Javascript:ShowCalendar('testDateOther',1900,'dd/mm/yyyy');">
                    <img id="Img5" src="/images/calendar.gif" class="phrCalender" runat="server"></a>
               </asp:TableCell></asp:TableRow></asp:Table>
        </asp:TableCell>
       </asp:TableRow>
        <asp:TableRow><asp:TableCell>
              <br />
              Test Result
                <br />
                <asp:RadioButtonList runat="server" ID="testResultOther" RepeatDirection="Horizontal">
                    <asp:ListItem Text="Normal" Value="yes" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Abnormal" Value="no"></asp:ListItem>
                </asp:RadioButtonList>
                 </asp:TableCell>
             </asp:TableRow>
        <asp:TableRow>
        <asp:TableCell ColumnSpan="2">
            Notes
            <br />
            <asp:TextBox ID="testNoteOther" runat="server" TextMode="MultiLine" Rows="4" Width="500">
            </asp:TextBox>
        </asp:TableCell>
    </asp:TableRow>
    </asp:Table>

I'm pretty sure it's not a selector issue either because I created a textbox outside the whole Table Structure and it doesn't work either :/

Answer 1

Check out this link:

http://www.thepensiveprogrammer.com/2009/07/jquery-and-scriptmanager-in-aspnet.html

It seems "What is happening is that the ScriptManager is registering the startup script in a block right before the closing form tag. The problem stems from the fact that jQuery is trying to modify the body tag when it builds the date picker pop up. The body tag is a parent of form tag and the form tag is not yet closed. Bummer"

He has a work around too.

HTH