Question

I am using jquery UI tabs and adding a telerik datepicker to it(dont want to use jquery datepicker for styling issues)..I can see the control on the tab but when i click it, it doesn’t open and the url changes to http://localhost/#.

I have tried ajax CalendarExtender and same thing happens.

I dont get any errors as such.

I am using jquery 1.5.1 and jquery-ui-1.8.11.js.

edit ::

on master page i have :

    <link href="Content/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <link rel="Shortcut Icon" href="favicon.ico" />
    <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
    <script src="Scripts/cufon/cufon-yui.js" type="text/javascript"></script>
    <script src="Scripts/cufon/Lubalin_Graph_700.font.js" type="text/javascript"></script>
    <script src="Scripts/jquery.watermark.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validator.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/jquery.tablesorter.min.js"></script>
    <script src="Scripts/jquery.colorbox.js" type="text/javascript"></script>

and my tab structure is :

        <div id="tabs">
                <ul>
                    <li title=""><a href="FAQs.aspx">FAQ</a></li>
                    <li title=""><a href="Profile.aspx">Profile</a></li>
                    <li title=""><a href="Contact.aspx">Contact</a></li>
        </div>

and jquery is:

    $("#tabs").tabs({
        select: function (event, ui) {
            $(ui.panel).empty();
            $(ui.panel).append("preloader.gif' />");
        },
        cache: false,
        ajaxOptions: { cache: false }
    });

in profile aspx page i have this ajax:

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
                        </asp:CalendarExtender>

and for telerik:

<telerik:RadDatePicker runat="server" ID="date" Width="110px" ></telerik:RadDatePicker>

Answer 1

When AJAX loading a page is important to understand that all load events have already occurred on the main page. This means that any code wrapped in load handlers or document.ready on remote page will fire as soon as they are loaded and won’t wiat for any subsequent html to load first

If the scripts in remote page exist prior to the html they refer to they will fire before that html exists.

Placing the html before the script will remedy this.

Alternatively you can use the tabs load event to make a $.getScript call

EDIT: Following code is from jQueryUI tabs API and will fire every time a tab is ajax loaded:

$( "#tabs" ).on( "tabsload", function( event, ui ) {
   var active = $(this).tabs('option','active');
    /* index starts at zero for first tab*/
   if(active==2){
     /* iniitalize datepicker here*/
   }

});