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>
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/
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();
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".
Related
I'm building a web site which lets users post requests on site and others to respond. I have built an app-like form to collect information. In that form I need to display 3 pages.
So I have created one page with the from and and a JavaScript file to handle these 3 pages. Other form-pages are designed separately (HTML only).
I'm planning to load the other two pages into that 1st page with XMLHttpRequest and it works.
But I need to take 3rd page into the 1st form-page (display the 3rd page of form) and change the innerHTML of that 3rd page. I tried it with
function setFinalDetails() {
document.getElementById("topic").innerHTML = object1.start;
}
//creating a XMLHttpObject and sending a request
//requiredPage is the page we request.
//elementId is the element we need to display
function requestAPage(requiredPage) {
selectElementId(requiredPage);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
m = xhttp.responseXML;
y = m.getElementById(elementId).innerHTML;
document.getElementById("hireForm").innerHTML = y;
//m is a global variable
//m is the object recieved from XMLHttpRequest.
//it is used to change the innerHTML of itself(m) and display.
//y is displaying the 3rd page in the form-page one("id =hireForm")
return m;
}
};
xhttp.open("GET", requiredPage, true);
xhttp.responseType = "document";
xhttp.send();
}
but that gives an error:
Cannot set a .innerHTML property of null
find my work on https://github.com/infinitecodem/Taxi-app-form.git
It it hard to help you in detail because we do not have a way to reproduce your error and test your code. I can suggest you to use a service like plunker to share your code. I do not know if this service will support to do some xhrRequest on other files in its working tree, you can try.
Your error message seems to reveal that one of your document.getElementById(...) is returning null instead of the html elt you want (so the id do not exist in the page).
But again without a way to test, it is hard to help you more sry. I really encourage you to try to share a link to a service (like plunker, etc) that will help others to play with your use case.
I'm trying to retrieve the online status of users from a chat client called IMVU(the regular little image holder by the profile pictures isn't enough, I'm making something bigger, so I need some signal), and the way to do that is use this line of the user ID 1111111 for example:
http://avatars.imvu.com/catalog/web_status_updater.php?ol=1&list=1111111
It returns a php file containing a line of JSON. I need that whole line of text put into a javascript variable so I can use it.
I need to use this in a script I'm making, but I can't seem to get it to work. I've tried lots of things, the closest seems to be this one:
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
readTextFile("http://avatars.imvu.com/catalog/web_status_updater.php?ol=1&list=1111111");
(I'll change the alert(allText); to return allText; or return rawFile.responseText; when I get this experiment to work first and make sure that the text is actually stored and displayed.)
What happens is that the alert shows up blank. Just a white box, that's all. My prior attempts had the box show up and it said "undefined", but now it's doing something I guess? Why is it blank though? And how do I fix it?
EDIT:
It works in IE but not Firefox apparently.
I believe the problem here is the Same Origin Policy. You are attempting to make a request to a domain that is different than the one that originated the request.
Some websites specify headers which allow this, but the headers returned here are missing the Access-Control-Allow-Origin header.
One way around this is to use JSON-P on servers that support it.
Try this:
jQuery.ajax({
url:"http://avatars.imvu.com/catalog/web_status_updater.php?ol=1&list=1111111",
dataType:"jsonp"
})
.done(function(data) {
console.log(data)
});
When I type a certain URL in FF, I get the XML returned displayed on the screen, so the web service is apparently working. However, when I try to access it from a local HTML document running JS, I get unexpected behavior. The returned code is "200 OK" but there's no text (or rather it's an empty string) nor xml (it's null) in the response sections according to FireBug.
This is how I make the call.
var httpObject = new XMLHttpRequest();
httpObject.open("GET", targetUrl, true);
httpObject.onreadystatechange = function () {
if (httpObject.readyState == 4) {
var responseText = httpObject.responseText;
var responseXml = httpObject.responseXML;
}
}
httpObject.send(null);
Why does it happen and how do I tackle it?
That may be an HTTP header problem (e.g. missing Accept header); observe the headers sent by FF (you can use Firebug for that) and try to replicate them in your script (setRequestHeader).
Otherwise, that may be a "same origin policy" problem.
I need to send an ajax request to a webserver "http://examples.com/ajax" the response will be the html of a <div> and it will be inserted to an existing <div id="holder">. What's the simplest, smallest way to write this in javascript? without using jQuery?
It only needs to support the latest version of chrome.
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
//Is request finished? Does the requested page exist?
if(req.readyState==4 && req.status==200) {
//Your HTML arrives here
alert(req.responseText);
}
}
req.open("GET","http://examples.com/ajax.php",true) //true indicates ASYNCHRONOUS
req.send(null);
This solution uses get, so you've got to add variables using ? and & to your URL (e.g. http://examples.com/ajax.php?foo=bar&blah=blee.
If you want to do it using post, run a few with get and then this article is useful.
I have a page with a dropdown. The onchange event calls a Javascript function (below) that includes an Ajax block that retrieves data and populates a TEXTAREA. On the surface, everything works.
I can select any item in the list with no problems. However, if I select an item that has previously been selected, the Ajax call appears to hang. It looks like maybe some weird caching issue or something. If I close the browser and reload the page, all items work again until I re-select.
I've tested for the readyState and status properties when it's hanging, but I get nothing. Am I missing something?
The page is a client project behind authentication so I can't post a URL, but here's the Ajax code. This is in a PHP page, but there's no PHP script related to this.
function getText( id ) {
var txt = document.getElementById( "MyText" );
txt.disabled = "disabled";
txt.innerText = "";
txt.className = "busy";
var oRequest = zXmlHttp.createRequest();
oRequest.open( "get", "get_text.php?id=" + id, true );
oRequest.send( null );
oRequest.onreadystatechange = function() {
if( oRequest.readyState == 4 ) {
if( oRequest.status == 200 ) {
txt.innerText = oRequest.responseText;
} else {
txt.innerText = oRequest.status + ": " + oRequest.statusText;
}
txt.disabled = "";
txt.className = "";
oRequest = null;
}
}}
Edit: The code block seems a little quirky; it won't let me include the final } unless it's on the same line as the previous.
You're setting the onreadystatechange function after you're sending the request. If it takes a long time (ie if it goes to the server), this will probably work, since there will be a delay before it tries to call the callback.
If the page is cached, though, the browser is probably trying to call onreadystatechange immediately in the send method. Move your assignment to onreadystatechange to before the open/send code.
HI,
The caching is due to the same url thats being called repeatedly. If you change the URl dynamically then this issue can be rsolved. Something like by adding a querystring with the current time with the request ( or any random renerated number ) you can change the url without affecting the result
I would guess that you are running into a caching issue. I have noticed that Internet Explorer is more aggressive at caching ajax calls than Firefox is. One way to be sure of what is happening is to use Fiddler2. This application monitors your web traffic, and you would be able to see if the browser is making a request or not, and what cache headers are coming back on the responses that you do get.
You can download fiddler2 from http://www.fiddlertool.com/fiddler/