X Browser AJAX [Archive] - Dynamic Drive Forums

vwphillips

01-03-2013, 03:21 PM

I have problems with an AJAX script with browsers other than IE or FF

<!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>
</head>

<body>
<a href="ajax1.txt" class="popimg" type="AJAX" rev="ajaxcls" rel="file ajax1.txt" >Ajax 1</a>
<script type="text/javascript">
/*<![CDATA[*/

var Test={

init:function(o){
var cls=o.CommonClassName,clds=document.getElementsByTagName('A'),ary=[];
for (var z0=0;z0<clds.length;z0++){
if (this.cls(clds[z0],cls)){
a=clds[z0];
h=a.href.substring(a.href.lastIndexOf('/')+1);
i=a.tabIndex||101;
ary.push([a,a.href,null,null,a.rel||a.title,a.rev,i,'AJAX']);
}
}
o={
ary:ary,
ld:1000
}
this.ajaxiframe(o);
},

cls:function (obj,nme){
return new RegExp(' '+nme+' ').test(' '+obj.className+' ')
},

// Optional IFRAME and AJAX Code
ajaxiframe:function(o){
for (var iframe,z0=0,z1=0;z0<o.ary.length;z0++){
if (typeof(o.ary[z0][1])=='string'){
this.ajaxexit(o,o.ary[z0],new Date());
this.ajax(o,o.ary[z0]);
return
}
}
},

ajaxexit:function(o,ary,d){
var oop=this;
if (new Date()-d<o.ld){
o.dly=setTimeout(function(){ oop.ajaxexit(o,ary,d); },200);
}
else {
alert('Ajax File Not Found\n'+ary[1].substring(ary[1].lastIndexOf('/')+1));
ary[1]=false;
this.ajaxiframe(o);
}
},

ajax:function(o,ary){
var oop=this,html=false;
if (window.ActiveXObject){
try {
html=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
html=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
else if (window.XMLHttpRequest){
html=new XMLHttpRequest();
}
else {
return false;
}
html.onreadystatechange=function(){ oop.ajaxpopulate(o,ary,html); }
html.open('GET',ary[1]+'?'+new Date().getTime(),true);
try {
html.send(null);
}
catch (e){
}
},

ajaxpopulate:function(o,ary,html){
if (html.readyState==4&&(html.status==200||window.location.href.indexOf("http")==-1)){
html=html.responseText;
if (o&&html){
clearTimeout(o.dly);
ary[1]=document.createElement('DIV');
ary[1].innerHTML=html;
ary[1].className=ary[0].rev;
this.ajaxiframe(o);
alert(html);
}
}
}

}

Test.init({
CommonClassName:'popimg' //(optional) the common class name of the links defining the elements to view. (string, default = images defined by array)

});
/*]]>*/
</script>
</body>

</html>

ajax1.txt

The script allows elements to be displayed in a Pop Up. 
These elements may be: 
IMAGEs, 
HTML coded DIVs, 
IFRAMEs, 
AJAX elements 
or images defined by an array. 
 
The Pop Up is displayed in the center of the page 
on top of an optional 'mask' covering the rest of the page content. 
 
Optional animation allow the Pop Up the be animated open and closed 
and the slide show images to be faded in. 

The Pop Up is defined in the HTML code to provide the maximum flexibility. 
 
The elements are displayed in a 'frame' DIV 
 
An optional control DIV allows the display of: 
slideshow control elements, 
captions, 
a pageing indicator 
and pagination. 
 
Optional persistence restores the last Pop Up on page load.
 
 

any help will be appreciated

jscheuer1

01-03-2013, 06:00 PM

Is there an X browser? If you mean Chrome, it doesn't do AJAX locally. If you want more help I will test out the code in a browser for you if I know what browser you mean and I have it. Better yet, tell me the browser and link to a live test page.

clueful

01-03-2013, 08:34 PM

What is the exact nature of the problem, and what is preventing you debugging it?

vwphillips

01-03-2013, 10:00 PM

If you mean Chrome, it doesn't do AJAX locally.

that seems to be the problem

test page

http://www.vicsjavascripts.org.uk/MagicViewer/ajaxtest.htm

jscheuer1

01-03-2013, 10:59 PM

The script doesn't appear to do anything any differently in any browser (tested in IE 9 in IE 9 and IE 8 modes, Opera, Chrome, and Firefox). When the page first loads there's an alert that has the contents of the external page (ajax.txt) in it. If I click on the link (Ajax 1), I'm taken to that page.

vwphillips

01-04-2013, 12:17 AM

this is what I am using it on

http://www.vicsjavascripts.org.uk/MagicViewer/MagicViewer.htm

jscheuer1

01-04-2013, 01:29 AM

In Chrome, when I first loaded the page I got an error "ms is not defined" on this line:

load:function(o,d){
for (var oop=this,z0=0,z1=0;z0<o.ary.length;z0++){
if (o.ary[z0][3]&&o.ary[z0][3].width<40&&new Date()-o.ld<ms){
o.dly=setTimeout(function(){ oop.load(o,d); },200);
return;
}
}
for (;z1<o.ary.length;z1++){
if ((o.ary[z1][3]&&o.ary[z1][3].width<40)||o.ary[z1][1]===false){
o.ary.splice(z1--,1);
}
}
o.ary[0]?this.ready(o,o.ary):null;
},

And the Ajax 1 link took me to the page. After I hit the back button, if I clicked on Ajax 1 or Ajax 2 I got a nice popup with the text in it.

I then tried clearing the cache and history to see if I could duplicate the problem. I could not. It performed fine. So I'm thinking that first time was a bit of a fluke, perhaps the network was slow. But it might be something more. Even if it's just that, there's probably a way to determine if ms is undefined and to go back and define it before proceeding and/or have a default value for it, rather than throw an error.

vwphillips

01-04-2013, 11:47 AM

line corrected to

if (o.ary[z0][3]&&o.ary[z0][3].width<40&&new Date()-d<o.ld){

If the image has not loaded after o.ld milli seconds the field with the image is removed

Thanks