AJAX query not working

Question

AliHurworth 0 Light Poster

14 Years Ago

Hi, I'm struggling with writng an AJAX query function. It seemed to work in IE and Opera, but not in Firefox - but now won't seem to fire at all.

The page can be seen at: http://localhost/CRITS/index.php. Waht should happen is that as you click on the top left image, changing Home to Business, the text starting Carlton IT Services should change.

This is the function (I know it repeats itself!):

// JavaScript Document
var root = "images/"
var img = 1
function swapImg(img1){
if(img==0){img1.setAttribute('src',root+img+'.gif');
source = "scripts/home.txt";
img++;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("leader").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",source,true);
xmlhttp.send();}

else{img1.setAttribute('src',root+img+'.gif');
source = "scripts/business.txt";
img--;}


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("leader").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",source,true);
xmlhttp.send();
}

As I say, it did kinda work - but now just swaps the image.

javascript

3 Contributors
11 Replies
141 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by AliHurworth

Graphix 68 ---

14 Years Ago

A few things I noticed:

>> You added no comments in the code to what you are trying to accomplish
>> Your usage of braces is a bit confusing, there are two ways you can properly use braces:

if (...condition...) {
...Do something...
}

or

if (...condition...)
{
...Do something...
}

or even if the code is only one line

if (...condition...) { ...Do something... }

>> Line 2 and 3 - You forgot to end the lines with a ;

You should use alerts to see how far your code works. And also alert what the responseText is of the ajax call.

~G

fxm 23 Posting Pro

14 Years Ago

click on the top left image, changing Home to Business, the text ... should change.

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type="text/javascript">

var img = 0

function swapImg(img1) {

    if (img = 1 - img) {
        var txt = "scripts/business.txt"
    } else {
        var txt = "scripts/home.txt";
    }

    img1.setAttribute('src', "images/" + img + '.gif');

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("leader").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", txt, true);
    xmlhttp.send();

}
    </script>
    <title></title>
  </head>
  <body>
    <img src="" width="100" height="100" onclick="swapImg(this)">
    <div id='leader'>home</div>
  </body>
</html>

corrects various problems. It should be easier to maintain and [except for the assignment trick at line 12] more readily understood.

fxm 23 Posting Pro

14 Years Ago

:)

Perhaps then you will also be interested in this replacement for lines 12-16

var txt = "scripts/" + ((img = 1 - img)? "business.txt" : "home.txt");

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AliHurworth 0 Light Poster · Answer 1 · 2010-06-17T02:39:24+00:00

@fxm

the assignment trick at line 12

- I have never seen that before!

AliHurworth 0 Light Poster · Answer 2 · 2010-06-17T05:38:56+00:00

fxm,
cool - however, it still isn't working.

Adding alerts, as suggested by graphix, seems to suggest that the XMLHttp Object is being created each time the image is clicked, but not altered by the onreadystatechange.

I'll post my implementation of your code for clarity:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome | | Carlton Rigby IT Services</title>
<link href="CRITS1.css" rel="stylesheet" type="text/css" />
<script src="scripts/toggle.js" type="text/javascript"></script>
<!--<script src="scripts/swapimg.js" type="text/javascript"></script>-->
<style type="text/css">
<!--
h2 {
	color: #000;
}
-->
</style>
<script type="text/javascript">

<!--
var img = 0;

function swapImg(img1) {

    if (img = 1 - img) {
        var txt = "scripts/business.txt"
    } else {
        var txt = "scripts/home.txt";
    }

    img1.setAttribute('src', "images/" + img + '.gif');

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        
		xmlhttp = new XMLHttpRequest();
		alert ("XMLHttp okay");
		

    } else { // code for IE6, IE5
        alert ("Okay");
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			alert ("function fired");
			        document.getElementById("leader").innerHTML = xmlhttp.responseText;
					}
    }

    xmlhttp.open("GET", txt, true);
    xmlhttp.send();

}
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].display = iState ? "block" : "none";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.display = iState ? "block" : "none";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.display = iState ? "block" : "none";
    }
}
// -->
</script>

</head>

<body class="body">
	<div id="container">
	  <div id="header">
        	<div id="hdrtxt" style="float:left; color: #F00;" >
            
        		<img id="img1" name="img1" src="images/0.gif" width="151" height="80" alt="home or business user" style="float:left; cursor:pointer" onClick="swapImg(this)"/>
        </div>
            <div id="panic" style="float:right;">
                <a href="#" onMouseOver="toggleBox('chat',1);"><img src="images/panic_anim.gif" width="100"></a>
        </div>
            <div id="chat">
            <img src="images/livezilla_01_1.gif" /> 
            </div>
            <div id="news" style="clear:both;">SPECIAL OFFER: Subscribe to our newsletter and get a PC Check-up half price!
     
            </div>
      </div> 
<div id="content">
                <div id="nav"><script type="text/javascript" >alert ("start");</script>
                  <?php include("nav.php"); ?>
                </div>
        <div id="maintxt" >
        	
          <h2 id="leader" name="leader">Carlton IT Services provides PC support for small businesses, and home-users like you. <br />We come to you!</h2>
          <div id="intro">
          	<div id="introtxt">
          	<h3>Our Commitment to you.</h3>
We know computers can be confusing and expensive, so we guarantee three things:<br />
<strong>Convenience</strong> - we will come to see you and if possible make any repairs where the computer is.<br />
<strong>Transparency</strong> - explanations of everything we plan to do, with an emphasis on making your options clear.<br />
<strong>Enthusiasm</strong> - we love computers! Hopefully, we can help you to love yours too!
			</div>
            <?php include("panels.php"); ?>
          </div>
          </div>
          <div><?php include("footer.php");?>
          </div>
       </div>         
   	  </div>
</div>
    
</body>
</html>

fxm 23 Posting Pro · Answer 3 · 2010-06-17T06:08:12+00:00

the XMLHttp Object is being created each time the image is clicked, but not altered by the onreadystatechange.

Are you trying to test on your desktop?
There are browser-dependent issues in security settings and the .status code.
Which browser(s) are you using for testing?

AliHurworth 0 Light Poster · Answer 4 · 2010-06-17T06:22:52+00:00

It is on my desktop, running in IE8, Firefox 3 and Opera 10. Also Safari and Firefox for Mac, not sure which version. The server is WAMPServer...

What are the issues?

fxm 23 Posting Pro · Answer 5 · 2010-06-17T06:24:22+00:00

The code you posted works here exactly as you intend: the

alert ("function fired");

appears and the page changes as expected.

However, there is a caveat: testing on my desktop (XP SP3) does require one change to the code. The condition at line 43 must be changed to

if (xmlhttp.readyState == 4)

Reminder: this is for desktop testing purposes only; the code on the site is not to be changed.

fxm 23 Posting Pro · Answer 6 · 2010-06-17T06:39:20+00:00

on my desktop, running in IE8, Firefox 3 and Opera 10. Also Safari and Firefox for Mac

The testing-only change to the .readyState/.status condition at line 43 will take care of those browsers on the Windows desktop (plus Safari(pc); I don't know about Mac browsers.

Note: even with that change, Chrome won't work on the Windows desktop; its security model (which I have never bothered to figure out how to modify, if it even can be) blocks access to local files.

AliHurworth 0 Light Poster · Answer 7 · 2010-06-17T06:43:16+00:00

Hmmm, it does indeed now work okay in IE8 on Vista. Not Firefox, and now not Opera. Thanks for your help - will see if I can get to the bottom of it!

AliHurworth 0 Light Poster · Answer 8 · 2010-06-17T06:47:25+00:00

Ha, you beat me to it - it does work on Chrome (at http://www.holtworth.net/crits/) as is - I'll try it without the HTTP status confirmation...