/    Sign up×
Community /Pin to ProfileBookmark

Flickering AJAX

I’m new at AJAX so please excuse dumb errors. I’ve got an image that when you roll over certain parts of it the image will change and the contents of a div will also change. The image is flipping using standard javascript, but the contents of the div is being changed by AJAX. In Safari none of it works. On the PC IE6, Firefox 1, Netscape, and Mozilla the image flips out fine, but the contents of the div flickers when it changes. Can anyone tell me how to keep it from flickering and how to make it work in Safari?

Here’s the image code in my ASP page.

[CODE]
<img id=”Nav” src=”../Images/navbar.jpg” alt=”” height=”450″ width=”208″ usemap=”#navbar” border=”0″ />
<map name=”navbar”>
<area shape=”rect” coords=”16,31,55,43″ alt=”” onmouseover=”cmdNavOver(‘pics’)”/>
<area shape=”rect” coords=”36,86,105,100″ alt=”” onmouseover=”cmdNavOver(‘calendar’)”/>
<area shape=”rect” coords=”50,149,134,163″ alt=”” onmouseover=”cmdNavOver(‘request’)”/>
<area shape=”rect” coords=”36,218,143,231″ alt=”” onmouseover=”cmdNavOver(‘contact’)”/>
<area shape=”rect” coords=”34,285,134,300″ alt=”” onmouseover=”cmdNavOver(‘refer’)”/>
<area shape=”rect” coords=”50,348,105,363″ alt=”” onmouseover=”cmdNavOver(‘extras’)”/>
<area shape=”rect” coords=”8,405,55,419″ alt=”” onmouseover=”cmdNavOver(‘news’)”/>
<area shape=”circle” coords=”72,413,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘news’)”/>
<area shape=”circle” coords=”121,358,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘extras’)”/>
<area shape=”circle” coords=”153,295,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘refer’)”/>
<area shape=”circle” coords=”164,226,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘contact’)”/>
<area shape=”circle” coords=”154,156,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘request’)”/>
<area shape=”circle” coords=”121,94,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘calendar’)”/>
<area shape=”circle” coords=”72,39,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘pics’)”/>
</map>
[/CODE]

Here’s the Javascript / AJAX code that’s in a JS file.

[CODE]
var xmlHttp
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
function cmdNavOver(x){
var a = “../Images/navbar_” + x + “.jpg”;
document.getElementById(“Nav”).src= a;

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert (“Your browser does not support AJAX!”);
return;
}
var url=”/Pages/” + x + “_blurb.html”;
xmlHttp.onreadystatechange=cmdNavOverStateChanged;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}
function cmdNavOverStateChanged(){
if (xmlHttp.readyState==4){
document.getElementById(“insides”).innerHTML=xmlHttp.responseText;
}
}
[/CODE]

Let me know if you need something that I didn’t post.

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@nbcrockettauthorJul 18.2007 — Anyone out there that can help.
Copy linkTweet thisAlerts:
@pugs421Jul 18.2007 — Can you provide a URL of a live example?
Copy linkTweet thisAlerts:
@pugs421Jul 19.2007 — I don't see any flicker. I am using IE6.

As for safari, you may want to consider using an AJAX library that someone has already created. I wrote my own, so I don't know what to recommend. There's a bunch out there like prototype.js, mootools might have Ajax support.

I am leaving for the night. Do you get a response in safari (alert(xmlHttp.responseText))? Does the ready state ever hit 4 in safari? These are the questions you should ask yourself, and provide in your post for more helpful assistance.
Copy linkTweet thisAlerts:
@nbcrockettauthorJul 19.2007 — In Safari I've narrowed down the problem to a line of code where it just stops. At this line, [COLOR="Red"]xmlHttp=new XMLHttpRequest();[/COLOR], in the GetXmlHttpObject function the browser stops processing the javascript. In theory it should continue and the user should get the "Your browser does not support AJAX" alert. I've also narrowed down the browser version having the problem, it seems that only version 1.0.3 has this issue. From what I've read online this version of Safari doesn't accept the XMLHttpRequest object.
Copy linkTweet thisAlerts:
@pugs421Jul 19.2007 — Here's why nothing happens in your legacy version of safari which does not support the XMLHttpRequest object. (see comments)


[CODE]


function GetXmlHttpObject(){
var xmlHttp=null;
try{ //A try means that if an error occurs the script will proceed to the 'catch'. in safari...an error does occur.
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){ //so then we arrive here.
// Internet Explorer
try{//you then instruct the browser to "try" somthing else (which also fails)
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){//so then we arrive here. .. and fail again
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp; //now we return null.
}

[/CODE]


I said in my previous response that you should look towards an Ajax class (library). Why? Because this isn't new. People have already found common design patterns and problems and updated their libraries accordingly. You will get past this problem, and then there will be another. For me, it was pooling multiple http requests. Then it was the memory leaks in internet explorer 6 (and so on).

In any event, here is a snippet of the library that I use which relates to how you are creating a reference to the XMLHHTP object.

This was progressed incrementally, and is probably not the best (cleanest code) out there that relates to your problem.

[CODE]
_AjaxCall.prototype.createXMLHttp = function(){
var cTranslateThis01 = "Your web browser does not support this feature. Please consider downloading the newest version of Microsoft Internet Explorer or another modern web browser.";
var errNotSupported = cTranslateThis01;
var isIE = (navigator.appName == "Microsoft Internet Explorer" ? true : false); // I dind't add this until IE7, which now supports XMLHttpRequest
if(isIE){
try{
var xmlhttp = new XMLHttpRequest(); //first try this in case IE7
return xmlhttp;
}catch(e){
var MSXML_XMLHTTP_PROGIDS = ['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP']; //first try all of these for <IE7 starting with the best possible and working down.
for (var i=0;i < MSXML_XMLHTTP_PROGIDS.length;i++) {
try {
var xmlhttp = new ActiveXObject(MSXML_XMLHTTP_PROGIDS[i]);
return xmlhttp;
} catch (e) {}
}
}
}else{
try{
var xmlhttp = new XMLHttpRequest();
return xmlhttp;
}catch(e){}
}
alert(errNotSupported);
return false;
}

[/CODE]


Enjoy.
×

Success!

Help @nbcrockett spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @junehugh,
tipped: article
amount: 500 SATS,

tipper: @buildinteractive,
tipped: article
amount: 1000 SATS,

tipper: @farhadmalegam,
tipped: article
amount: 1000 SATS,
)...