Question

I have a page that contains a div for a partial view that is being returned via an ajax request.

    $.ajax({
        url: 'CompleteSessions',
        success: function (data) {

            var selector = $('#complete-session-section');
            if (data.length > 0) {
                selector.html(data);
            }
            else {
                selector.append($(document.createElement('option')).html('No assessments'));
            }
        }
    });

The partial view itself has a model and constructs a combobox based on the number of returned sessions.

    @using SmartQWeb.Models.Entities
@using SmartQWeb.Runtime;
@model IEnumerable<Session>


<span class="dropdown">
<select style="width: 75%" id = "complete-session-selector">
    <option id="-1">Select a Session</option>
    @foreach (Session session in Model.OrderByDescending(date=>date.StartTime))
    {
        if (session.Assessment != null)
        {
            <option id="@session.AssessmentId" value="@session.Id" title="Administered by: @session.User.Name" data-assessmentId="@session.AssessmentId">@session.Participant.AliasLookup.AliasId - @session.StartTime  </option>
        }
    }
</select>


</span>

The problem is that, only for IE, the dropdown does not get properly updated when the page is first loaded. I have to hit F5 (sometimes control F5) to refresh and see the new entries in the combobox. This is not a problem for Chrome or Firefox.

Was it helpful?

Solution

The default 'type' argument for jQuery ajax requests is 'GET' which IE will cache. You can disable caching in your ajax request or switch to a 'POST' to prevent this --

$.ajax({
    ...
    cache: false
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top