Twitter引导模式远程功能不能正常工作

Twitter Bootstrap Modal remote function not working properly

本文关键字:常工作 工作 能不能 模式 程功 Twitter      更新时间:2023-09-26

我正在使用twitter boostrap,我想从另一个页面获得html并将其加载到我当前页面的模态。所以我创建了一个javascript函数来为我处理这个

在我的'index.php'中,我有这个:

<button onclick="popIt('create_event.php', 'Create Event');" data-toggle="tooltip" data-placement="top" data-original-title="Edit" class="btn ttp"><i class="icon-pencil"></i></button>
<button onclick="popIt('tester.php', 'Test Head');" data-toggle="tooltip" data-placement="top" data-original-title="Delete" class="btn btn-danger ttp"><i class="icon-remove icon-white"></i></button>

javascript函数是这样的:

<script>
function popIt(url, header) {
        $('#myModal').modal({
            remote: url
        });
        $('#myModalLabel').html(header);
    }

当我点击按钮时,它会加载相应的页面,但是当我关闭模态并点击另一个按钮时,它仍然会加载前一个页面。

请问我做错了什么?由于

对象隐藏完成后销毁

$('body').on('hidden', '.modal', function () {
    $(this).removeData('modal');
});

我有很多问题与Bootstrap的模态小部件。两个主要问题是IE中的缓存和模态函数在使用远程属性时没有等到ajax调用完成才触发事件。我通过创建一个包装器来创建模态对话框来解决这些问题。要修复缓存问题,请执行$。获取并向URL添加时间戳参数,并在初始化模态小部件之前将响应设置为内容属性。请参阅下面的代码。希望这对你有帮助!

var $queue = $({});
if (settings.remote) {
  $queue.queue('modal_open', function(next) {
    $.when($.get(settings.remote + '&timestamp=' + new Date().getTime())).done(function(content) {
      settings.content = content;
      settings.remote = undefined;
      next();
    });
  });
}
$queue.queue('modal_open', function(next) {
  ...
  $modal.modal(settings);
  next();
}
$queue.dequeue('modal_open');
return $modal;

popIt函数的第一行尝试$('#myModal').empty()。这可能会导致从服务器获得响应的延迟

如果不是,你可以尝试融合get请求和模态,例如,

$.get(url,function(data){
   $('#myModal').html(data)
}