Question

我有一个Bootstrap页面，除其他外，允许用户打开“添加事件”模式，在textarea中输入一些文本并提交它。当用户打开模态窗口时，textarea需要预先填充最近输入的文本，因为大多数时候他们只需要修改它。

一旦用户输入了他们的文本并且他们点击了提交按钮，它就会进行ajax调用以保存新文本并动态替换父屏幕上相关的文本部分然后隐藏模态（即所有内容都不刷新父模式）页）。

这一切都正常，直到有人在模态中输入一些新文本并提交它。问题是，如果用户再次重新打开相同的模式，则会显示原始文本而不是最新文本。

根据我的测试，这是在IE9中发生但不是Chrome，所以它似乎是某种类型的缓存问题。我尝试了各种各样的建议，比如$（'＃your-modal'）。removeData（'bs.modal'）;尝试清除模态隐藏时的缓存，但似乎没有任何效果。

我正在使用的代码示例是：

链接

<a href="EventAdd_Form.cfm?<cfoutput>#GetRequiredParams()#&amp;eventType=background</cfoutput>" data-target="#addEventModal" data-toggle="modal" class="btn btn-primary btn-sm btn-openModal" title="Add a background"><span class="glyphicon glyphicon-plus"></span> Add</a>

父页面上的模态标记

<!--- Add new event modal --->
<div class="modal modal-wide" id="addEventModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <!--- Content dynamically generated --->
  </div>
</div>

EventAdd_Form.cfm（加载到模态中）

<cfset data = GetData(URL.param1, URL.param2, userType)>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
  <cfoutput>
    <!--- Main form --->
    <form name="addEventForm" id="addEventForm" role="form" method="get" action="EventAdd_Action.cfm">

      <div class="form-group">
        <textarea name="eventText" id="eventText" class="form-control textarea-animate" rows="6" maxlength="1000"
          data-bv-notempty="true" 
          data-bv-notempty-message="Please enter some text to continue"
          data-bv-stringlength="true"
          data-bv-stringlength-max="1000"
          data-bv-stringlength-message="You have exceeded the maximum number of characters for this field">#data#</textarea>     
      </div>    

      <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-ok"></span> Submit</button>

    </form>
    <!--- /Main form --->
  </cfoutput>
</div>

在显示addEvent模式时运行的JQuery

$('#addEventModal').on('shown.bs.modal', function(){
    $('form').bootstrapValidator().on('success.form.bv', function(e){
    e.preventDefault();

    $.ajax({
      type: 'GET',
      cache: false,
      url: 'EventAdd_Action.cfm?<cfoutput>#GetRequiredParams()#</cfoutput>&eventType=' + thisEventType + '&eventText=' + encodeURIComponent(thisEventText) + '&userType=' + thisUserType,
      success: function(response){ 
        //Hide the modal window 
        $('#addEventModal').modal('hide');

        ...Do some other stuff here - update the text on the parent window etc...
  });
}

任何有关为何在IE中缓存此内容的想法都将受到赞赏。

我正在使用Bootstrap css版本3.3.2和js版本3.2.0。

Answer 1

IE会像其他任何浏览器一样尝试缓存所有内容。既然你已经有了cache : false，那么猜测就可能是IE在第一时间触发了ajax调用的href，最终

<a href="EventAdd_Form.cfm?<cfoutput>#GetRequiredParams()#&amp;eventType=background</cfoutput>" data-target="#addEventModal" data-toggle="modal" class="btn btn-primary btn-sm btn-openModal" title="Add a background"><span class="glyphicon glyphicon-plus"></span> Add</a>

在每次ajax成功后尝试更改href标记上的<a>。首先给它一个id，test - 然后，在dom准备好保存原始呈现的href并创建一个counter：

$(document).ready(function() {
   var href = $('#test').attr('href'),
       counter = 1;
})

成功处理程序中的

：

success: function(response){ 
        //Hide the modal window 
        $('#addEventModal').modal('hide');
        counter++; 
        $('#test').attr('href', href+'&noCache='+counter);

完全没有经过测试，我现在在机器上没有IE - 但它肯定会减少IE可以用来缓存模态内容的借口数。

Answer 2

根据大卫的建议，这就是我最终要做的事情：

$('.btn-openModal').click(function(e){
    $(this).attr("href", function(_, val){
      return val.replace(/(nocache=)[0-9]+/, 'nocache=' + new Date().getTime());
    });
});

每次用户点击链接时，它只会用新的时间值替换URL中的“nocache”参数，这会使IE更新模态的内容。

Internet Explorer

2 个答案: