引导模式中的引导日期拾取器，使页面空白并添加年份

Bootstrap datepicker in bootstrap modal, making page blank and adds year

本文关键字：空白 添加 模式 日期      更新时间：2023-09-26

我有一个引导模态，并通过web2py ajax在该模态内加载的表单。我的日期picker字段是在这种形式，它不激活，因为它是通过ajax加载。因此，我添加了一个侦听器来捕获加载的ajax，然后激活日期拾取器。然后，当我单击该字段时，它打开日期选择器，但随后将整个页面内容替换为年份?下面是一个GIF截图:

GIF联系编辑:

按照Sam的要求，下面是一些帮助诊断问题的代码:

/**
 * JS
 */
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function (e) {
  var link = $(e.relatedTarget);
  // this line loads the form via ajax
  $.web2py.component(link.attr("href"),'modal-body');
  // this listens for ajax and activates bootstrap datepicker after
  $(document).ajaxComplete(function(e, xhr, settings) {
    if (settings.url == link.attr("href")) {
      $("#myModal").find('input.date').datepicker(
      );
    }
  });

});
/**
 * HTML
 */
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Deal</h4>
        </div>
        <div id="modal-body" class="modal-body"></div>
    </div>
</div>
</div>

这个错误也在控制台中被调用，但不确定这是否会特别影响日期拾取器，希望它有帮助:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

您可以为日期选择器添加z-index 

.datepicker{ 
      z-index:2000;
}

失败的原因是datepicker会触发触发我们用来加载模态内容的侦听器的show事件。因为它是模态的，所以它会使用错误的URL并加载仪表板页面，这会导致失败，因为它是AJAX调用。

相关文章：