Twitter bootstrap远程模式每次都显示相同的内容

loading...


260

我正在使用Twitter bootstrap,我已经指定了一个模态

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

和链接

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

当我第一次点击这些链接中的任何一个时,我看到了正确的内容,但是当我点击其他链接时它显示第一次加载的相同内容时,它不会更新内容 .

我想让它每次点击都要更新 .

P.S:我可以通过自定义jQuery函数轻松地使它工作,但我想知道它是否可以使用本机Bootstrap模式远程函数,因为它应该很容易,我想我只是让事情复杂化 .

22回答

  • 0

    问题是双重的 .

    First ,一旦Modal对象被实例化,它就会持久地附加到 data-target 指定的元素,并且后续调用显示模态只会在其上调用 toggle() ,但不会更新 options 中的值 . 因此,即使您的不同链接上的 href 属性不同,当切换模态时, remote 的值也不会更新 . 对于大多数选项,可以通过直接编辑对象来解决这个问题 . 例如:

    $('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
    

    然而,在这种情况下这不起作用,因为......

    Second ,Modal插件用于在Modal对象的构造函数中加载远程资源,遗憾的是,即使对 options.remote 进行了更改,也不会重新加载 .

    一个简单的补救措施是在后续切换之前销毁Modal对象 . 一种选择是在完成隐藏后将其销毁:

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

    注意:根据需要调整选择器 . 这是最普遍的 .

    Plunker

    或者您可以尝试提出一个更复杂的方案来执行某些操作,例如检查启动模式的链接是否与前一个不同 . 如果是的话,毁灭;如果不是,则无需重新加载 .


  • 0

    对于bootstrap 3,你应该使用:

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

  • 30

    对于Bootstrap 3.1,您将要删除数据并清空 modal-content 而不是整个对话框(3.0),以避免在等待加载远程内容时出现闪烁 .

    $(document).on("hidden.bs.modal", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

    如果你使用非远程模态,那么上面的代码当然会在关闭后删除它们的内容(坏) . 您可能需要向这些模态添加一些内容(例如 .local-modal 类),这样它们就不会受到影响 . 然后将上面的代码修改为:

    $(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

  • 0

    谢谢merv . 我开始修改boostrap.js,但你的答案是一个快速而干净的解决方法 . 这是我最终在我的代码中使用的内容 .

    $('#modal-item').on('hidden', function() {
        $(this).removeData('modal');
    });
    

  • 7

    接受的答案对我不起作用,所以我选择使用JavaScript来完成它 .

    <a href="/foo" class="modal-link">
    <a href="/bar" class="modal-link">
    
    <script>
    $(function() {
        $(".modal-link").click(function(event) {
            event.preventDefault()
            $('#myModal').removeData("modal")
            $('#myModal').modal({remote: $(this).attr("href")})
        })
    })
    

  • 2

    这适用于Bootstrap 3 FYI

    $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
    });
    

  • 0

    我的项目是在Yii中构建的并且使用了Bootstrap-Yii插件,所以这个答案只有在你使用Yii时才有意义 .

    上面的修复工作确实有效,但仅在第一次显示模态之后 . 它第一次出现空洞 . 我认为那是因为在我启动代码之后,Yii调用了模态的隐藏功能,从而清除了我的启动变量 .

    我发现在启动模式的代码之前立即放置removeData调用就可以了 . 所以我的代码结构如下......

    $ ("#myModal").removeData ('modal');
    $ ('#myModal').modal ({remote : 'path_to_remote'});
    

  • -4

    在Bootstrap 3.2.0中,“on”事件必须在文档上,你必须清空模态:

    $(document).on("hidden.bs.modal", function (e) {
        $(e.target).removeData("bs.modal").find(".modal-content").empty();
    });
    

    在Bootstrap 3.1.0中,“on”事件可以在身体上:

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

  • 3

    为什么不使BS 3更通用?只需使用“[something] modal”作为模态DIV的ID .

    $("div[id$='modal']").on('hidden.bs.modal',
        function () {
            $(this).removeData('bs.modal');
        }
    );
    

  • 1

    只有我的工作选择是:

    $('body').on('hidden.bs.modal', '#modalBox', function () {
        $(this).remove();
    });
    

    我使用Bootstrap 3,我有一个名为 popup('popup content') 的函数,它附加了模态框html .


  • 50

    添加$(this).html('');清除可见数据,它工作得很好


  • 5

    如果提供了远程URL,则将通过jQuery的 load 方法一次性加载内容并将其注入.modal-content div . 如果您正在使用data-api,则可以使用href属性指定远程源 . 这方面的一个例子如下所示

    $.ajaxSetup ({
        // Disable caching of AJAX responses
        cache: false
    });
    

  • 0

    我添加了这样的东西,因为旧的内容会显示,直到新的内容出现,.modal-content中的.html('')将清除HTML内部,希望它有帮助

    $('#myModal').on('hidden.bs.modal', function () {
       $('#myModal').removeData('bs.modal');
       $('#myModal').find('.modal-content').html('');
    });
    

  • 0

    我写了一个简单的片段来处理模态的刷新 . 基本上它将点击的链接存储在模态的数据中,并检查它是否是已被点击的相同链接,删除或不删除模态数据 .

    var handleModal = function()
    {
        $('.triggeringLink').click(function(event) {
            var $logsModal = $('#logsModal');
            var $triggeringLink = $logsModal.data('triggeringLink');
    
            event.preventDefault();
    
            if ($logsModal.data('modal') != undefined
                && $triggeringLink != undefined
                && !$triggeringLink.is($(this))
            ) {
                $logsModal.removeData('modal');
            }
    
            $logsModal.data('triggeringLink', $(this));
    
            $logsModal.modal({ remote: $(this).attr('href') });
            $logsModal.modal('show');
        });
    };
    

  • 1

    对于Bootstrap 3,在modal.js中我改变了:

    $(document)
      .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
      .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
    

    $(document)
      .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
      .on('hidden.bs.modal', '.modal', function () { 
        $(this).removeData('bs.modal').empty()
        $(document.body).removeClass('modal-open')
      })
    

    (为清晰起见,增加了额外间距

    这可以通过调用模态容器上的empty()以及删除数据来防止任何不需要的旧模态内容闪存 .


  • -1
    $('#myModal').on('hidden.bs.modal', function () {
                $(this).removeData('modal');
            });
    

    这个对我有用 .


  • 444

    这种方法适合我:

    $("#myModal").on("show.bs.modal", function(e) {
        var link = $(e.relatedTarget);
        $(this).find(".modal-body").load(link.attr("href"));
    });
    

  • 1
    $('body').on('hidden.bs.modal', '.modal', function () {
           $("#mention Id here what you showed inside modal body").empty()
    });
    

    你想要清空哪个html元素(div,span what) .


  • 171

    这个对我有用:

    语气

    <div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" 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="SearchKaryawanLabel">Cari Karyawan</h4>
      </div>
      <div class="modal-body">
        <input type="hidden" name="location">
        <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
        <div class="links-area" id="links-area"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div> </div></div>
    

    脚本

    <script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>
    

    链接区域是我的区域把数据放在一边需要清楚


  • 0

    @merv接受的答案的扩展版本 . 它还会检查隐藏的模态是否从远程源加载并清除旧内容以防止它闪烁 .

    $(document).on('hidden.bs.modal', '.modal', function () {
      var modalData = $(this).data('bs.modal');
    
      // Destroy modal if has remote source – don't want to destroy modals with static content.
      if (modalData && modalData.options.remote) {
        // Destroy component. Next time new component is created and loads fresh content
        $(this).removeData('bs.modal');
        // Also clear loaded content, otherwise it would flash before new one is loaded.
        $(this).find(".modal-content").empty();
      }
    });
    

    https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5


  • 21

    在Bootstrap版本3.3.2上测试

    $('#myModal').on('hide.bs.modal', function() {
        $(this).removeData();
      });
    

  • 14

    祝你好运:

    $('#myModal').on('hidden.bs.modal', function () {
        location.reload();
    });
    

loading...

评论

暂时没有评论!