在ajax加载页面中的jquery ui datepicker

时间:2009-08-16 17:01:29

标签: jquery ajax

我遇到了问题,我正在加载一个带有表单的div页面,它有日期。我想在那里找到datepicker,但是当页面加载了ajax时,jquery看不到我的输入。我试过这样的事情:

$('#birthdate').live('click', function() {
    $(this).datepicker({showOn:'focus'}).focus();
});

它确实有效,但整个日期选择器闪烁,有时不显示等。 是否有可能从我自己的onlcik功能的恶劣显示datepicker? 类似的东西:

function choosedate() {
    $('#birhtdate').datepicker();
}

它不仅与datepicker,我只是不知道如何在ajax加载页面中使用jquery。

3 个答案:

答案 0 :(得分:8)

处理ajax响应时,您应该可以致电$("#yourdate").datepicker()

例如:

$.get("new_div_contents.whatever", function(data) { 
  // do your thing with the data
  $("#yourdate").datepicker();
});

答案 1 :(得分:0)

我会将这些问题分成两个部分。

  1. 设置要在焦点上显示的输入的日期选择器
  2. 在页面更新时给出输入焦点。
  3. 现在,如果通过AJAX调用更新输入,则需要在加载时重新应用datepicker。这是因为任何先前的元素(被替换)将与DOM的处理程序一起从DOM中删除。如果没有,那么您只需要将datepicker与input元素关联一次。赋予元素焦点并触发焦点事件处理程序应该导致显示任何关联的日期选择器。

    $.get('/url/to/action', function(data) {
        $('#birthdate').datepicker( { showOn: 'focus' } );
         var bd = $('#birthdate').focus().get(0);
         if (bd) bd.focus();
    });
    

    请注意,jQuery文档不清楚是否在jQuery对象上调用focus()实际上会将焦点放在元素上,或者只是调用焦点事件处理程序。上面的代码假定它没有给予元素焦点,因此使用javascript方法完成。这可能没有必要,但我没有尝试过,而且取决于(冲突的)文档。

答案 2 :(得分:0)

zindex是一个选项

$('.datepicker').datepicker({'zindex':1200});