4

We have an unusual problem with javascript running on IE 11. I tried it on one of our servers running IE8 and the same problem occurs. However, it runs fine on Chrome and Mozilla. Here's the code in question:

SetGuideFatningCookie(fid); //set a cookie according to user choice

var validFatningCombo = ValidFatningCheck(); //ask server if user choice is valid using XMLHttpRequest GET request
if(validFatningCombo)
    window.location.href = GetGuideTilbehoerURL(); //if valid redirect user to next page
else
    popAutoSizeFancy("#GLfancy"); //if not show a fancybox with error text

The user chooses one of 7 choices. Then they click a button that runs the above code. The code sets a cookie containing the user's choice and asks the server if the choice is valid. If valid - we redirect the user and if not, we open a fancybox that contains some error text and two buttons - "Try again"(closes box and they can try again) and "Send us a message"(redirects user to our "ask us a question" page).

The code runs fine the first time the user goes to this process. However, if they have chosen an invalid choice, they close the fancybox and try to choose another choice and continue -> then the fancy box appears ALWAYS, regardless of what the user chooses. If they choose a valid choice and continue, get redirected to next page, then come back to this page and choose an invalid choice and press continue -> then they can continue to the next page without fancybox ever coming up.

However, if IE's developer tools are opened, the code runs correct every single time. I have found many threads describing this is a problem with console.log. I have removed every single reference to console.log from all our .js files. It could be one of the external libraries that we are using, like jquery, modernizr, fancybox and menucool's tooltip library.

Therefore I tried including a console fallback function for IE, like this thread suggests: Why does JavaScript only work after opening developer tools in IE once?

I am currently trying with this one, and I have tried every single other fallback console replacement from the thred I link to.

if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };

I tried including it:

  1. Somewhere in our .js files
  2. script element in head after loading all our .js files and all external libraries
  3. script element in head before loading all our .js files and all external libraries
  4. Inside $(document).ready(function() {}); , in a script element in head after loading all other js

So far, none of the fallback pieces of code I have tried in any of these 4 locations have solved the problem. It always behaves the same way in IE. I couldn't find another explanation than the "console" one for this problem so far, so if anyone got any insight on it, it would be greatly appreciated.

EDIT: I will include some more info: The very act of opening Developer Tools removes the unwanted behaviour. No errors are ever shown in console. I checked the server side to see if the server is getting the call from ValidFatningCheck(); It turns out that the call is made only the first time (or if Developer tools is open - every time) which is rather mysterious since the redirect/fancybox line comes after the server call and it doesn't fail to run, even if it runs wrong.

function ValidFatningCheck(){
var requestUrl = '/Tools.ashx?command=validscreen';

var req = new XMLHttpRequest();
req.open('GET', requestUrl, false);
req.send(null);

var res = "";
if (req.readyState==4)
    res = req.responseText;

if(res == "true")
    return true;
return false;
}

UPDATE : Problem solved by adding a timestamp to my XMLHttpRequest as multiple replies suggested. I didn't realize XMLHttpRequest uses AJAX so I overlooked it as a probable cause to the problem.

Community
  • 1
  • 1
DPH Trading Danish Plate House
  • 115
  • 1
  • 9
  • 1
    When you run the code (and it goes wrong) and then if you open dev tools do you see any errors in the console? – strah Oct 23 '14 at 10:34
  • 1
    could you show what is in `ValidFatningCheck()`, do you see your page trying to contact the server on the second run both from the browser and seeing if the server actually received a request? – Quince Oct 23 '14 at 10:36
  • 1
    Are you doing a synchronous AJAX request, since you can return the value rom `ValidFatningCheck`? – Ronni Egeriis Persson Oct 23 '14 at 10:38
  • That's the interesting part. No errors in console, and the very act of opening console removes the unwanted behaviour. I checked on server side as well - if Dev Tools is not opened, then the call to server happens only the first time. – DPH Trading Danish Plate House Oct 23 '14 at 10:44
  • 1
    it sounds like it could be a caching issue, could try adding a timestamp to the url to trick it to think it is making a new request – Quince Oct 23 '14 at 10:45
  • 1
    you could try adding this to the url `var requestUrl = '/Tools.ashx?command=validscreen&time='+new Date().getTime();` to make sure it is not a cache issue – Quince Oct 23 '14 at 10:55
  • I added my comment as an answer, if the issue is solved/if you are happy it worked you can mark as answer – Quince Oct 23 '14 at 11:28

1 Answers1

6

(I put in comments but will make this an answer now as it appears to have solved the problem) get requests are cached by IE but when the developer console is open it does not perform this cache.

three ways to fix:

  1. add a timestamp to the request to trick the browser into thinking it is making a new request each time

    var requestUrl = '/Tools.ashx?command=validscreen&time='+new Date().getTime();

  2. set the response header to no-cache

  3. make a POST request as these are not cached (as pointed out by @juanmendes not ideal you are not editing a resource)
Quince
  • 14,790
  • 6
  • 60
  • 69