Internet Explorer does not automatically resend AJAX requests after submitting a form

Question

Internet Explorer does not automatically resend AJAX requests after submitting a form

Specifically mentioning IE in my title because my code functions correctly on Chrome. The "Maintenance" view I have is responsible for creating, editing, and deleting. The form is located in a partial view named "_MaintenanceForm" with its own GET/POST methods for form submission. If you'd like to view the form, you can access it here. I apologize for using Pastebin instead of inline code blocks due to character limit constraints.

The form is identified by the id #maintenanceForm. Instead of utilizing an AJAX call to submit the form, I make use of jQuery function $("#maintenanceForm").submit(); to avoid passing all fields as data. You can view the JavaScript code for the Maintenance page here.

Although I am aware that the .submitForm click function is redundant since it is defined twice, I had initially set it as a separate function causing issues, hence defining it anonymously inline. Once I resolve the IE compatibility issue, I can focus on code cleanup.

The Maintenance view is straightforward, represented by a

<div class="maintenance-form"></div>

where the MaintenanceForm partial is displayed using the first AJAX call. Link to my controller methods can be found here. The problem arises in Chrome where the MaintenanceForm POST method is followed by a call to the Maintenance GET method, resulting in view re-rendering. Subsequently, the MaintenanceForm GET and SearchTable2 methods are recalled through AJAX. In IE, the Maintenance GET method is executed, but the AJAX calls are not triggered causing the form not to refresh. This forces a manual page refresh to view the changes made.

While everything functions correctly in Chrome, the issue persists in IE, indicating a potential compatibility problem that I am struggling to resolve. Any assistance is greatly appreciated, and feel free to let me know if providing additional code would aid in troubleshooting!

javascript c#ajax asp.net-mvc razor

Answer 1

Answer №1

@Michael Coxon was absolutely right about IE caching ajax calls. To prevent this, you can use the following code:

$.ajaxSetup({ cache: false });

By adding this code, your window will now refresh each time the Maintenance GET method is called. If you specifically want to prevent caching in IE only, you can try this slightly unconventional method:

var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();// IE <= 10
var isIE2 = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;// IE 11
if(ieVersion < 11 || isIE2) {
    $.ajaxSetup({ cache: false });
}

Although a bit of a workaround, this method ensures that caching is disabled for any version of Internet Explorer.

For more information, you can visit: http://api.jquery.com/jquery.ajax/

Answer 2

@Michael Coxon was absolutely right about IE caching ajax calls. To prevent this, you can use the following code:

$.ajaxSetup({ cache: false });

By adding this code, your window will now refresh each time the Maintenance GET method is called. If you specifically want to prevent caching in IE only, you can try this slightly unconventional method:

var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();// IE <= 10
var isIE2 = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;// IE 11
if(ieVersion < 11 || isIE2) {
    $.ajaxSetup({ cache: false });
}

Although a bit of a workaround, this method ensures that caching is disabled for any version of Internet Explorer.

For more information, you can visit: http://api.jquery.com/jquery.ajax/

Internet Explorer does not automatically resend AJAX requests after submitting a form

Answer №1

Similar questions

Certain iFrame instances are unable to display specific cross-domain pages

Turning off and on CSS transitions to set the initial position

Issues with Contenteditable functionality in JavaScript

Is there a noticeable change in performance when simply passing the object?

Unable to retrieve information from req.body, however able to retrieve data from req.params

What is the best way to use res.sendFile() to serve a file from a separate directory in an Express.js web application?

Retrieving DOM Element in Angular from Freshly Loaded Template

Retrieve text excluding a specific class or id using jQuery

How to Add a Clickable Image in a WebGrid Using Ajax within a Controller?

Ensure that site content remains visible above the table when refreshing the Ajax Table

Retrieve the $ionicConfigProvider within a Controller

Using SetInterval function in conjunction with jQuery's .each() method

Call a React component from an external JavaScript file

transferring the value of a textbox into another textbox

Saga Redux fails to pass parameters during post requests

One of my AngularJS directives seems to be malfunctioning while the rest are working fine. Can you help me troubleshoot

Set the android camera resolution to a lower setting automatically when a user attempts to upload a file from their browser

Exploring the impact of JavaScript tags on website performance in accordance with W3

Repeated entry and exit events occurring in text boxes

Is Laravel Spark suitable for developing an API-focused (AJAX) web application?