在模态中重新加载内容(twitter bootstrap)

时间:2012-09-16 19:14:45

标签: javascript twitter-bootstrap

我正在使用twitter bootstrap的模态弹出窗口。

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

我可以使用带有这个a元素的ajax加载内容:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

现在我必须打开相同的模态,但使用不同的URL。我正在使用这个模态来编辑我的数据库中的实体。因此,当我在实体上单击编辑时,我需要加载带有ID的模态。

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

如果我点击1号链接,它可以正常工作。但是,如果我点击第2号链接,模态内容已经加载,因此它将显示链接号1的内容。

如何在twitter bootstrap模式弹出窗口中刷新或重置加载ajax的内容?

13 个答案:

答案 0 :(得分:96)

我遇到了同样的问题,我想这样做的方法是删除data-toggle属性并为链接设置自定义处理程序。

以下内容:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

稍后会尝试并发表评论。

答案 1 :(得分:69)

要在模态关闭时卸载数据,可以将其与Bootstrap 2.x:

一起使用
$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

在Bootstrap 3(https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516)中:

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

答案 2 :(得分:15)

使用Bootstrap 3,您可以使用'hidden.bs.modal'事件处理程序删除任何与模态相关的数据,强制弹出窗口下次重新加载:

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

答案 3 :(得分:8)

基于其他答案(感谢大家)。

我需要调整代码才能工作,因为简单地调用.html将整个内容擦除,并且在我执行之后模式不会加载任何内容。所以我只是寻找模态的内容区域并在那里应用了HTML的重置。

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

仍然可以使用已接受的答案,因为我在模态加载之前得到一些丑陋的跳跃,因为控件是使用Bootstrap。

答案 4 :(得分:5)

比上面接受的例子稍微压缩一点。使用data-toggle = modal on从当前单击任何内容的数据目标中抓取目标。这使得你不必知道目标模态的id是什么,只需重用同一个模块即可!少代码=胜利!你也可以修改它来为你的模态加载标题,标签和按钮。

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

示例链接:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

答案 5 :(得分:3)

我对Softlion回答做了一些小改动,所以我的所有模态都不会刷新。 具有data-refresh ='true'属性的模态仅刷新,其他模式正常工作。 这是修改后的版本。

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

现在使用如下所示的属性

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

这将确保只刷新data-refresh ='true'的模态。而且我也正在重置模态html,因为旧的值会被显示,直到新的值被加载,使得html空修复了一个。

答案 6 :(得分:1)

我也遇到了这个问题,然后我看到模态的 ids 是一样的。如果你想要多个模态,你需要不同的 ids 模态。我使用了动态 id 。这是haml中的代码:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

你可以这样做

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

您的模态链接将是

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

我希望这对你有用。

答案 7 :(得分:1)

它适用于所有版本的twitterbootstrap

Javascript代码:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

指向模态的链接

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

弹出模态

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

答案 8 :(得分:1)

这是一个适合我的coffeescript版本。

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

答案 9 :(得分:1)

你可以试试这个:

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

答案 10 :(得分:0)

我希望在模态关闭时删除AJAX加载的内容,所以我调整了其他人建议的行(coffeescript语法):

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

答案 11 :(得分:0)

var $ table = $('#myTable2');
     $ table.bootstrapTable('destroy');

为我工作

答案 12 :(得分:0)

第1步:为名为clone-modal-wrapper的模式创建包装器。

第2步:创建一个名为modal-wrapper的空白div。

第3步:将模态元素从clone-modal-wrapper复制到modal-wrapper

第4步:切换modal-wrapper的模式。

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});