Fatal编程技术网
  • javascript/
  • Javascript 在模式中重新加载内容（twitter引导）

Javascript 在模式中重新加载内容（twitter引导）

javascript twitter-bootstrap

Javascript 在模式中重新加载内容（twitter引导）,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我正在使用twitter引导的模式弹出窗口 <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="mod

我正在使用twitter引导的模式弹出窗口

<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>
现在我必须打开相同的模式，但使用不同的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引导模式弹出窗口中刷新或重置ajax加载的内容？

我也有同样的问题，我想这样做的方法是删除数据切换属性，并为链接设置自定义处理程序

类似于：

$("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"); 
    });
});
稍后将尝试并发表评论。

您可以通过在Modal插件的隐藏方法末尾添加此行来强制Modal刷新弹出窗口（如果您使用的是bootstrap-transition.js v2.1.1，则应在第836行）

或者使用事件侦听器

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})
比上面接受的示例稍微压缩一些。从当前单击的任意对象的数据目标中获取目标，并启用数据切换=模式。这使得您不必知道目标模式的id是什么，只需重用相同的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>
我也被困在这个问题上，然后我看到模态的ID是相同的。如果需要多个模态，则需要不同的模态ID。我使用了动态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>
我希望这对您有用。

要在模式关闭时卸载数据，您可以将其与Bootstrap 2.x一起使用：

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});
在bootstrap3（）中：

它适用于所有版本的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>


/*
连接到modal的链接是

<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>


×
标题

我对答案做了一个小改动，所以我的所有模态都不会在隐藏时刷新。 仅刷新具有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为空会修复该值。

对于Bootstrap 3，您可以使用“hidden.bs.modal”事件处理程序删除任何与模式相关的数据，强制弹出窗口下次重新加载：

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});
我希望在模式关闭时删除AJAX加载的内容，因此我调整了其他人建议的行（coffeescript语法）：

基于其他答案（谢谢大家）

我需要调整代码以使其正常工作，因为只需调用.html就可以删除整个内容，并且在我这样做之后，模式将不会加载任何内容。因此，我只需查找模式的内容区域，并在那里应用HTML的重置

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });
仍然可以接受这个答案，因为在模态加载之前，我得到了一些丑陋的跳跃，因为控件使用的是Bootstrap。

这里有一个对我有用的coffeescript版本

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')
您可以尝试以下方法：

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});
var$table=$（“#myTable2”）
$table.bootstrapTable（'destroy'）

为我工作

步骤1：为模式创建一个名为
克隆模式包装器
的包装器

<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');
});
步骤2：创建一个名为
modal wrapper
的空白div

<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');
});
步骤3：将模态元素从
克隆模态包装
复制到
模态包装

<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');
});
步骤4：切换
模式包装器的模式


<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');
});



开放模式
×
标题
$（“a[数据目标=#myModal]”）。单击（函数（e）{
e、 预防默认值（）；
$（“.modal wrapper”）.html（$（.clone modal wrapper”）.html（）；
$（'.modal包装器'）.find（'.my modal'）.modal（'toggle'）；
});

-1将第一个代码片段直接放入模态插件是一个糟糕的想法。如果您打算破解插件（我会避免），更合理的做法是将
load（）
调用移出构造函数并放入
show（）
，或者向插件添加一个方法来手动触发
remote
的重新加载。关于第二个建议，我只提供了明确要求不要这样做的内容，我喜欢听的方式。我认为甚至可以使用“.modal”而不是“#modal”来改进它，以避免对id进行硬编码。在我看来，这是一种比markz更干净的方法，因为您一直使用原始引导模式中的数据切换。我想知道为什么这个答案没有得到太多支持。这个答案似乎是第一个建议使用事件监听器的答案，这个监听器非常有趣并且实现起来很快。$（'.modal'）。关于（'hidden'，function（）{$（This.removeData（）；}）这是我对下面的解决方案的修改。。。更干净，因为你不必捕捉点击并将其加载到你自己的编程模型显示仍然有效我正在使用Bootstrap 3，模式中的内容每次都会刷新，但它会创建两个模式窗口。还有其他人明白吗？嘿，希德，你用“模态体”类创建了2个div，实际上你已经在创建它了，模态又在创建了。从该代码中删除“.modal body”，应该可以正常工作。适用于我，带Bootstrap 3，非常令人沮丧的是核心引导库默认不支持它。@markz，我也使用类似于此的东西和ev.preventDefault（）；同样，但仍然点击链接，当我得到模态窗口时，我的所有页面的下拉列表都被重置。知道怎么防止吗？太好了。工作没有任何问题。穿着靴子

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



<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');
});