IE issue with $.AJAX when opened for first time

Description:

Scenario is that you have developed a SharePoint page with multiple CE web parts or custom web parts. Inside each web part, you have a custom JS which internally calls a Web Service or a SVC method. Basic idea is to load multiple sections of a page in ASYNC method so that the load will be faster.

This may work in Chrome, Firefox but IE (as usual) behaves differently where the initial navigation to the page wont trigger the JS calls & upon hitting CTRL + F5 or F12, it starts working.

Now possible fixes are:


  • JS EXECUTION FLOW:

The current model used to call the SVC methods has some limitations.

SP.SOD.executeFunc(‘file.js’, null, callbackfunction);

This will execute the param3 only when the file.js is present & loaded. [In your case, you are just saying OneHr – which is not a valid JS file name in the first place]

In this application there are multiple web parts [inside same page] which use the same executeFunc() & wait for the same param1. This is where the problem starts. This function also doesn’t execute param3 if the param1 is already loaded.

We have to also consider the fact that IE caches most JS files & hence normal page loads don’t trigger the param3 since param1 might be loaded in previous page.

SP.SOD.executeFunc(“OneHR”, null, function () {
getPersonalDetails();
getAboutMeDetails();
});

Change the above to:

ExecuteOrDelayUntilScriptLoaded(function () {
getPersonalDetails();
getAboutMeDetails();
}, “SP.js”);

  • CACHING:

In some cases, the page woks fine when the DEV TOOLS are opened. This is because IE normally uses aggressive caching when viewed normally & least caching when DEV TOOLS are opened.
So designate all your AJAX with CACHE = FALSE.

Example:
$.ajax({cache: false, …})

  • Meta Tag inside Master page. Ensure that the IE mode is set as EDGE

  • CONSOLE.LOG:

Also since in most places console.log() is used, this can be a problem when the site is opened in older versions of IE.
And in some cases, opening up DEV TOOLS will make the code work since it internally contains the CONSOLE window.
Use below as a safe bet. Create a common method inside master.js [or whichever custom JS that’s loaded first] called writeToLog(message) & you can call this universal method in all other JS files
Inside the above method, you can check if browser supports console or not like below:

Function writeToConsole(message)
{
if(window.console) {
//only now use console.log(message);
}
}

Advertisements

One thought on “IE issue with $.AJAX when opened for first time

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: