CODEWITHSUNDEEP
jqueryinternet-explorertwitter-bootstrap-3bootstrap-modal
jj2
jj2

Reputation: 956

Bootstrap modal content being cached in Internet Explorer

I've got a Bootstrap page that, among other things, allows the user to open an "add event" modal, enter some text in a textarea and the submit it. When the user opens the modal window the textarea needs to be pre-populated with the most recently entered text as most of the time they just need to amend it.

Once the user has entered their text and they click the submit button it makes an ajax call to save the new text and dynamically replaces the relevant section of text on the parent screen and then hides the modal (i.e. all without refreshing the parent page).

This all works fine until someone enters some new text in the modal and submits it. The problem is that if the user then re-opens the same modal again the original text is displayed rather than the most recent text.

Based on my testing this is happening in IE9 but not Chrome so it appears to be some type of caching issue. I have tried all sorts of suggestions like $('#your-modal').removeData('bs.modal'); to try and clear the modal's cache when it's hidden but nothing seems to work.

An example of the code I'm using is:

Link

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

Modal markup on parent page

<!--- 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 (loaded into modal)

<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 that runs when the addEvent modal is displayed

$('#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...
  });
}

Any ideas on why this is being cached in IE would be appreciated.

I am using Bootstrap css version 3.3.2 and js version 3.2.0.

Upvotes: 2

Views: 2202

Answers (2)

jj2
jj2

Reputation: 956

As per David's suggestion, this is what I ended up doing:

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

It just replaces a "nocache" parameter in the URL with a new time value each time the link is clicked by the user, which makes IE update the modal's content.

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85518

IE will like any other browser try to cache everything. Since you already have cache : false a guess could be that IE looks after the href that triggerend the ajax call in the first place too, ultimately 

<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, after each ajax success to alter the href on that <a> tag. First give it an id, test - then, on dom ready save the original rendered href and create a counter :

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

in your success handler : 

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

Completely not tested, do not have IE on the machine I am on right now - but it will certainly reduce the number of excuses IE can have for caching the content of the modal.

Upvotes: 1

Related Questions