CODEWITHSUNDEEP
javascriptajaxinternet-explorer
mcan
mcan

Reputation: 2082

Javascript malfunction in Internet Explorer

Here is a demo In short brief: If somebody clicks on change text next() function will be triggered.

next() function sends the relative data to ajax_next_track.php and retrieves a random data.

Then it replaces texts in artist_name and track_name spans with the random data.

These all works fine in Firefox and Chrome. However, it doesn't in Internet Explorer. If you click on change text more than two times with different browsers you can see the problem.

In other browsers, there will be an operation time with 'loading...' text in screen; but it happens immediately with no operation time in internet explorer.

Function next() can not send the data to ajax file.

So, how can i fix it?

Thanks is advance.

    function next(tags)
    {
        var hr = new XMLHttpRequest();
        var url = 'ajax_next_track.php?tags=' + tags;
        hr.open("GET", url, true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.onreadystatechange = function() 
        {
            if(hr.readyState == 4 && hr.status == 200) 
            {   
               var return_data = hr.responseText;
               jsonObj = JSON.parse(return_data);
               document.getElementById("artist_name").innerHTML = jsonObj.artist_name;
               document.getElementById("track_name").innerHTML = jsonObj.track_name;
               document.getElementById("name").title = 'play '+jsonObj.artist_name+' - '+jsonObj.track_name+' radio';

            else
            {

            }
        }

        document.getElementById("track_name").innerHTML = 'loading...';
        document.getElementById("artist_name").innerHTML = '';
        hr.send(null); 
}

<div id="player">
    <div id="playPauseOutDiv" onclick="pause();">

    </div>
        <div id="artist_track">
            <span id="artist_name">gerry rafferty</span> 
            <span id="track_name">baker street</span>
        </div>
    </a>

    <div id="ikinciSatir">
        <a id="changeSong" title="Shuffle" href="javascript:void(0);" onclick="next('3871');">Change</a>
    </div>
</div>

Upvotes: 0

Views: 219

Answers (3)

Chilpol
Chilpol

Reputation: 160

I ran into the same problem just 2 days ago. I was using IE8, and subsequent ajax call wasn't really made but IE8 try to use cache instead.

I found this on ajax documentation page

By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

Try if it helps. Here's the documentation http://api.jquery.com/jQuery.ajax/

Upvotes: 4

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13556

For some reason, IE caches the JSON file and gets 304 Not Modified response instead of 200 OK each time after the 1st one.

The easiest workaround for this that doesn't need to change server side settings is to add some random parameter to the requested URL on each request, e.g.

var url = 'ajax_next_track.php?tags=' + tags + '&nocache=' + Math.random();

Upvotes: 3

Paul Tomblin
Paul Tomblin

Reputation: 182850

The error in IE's debugger says line 40 document.getElementById("name") is null or not an object. I see spans named "artist_name" and "track_name" in your html, but no "name".

Upvotes: 2

Related Questions