Загрузочный модальный контент, кэшированный в Internet Explorer

Question

У меня есть страница Bootstrap, которая, среди прочего, позволяет пользователю открывать модальный «добавить событие», вводить текст в текстовое поле и отправлять его. Когда пользователь открывает модальное окно, текстовое поле должно быть предварительно заполнено последним введенным текстом, так как большую часть времени они просто должны его изменить.

После того, как пользователь ввел свой текст и нажал кнопку отправки, он делает вызов 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> 

JQuery, который работает, когда addEvent модальный отображается

$('#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 выглядит после href что TRIGGEREND вызов Ajax в первую очередь тоже, в конечном счете

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

Try, после того, как каждый из Аякса успеха, чтобы изменить href на этом <a> тега. Сначала дайте ему id, test - тогда, на дом готов сохранить оригинальную оказанной 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()); 
    }); 
}); 

Это просто заменяет параметр «NoCache» в URL с новым значением времени каждый раз, когда ссылка щелкнул пользователем, который заставляет IE обновлять контент модала.