Solved

Ajax won't work for content change

Posted on 2010-11-18
16
777 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
  • 6
  • 5
  • 4
16 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 
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 42

Expert Comment

by:Rob Jurd, EE MVE
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 42

Expert Comment

by:Rob Jurd, EE MVE
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 42

Expert Comment

by:Rob Jurd, EE MVE
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 42

Expert Comment

by:Rob Jurd, EE MVE
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now