Jquery tabs & calendar not binding properly

Question

I'm implementing a page jquery tab toggle that loads content from hidden divs on the page. on one of the hidden pages i have a calendar popup (part of the jQuery.UI api. this works find on it's own page but when i add it to a hidden block and then load that block into the visible window i loose the ability for the calendar to pop up correctly. i've attempted using live without luck - it's worked for other event bound elements on these hidden div pages.

here is a sample of what im doing:

$(".tab-toggle").live("click",function() {
  alert("test");
  $(".calendar-class").datepicker({showOn: 'both', buttonImage: 'images/icon-calendar2.gif', buttonImageOnly: false, changeMonth: true, changeYear: true, yearRange: '2009:2015'});
});

the alert fires on each pageload but the calendar isn't being rebound to an event.

$(".calendar-class").datepicker({showOn: 'both', buttonImage: 'images/icon-calendar2.gif', buttonImageOnly: false, changeMonth: true, changeYear: true, yearRange: '2009:2015'});

works fine in pages where it immediately loads into the viewable window but stops working when i tab over to another page and then tab back...

those tabbed contents are already loaded or do you cal them on-demand when changing tabs? — yoda, Sep 09 '09 at 21:29

score 0 · Answer 1 · answered Feb 26 '11 at 03:16

I did the same thing, but I didn't use the Jquery UI toggle it. Instead I made a basic show/hide.

It can be seen here

This is the jQuery I used :

$("#changeSortCal").click(function(){
    $("#search_choose_cal").hide();
    $(".calendarContainer").slideDown('slow');
});
$(".calendar-close-button").click(function(){
    $(".calendarContainer").hide();
    $("#search_choose_cal").slideDown('slow');
});

.live or .bind should not be needed since the DatePicker is loaded on pageLoad.

Jquery tabs & calendar not binding properly

1 Answers1