ajax 内的日期选择器返回 html 内容答案

【问题标题】：Date picker inside of ajax returned html contentajax 内的日期选择器返回 html 内容
【发布时间】：2014-01-19 23:52:18
【问题描述】：

更新：我使用的 .click 和 cmets 下面的 .find 方法都将 .hasDatepicker 类添加到输入中。但是它不显示日期选择器。

更新 2： 日期选择器正在显示，但高约 1000 像素。这似乎是datepicker 函数获取其坐标的方式。当它被埋在ajax 调用的success or complete 部分中时，它不能很好地工作。我必须在单独的脚本中获取ajaxComplete 顶部输入的x,y。那确实得到了正确的坐标。请看下面我的回答。

jQuery Datepicker 如果我使用页面加载时的输入就可以工作。

但是如果我通过 Ajax 引入它，它就不起作用了。

这是我当前的 html 设置：

<body>
    <select id="product_selector">Options</select>
    <div id="targetdiv"></div>
</body>

ajax 引入了一堆输入（它们周围没有表单元素），特别是应该是 DatePicker 的一个（附加到#targetdiv）是这个：

<input type="text" class="datepicker"  name="cmdz_end_date" id="cmdz_end_date" placeholder="End Date">

到目前为止，当我点击 ajax 传递的输入内部时，我可以控制台登录，但我无法让日期选择器显示出来。这是我到目前为止的 JS：

jQuery(document).ready(function($) {
$('#product_selector').on('change', function() {
    var product = this.value;

    $.ajax({
        type: 'POST',
        url: "<?php echo admin_url('admin-ajax.php'); ?>" ,
        data: {"action": "manual_transaction_form_select", "product": product},
        complete: function(){
                //$( ".datepicker" ).datepicker();
        },
        success: function(data){ 
            add_html_to_page(data);
                    $('#targetdiv').html(data).find('.datepicker').datepicker();
           // $('#targetdiv').on("click", ".datepicker", function(event) {
              //  console.log('click');
         //     $( ".datepicker" ).datepicker();
            //});
         }
    });
});

 function add_html_to_page(data){
    $('#targetdiv').empty().append(data)
 }
});

我曾尝试在“完成”和“成功”中使用 .datepicker，但无济于事。这可能是因为我没有正确定位它，但我不知道如何到达那里。在 .on("click" 它注册到控制台，但它不会使该字段使用 .datepicker

WP 版本：3.8

对此的任何见解将不胜感激。

【问题讨论】：

为什么在成功回调中不只是$('#targetdiv').html(data).find('.datepicker').datepicker()？而且您知道您在点击功能中使用 s 来定位 .datepickers？
.click 您的方法都将.hasDatepicker 类添加到输入元素，但它不显示日期选择器。 .datepickers 被留下是因为我在发帖时更改了一堆名称。
你检查过你的 ajax 请求的响应数据吗？ firbug控制台有什么错误吗？
它带回页面上显示的 HTML。我想我不确定你在那里要求什么，因为它显示正确并且当我检查它时它看起来不错。我在 Chrome 控制台中确实有一个错误：event.returnValue is deprecated. Please use the standard event.preventDefault() instead 但我相信在我开始设置 ajax 等之前就已经存在了......
打开你的控制台并检查错误。

标签： jquery-ui jquery jquery-ui-datepicker

【解决方案1】：

改用此代码：

success: function(data){ 
    add_html_to_page(data, function(){
        $('#targetdiv datepicker').datepicker();
    });
}

这样.datepicker() 将是您的add_html_to_page() 的回调，并且仅在完成后运行

编辑：

如果上一个不起作用，我猜是因为回调没有放在正确的位置，你可以试试这个代码吗：

    success: function(data){ 
        add_html_to_page(data);
    }

和

function add_html_to_page(data){
    $('#targetdiv').html(data, function(){
        $('#targetdiv datepicker').datepicker();
    });
}

【讨论】：

这确实显示了 HTML，但没有添加 .hasDatepicker 类，所以我认为它不起作用。使用 .find 的另一个选项确实添加了类，但它没有显示日期选择器
感谢您的想法。那时HTML 似乎没有加载到DOM 中，所以它没有找到它。这是我能明白为什么您的编辑对我不起作用的唯一原因。将datepicker() 放在下一行确实有效，但后来我遇到了范围问题：日期选择器框的坐标偏离了大约 1000 像素。看起来您必须在 ajaxComplete 的顶层而不是在 ajax 调用/成功/完成中获取坐标。这就是为什么我整理了一个单独的脚本来寻找它。我确信有更好的方法来做到这一点，但这是有效的。
这可能是一个 css 问题，您需要确保我猜它为空且未显示的元素应该具有与可见内容相同的坐标
最终这是一个 CSS 问题...但是 datepicker() 获得了实例化 css 的绝对定位 x,y。问题是，当它嵌套在该 Ajax 调用中时，它会获取与添加 HTML 的 DIV 顶部内联的坐标。所以我不得不在ajaxComplete上的脚本最顶部抓住x,y。

【解决方案2】：

这就是日期选择器显示在正确位置的结果。最初，jquery datepicker 可能正在显示，但由于它位于页面顶部<select> 处，因此无法看到它。如果我将代码放在主脚本的 ajax 成功或完成中，那么 $('#cmdz_end_date).offset() 将返回一个与 <select> offset() 基本相同的错误值

如果有人能告诉我为什么会这样，我将非常感激。

jQuery(document).ajaxComplete(function(event, request, settings) {
    var xy = jQuery('#cmdz_end_date').offset();
    jQuery('#cmdz_end_date').datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: xy.top,
                    left: xy.left
                });
            }, 0);
        }
    });
});

【讨论】：