AJAX Javascript Element not updating

Question

I have an issue with the Internet Explorer/EDGE browser. Basically, I have a script that pulls data from a remote XML file and displays it in page (live example: http://www.oldiesplus.com/ - The Radio info section, top of the page)

The way it works is that every 15 seconds, the XML file is read and the Song Title is updated (that's the scrolling bit). This works perfectly in Google Chrome, under IE/EDGE, however, the script executes (see Console log) but the element is never updated.

The XML file is grabbed using Curl and CURLOPT_FRESH_CONTENT is set to true.

The question being then, why is the element not updating with the new content in IE/EDGE?

Here's some code to help:

sc_conn.inc (PHP):

$ch             = curl_init($sc_host . '/admin.cgi?mode=viewxml');
    curl_setopt($ch, CURLOPT_PORT, $sc_port);
    curl_setopt($ch, CURLOPT_USERAGENT, $useragent);
    curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    curl_setopt($ch, CURLOPT_USERPWD, $sc_admin.':'.$sc_pass);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
    $curl = curl_exec($ch);

shoutcast.js (JavaScript):

function getStreamData() {
        var ajax;
        if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
        } else {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        ajax.open('GET','/sc_data.php', true);
        ajax.send();
        ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                        var data = ajax.responseText.split("|");
                        var song = (data[1] == '') ? 'some music.' : data[1];
                        var cta = (player_state == 0) ? '/new/img/play.png' : '/new/img/pause.png';
                        if (data[2]) {
                                document.getElementById('radio-info').innerHTML = '<h2>'+data[2]+'</h2>';
                                document.getElementById('radio-info').innerHTML += '<p><span class="dj_name">'+data[0]+' is playing</span> '+song+'</p>';
                        }else{
                                document.getElementById('radio-info').innerHTML = '<p><span class="dj_name">'+data[0]+' is playing</span> '+song+'</p>';
                        }
                        document.getElementById('tunein').src = cta;
                        console.log("Title Updated!");
                }
        }
}

most probably you have problem with ajax request, i would suggest you to use jQuery ajax method for making your ajax request instead writing it with simple js - api.jquery.com/jquery.ajax, jquery is free and supported in all major browsers — Armen
– Armen, Commented Dec 28, 2015 at 9:52
have you debug your code using console.log() ? try to find where stuck — kishan
– kishan, Commented Dec 28, 2015 at 10:04
you have a function called checkBrowser() in your js file, where you have some code for IE, but that function is not being called anywhere ? — Flakes
– Flakes, Commented Dec 29, 2015 at 7:03
To address the above comments: Armen: I'd rather hope to avoid jQuery as the scope of the project doesn't justify bringing in an entire library, plus I'm not up to speed with jQuery Kishan: I've added in a Console.log at the end of the function, which it reaches correctly. The element just does not seem to update in IE/Edge when it does in Chrome/Firefox. SearchAndResQ: The checkBrowser() function was there to display a Flash-based audio player, this is no longer in use and the function should be removed. It currently has nothing to with the issue I'm having. — Delirious
– Delirious, Commented Dec 29, 2015 at 16:13

Delirious · Accepted Answer · 2016-10-06 10:40:10Z

1

The resolution was to circumvent caching of the AJAX request - appending a random number to the end of the call of the PHP script using:

Math.random();

answered Oct 6, 2016 at 10:40

Delirious

376 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AJAX Javascript Element not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related