Search code examples
javascriptjqueryajaxinternet-explorerlong-polling

How do I get AJAX-based long-polling working in Edge?

I am trying to get a very basic long-polling skeleton to work across browsers. My solution is working just fine in Chrome, but I cannot get it to work in Edge.

In Edge, the page loads without error that I can see (F12 in Edge). However, no request is received at the server (unlike under Chrome). The only traffic shown on the network tab of the browser developer tools is the download of jQuery itself. I can browse directly to the URL I wish to poll and get a result. I've added some console logging and this is what I see in Edge:

IIFE
Setting up polling
>> Polling
<< Polling

And that's it. On Chrome, those last two lines repeat ad infinitum.

Update: I moved the code and the server from my PC onto a dev server. In this environment the code works on Chrome and Edge. I could see network traffic in Edge and got a response from the server. So it seems that the issue relates my local environment, not the javascript per se.

Here's my basic code:

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Polling Exploration</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="poll.js"></script>
</head>
<body>
    <div id="wrapper">
    ...
    </div>
</body>
</html>

poll.js:

$(function() {
    console.log('IIFE');
    // Make sure caching is off as many suggest this is required for IE
    $.ajaxSetup ({
        cache: false
    });
    function polling() {
        console.log('>> polling');
        $.ajax({
            type: 'GET',
            url:  'http://localhost:8080/result',
            cache: false,
            data: { name: 'Test', date: new Date().getTime() }, // Make sure the payload varies - caching again
            success: function(data, textStatus, jqXHR) {
                // Take action ...
                //setTimeout(polling, 2000); // Apparently this is no good for IE
                setTimeout(function(){ polling(); }, 2000);
            }
        });
        console.log('<< polling');
    }
    //polling();
    console.log('Setting up polling');
    setTimeout(function(){ polling(); }, 2000);
});

There are many similar questions on SO on this topic and I have followed their advice to no avail. Specifically: (a) make sure caching is off for IE; and (b) use the correct form for setTimeout().

It should be irrelevant, but just in case, the application at localhost:8080 is based on Spring and running under Tomcat.

(N.B. Originally my question stated that I couldn't get this to work in IE. I found I was inadvertently using an ancient version of jQuery. Switching to the latest from the Google CDN got things going in IE.)

Solution

  • At the suggestion of one of my colleagues, I moved the application and web pages to a development server, ie. away from my PC and URLs with localhost in them. Lo and behold, the polling code worked just fine under Edge (and Chrome et al).

    So it would seem that Edge on my PC has issues with localhost. I've tried a few things on the basis of this knowledge but I haven't been able to figure out the underlying cause.

    However, it would seem the code in the question is just fine after all.