Solved

Ajax won't work for content change

Posted on 2010-11-18
16
794 Views
Last Modified: 2012-05-10
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
Comment
Question by:duncanb7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
16 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 350 total points
ID: 34168238
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
 
LVL 43

Expert Comment

by:Rob
ID: 34168243
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
 
LVL 13

Author Comment

by:duncanb7
ID: 34168315
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:armchang
ID: 34168324
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
 
LVL 43

Expert Comment

by:Rob
ID: 34168362
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
 
LVL 7

Assisted Solution

by:armchang
armchang earned 150 total points
ID: 34168455
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
 
LVL 13

Author Comment

by:duncanb7
ID: 34168477
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
 
LVL 13

Author Comment

by:duncanb7
ID: 34168590
Dear EE-Adm

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

Duncan
0
 
LVL 43

Expert Comment

by:Rob
ID: 34168697
Author would like to keep the question open
0
 
LVL 7

Assisted Solution

by:armchang
armchang earned 150 total points
ID: 34169131
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
 
LVL 43

Expert Comment

by:Rob
ID: 34169488
0
 
LVL 7

Expert Comment

by:armchang
ID: 34169616
Yes. I've also applied to his code, one which works to his requirements and it makes that a bit different.
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34169658
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
 
LVL 43

Expert Comment

by:Rob
ID: 34169775
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
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 34172297
Thanks
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Make icons act like add/minus for qtys 6 42
Form submit takes only for one form 23 50
Submitting form with no refresh at the end 2 31
Error just appeared 3 23
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question