AJAX Iframe Refresh?

Lets say that I have a page called blah.pl that I wanted to display on a page using an Iframe. The thing is, I'd like blah.pl to refresh every 2 seconds.

In the past, I've used the following script... But using this script caused everyone's Google Chrome browser to freak out:

                                    <script type="text/javascript">
                                                                                          
                                                                                          
      function Ajax(){
      var xmlHttp;
      try{      
            xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
      }
      catch (e){
            try{
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
            }
            catch (e){
                try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (e){
                        alert("No AJAX!?");
                        return false;
                  }
            }
      }

      xmlHttp.onreadystatechange=function(){
      if(xmlHttp.readyState==4){
            document.getElementById('FP_NEW_MEM2').innerHTML=xmlHttp.responseText;
            setTimeout('Ajax()',2000);
      }
      }
      xmlHttp.open("POST","chat_search.pl?method=all?rnd="+Math.random(),true);
      xmlHttp.send(null);
      }

      window.onload=function(){
      setTimeout('Ajax()',2000);
      }
      </script>
                                                                                          <div id="FP_NEW_MEM2">

<p align="center"><img border="0" src="ajaxloader3.gif" width="128" height="15"></p>
                                                                                          </div>


Is this script about as good as it gets? Is there a way to make this script work better? Is there an alternative to this script?
ehipassikoAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
from what you posted, the problem is the url you are using:
chat_search.pl?method=all?rnd=

You should have only ONE question mark. The second question mark should be an ampersand.

Also, instead of Math.random use a timestamp.

xmlHttp.open("POST","chat_search.pl?method=all&rnd="+(new Date()).valueOf() ,true);
0
 
leakim971PluritechnicianCommented:
Hello ehipassiko,

The code work fine for me on Chrome.
Nothing else in your page ?

You may initialize xmlHttp one time (global var).

Regards.
<script type="text/javascript">
var xmlHttp;
function Ajax(){
	xmlHttp.onreadystatechange=function() {
		if(xmlHttp.readyState == 4) {
			document.getElementById('FP_NEW_MEM2').innerHTML = xmlHttp.responseText;
			setTimeout('Ajax()', 2000);
		}
	}
	xmlHttp.open("POST","chat_search.pl?method=all?rnd="+Math.random(),true);
	xmlHttp.send(null);
}
window.onload=function(){
	try {
		xmlHttp = new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
	setTimeout('Ajax()',2000);
}
</script>

Open in new window

0
 
phpsalesCommented:
You can minimize your AJAX and refresh code with JQuery. Also cross browser safe. See code below:
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");//fetch jquery

//fetch post ajax and display result
var refreshIDiv = function(){
	$.post("chat_search.pl",{ method:'all', rnd:Math.random() }, function(data){
		$("#FP_NEW_MEM2").html(data);
		setTimeout(refreshIDiv,2000);
	});
}

google.setOnLoadCallback(function(){
	//set timer on page load
	setTimeout(refreshIDiv,2000);
});                                                                                          
            
</script>
<div id="FP_NEW_MEM2"><p align="center"><img border="0" src="ajaxloader3.gif" width="128" height="15"></p></div>

Open in new window

0
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

 
ehipassikoAuthor Commented:
I really like the jquery, and it works... in everything but IE.

It's behaving as if  it's not generating a random number at the end of chat_search.pl - any thoughts?
0
 
phpsalesCommented:
Very strange. According to the JQuery $.post  documentation the POST AJAX is never cached. On top of that you already have a random number in the request parameters that should eliminate a cache load.

URL :http://api.jquery.com/jQuery.post/
Text From Page: "Pages fetched with POST are never cached, so the cache  and ifModified options in jQuery.ajaxSetup()  have no effect on these requests."

If you are using IE 8 I would recommend taking advantage of the new developer console to debug.

http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx


0
 
phpsalesCommented:
Just tested the code in IE 8 with success with a local file that I changed 3 times while the page was loaded in IE. May be another issue at hand here outside of the sample code.
0
 
ehipassikoAuthor Commented:
kinda worked
0
All Courses

From novice to tech pro — start learning today.