引导模式中的引导日期选择器，使页面空白并添加年份答案

【问题标题】：Bootstrap datepicker in bootstrap modal, making page blank and adds year引导模式中的引导日期选择器，使页面空白并添加年份
【发布时间】：2016-06-29 14:12:00
【问题描述】：

我有一个引导模式，以及一个通过该模式中的 web2py ajax 加载的表单。我的 datepicker 字段是这种形式，它没有激活，因为它是通过 ajax 加载的。所以我添加了一个监听器来捕捉加载的 ajax 并在之后激活 datepicker。然后当我单击该字段时，它会打开日期选择器，然后将整个页面内容替换为年份？这是所发生情况的屏幕截图 GIF：

GIF link

编辑：

按照 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/.

【问题讨论】：

GIF 链接已损坏
@SamHood 完美运行我刚刚点击了它
这是403，您有权限查看，但我们没有权限
@SamHood 我更改了链接，谢谢！
现在知道了！这是非常奇怪的行为，当它这样做时，控制台/网络选项卡中是否有任何内容？如果您在问题中添加一些代码 sn-ps 以查看那里是否有任何问题，也会很方便

标签： javascript jquery ajax twitter-bootstrap datepicker

【解决方案1】：

你可以给 datepicker 添加一个 z-index

.datepicker{ 
      z-index:2000;
}

【讨论】：

它打开了，这不是问题，问题是它打开后页面空白。看上面的GIF
抱歉，GIF打不开，现在可以看到了

【解决方案2】：

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

【讨论】：