• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 821
  • Last Modified:

Ajax won't work for content change

Dear Expert,

Recently I am doing Ajax tutorial  from http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
and  i found my IE7 window with the code is not reacted to the content change of the txt  file I made
that is supposed  to be  opened by Ajax code for data update, I try it many time for clicking button
to load ajax function &  always display the previous content of the file  until I quit IE7 window and
restart IE7 again OR I go to web the txt file once directly in IE7 and then run the code again , after doing that,
the content change is  reacted. So I go to swtich to IE6 XP in other computer , it also have same problem.
That is big problem for me to go ahead to use Mootools library or contiune Ajax data update works

Please Advise, and if possible run it at your side and test it
If you "NOT" understand my question, please don't hesitate to let me know

Recently I found a lot of content "NOT" change issue by Ajax when using mootools library so that
is why I go back to fundumental debugging check with the tutorial again. It seems it is not
virus issue since both IE7 and IE6 computer also the same issue Probably it is xmlhttp open file issue
with reload or refresh .


Duncan


html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
alert("IE7+");
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("IE6-5");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://www.mywebsite.com/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Open in new window

ajax-info.txt
0
duncanb7
Asked:
duncanb7
  • 6
  • 5
  • 4
3 Solutions
 
RobOwner (Aidellio)Commented:
Duncan,

Internet Explorer caches the ajax requests, MEANING it thinks your just getting the same thing again and won't update your webpage.  so to fix it using the code above you will need to change the following line :


xmlhttp.open("GET","http://www.mywebsite.com/ajax_info.txt",true);


to


xmlhttp.open("GET","http://www.mywebsite.com/ajax_info.txt?ignoreMe"+new Date().getTime(),true);
0
 
RobOwner (Aidellio)Commented:
and this works for me in Internet Explorer and Firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="?" />
<meta name="author" content="?" />
<meta name="Keywords" content="?" />
<meta name="Description" content="?" />
<script type="text/javascript">
<!--
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
alert("IE7+, Firefox, Chrome, Opera, Safari");
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("IE6-5");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://localhost/screen_update/sales1.htm?ignoreMe"+new Date().getTime(),true);
xmlhttp.send();
}
-->
</script><link rel="shortcut icon" href="http://?.ico" />
</head>

<body>

<button type="button" onclick="loadXMLDoc()">Change Content</button>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>

</body>
</html>

Open in new window

0
 
duncanb7Author Commented:
You always say cache, I  dont' understand it , just know cache memory on computer
What does it imply in AJax.

I will try the code
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
armchangCommented:
Hi,

I've found out what's causing you your trouble. All of the code you posted works just that you have to refer to the correct file/ filename, i.e. you should change:

http://www.mywebsite.com/ajax_info.txt --> http://www.mywebsite.com/ajax-info.txt

I've traced your code and if it can't find the file it will not get inside readystatechange. So please check if your filename is correct. Note the underscores and dashes.
0
 
RobOwner (Aidellio)Commented:
Cache is just a copy of something you have already downloaded.  it is used to save time downloading it again.  if you keep calling the same url using ajax then internet explorer thinks you're downloading the same thing again and won't do it.  you need to force IE to download it by making the url unique and you do that by adding the time to the end of the request
0
 
armchangCommented:
Oh,

One thing, I've experienced is that. If you want to force to load/refresh the page with new settings from javascript, you can append into the url string a ?load=1. This is only applicable if you have new changes from your page i.e. you can skip this if you're already done with your code and never have to refresh your code changes.
0
 
duncanb7Author Commented:
The question is

1- Don't use underscore for file name in future, RIght ? What is harmful using underscore  in filename

I will ask you later onfor cache topic that is interesting, I also experience a lot of issue like using reload
button

Thanks

DUncan
0
 
duncanb7Author Commented:
Dear EE-Adm

I click wrong button, please help to re-open this thread for re-credit process

Duncan
0
 
RobOwner (Aidellio)Commented:
Author would like to keep the question open
0
 
armchangCommented:
Hi Duncanb7,

After a long try, it's finally done. I've modified your code to accomodate cache problem from IE. The code appends the "?loaded=<counter>" into the location of the .txt file so that IE always reload the new contents and it works! I've tried using the setRequestHeader() solution but no luck there. So try the code:

<html>
<head>
<script type="text/javascript">
url = "?loaded=";
counter = 0;

function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
alert("IE7+");
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("IE6-5");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }


xmlhttp.open("GET","ajax-info.txt"+url,true);
xmlhttp.setRequestHeader("Cache-Control", "no-cache");
xmlhttp.send();
counter = counter+1;
}

function getUrl()
{
	return url+counter.toString();
}
</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc(getUrl());">Change Content</button>

Open in new window

0
 
RobOwner (Aidellio)Commented:
0
 
armchangCommented:
Yes. I've also applied to his code, one which works to his requirements and it makes that a bit different.
0
 
duncanb7Author Commented:
Solution-1, forget to tell you,  xmlhttp.open("GET","http://localhost/screen_update/sales1.htm?ignoreMe"+new Date().getTime(),true); that  also work for me already.

Solution-2,  it works after back put  var  to count=count+1, i.e var count=count+1 with your last version code

COuld you answer me the following before closing this thread.


Qusetion-1, don't user underscore in the future for filename or doesn't care ?
QUestion-2, how it works in Solution-2, let me try to mention it,  use the new  URL = ajax_info.txt?%load=1 to cheat
IE not cache memory in my PC  and go to load the new url
Question-3 Why URL in internet will treat ajax_info.txt 's IP address same as ajax_infor.txt?load=1 becuae
putting  "?" inside so ingore other char. OR when internet could not find out  ajax_infor.txt?load=1 in mywbeiste
, it will change it to closer one , ajax_info.txt . Please advise


0
 
RobOwner (Aidellio)Commented:
Q1)  Underscores are fine to use as are dashes, what @armchang is saying is that the filename is different to the one you were trying to load.  ajax-info.txt is different to ajax_info.txt

Q2) That's right though i'm not sure that would work 100% of the time because the url never changes, which is why i suggested you put the current time on the end of the url as it makes each and every ajax call unique

Q3) putting ? at the end of the url is saying to the server that you are sending some variables and information.  it will always load ajax_infor.txt.  Because ajax_infor.txt is not a script the variables/information is not processed.  If you instead used a server side script such as PHP or ASP then in that script you could access the variables and do something with them.  It is not relevant in your case and it is only used to fool IE into not caching the data
0
 
duncanb7Author Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now