[RESOLVED] AJAX function just not firing or doing anything

When i run my simple HTML page I've got it so the ajax code builds an XMLHttpRequest onload, and im trying to put data.txt into a <div> called targetDiv. but it doesnt do ANYTHING when i click the button, is there something wrong in this code?

Code:

<html> <body onload= "onLoad()"> <form name="myForm"> <script type="text/javascript"> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET, dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } function maximum() { var x=document.forms.myForm x[0].maxLength="5" } function onLoad() { var d = (new Date() + "").split(" "); document.getElementById('tradeDate').value = d[0]+" "+d[1]+" "+d[2]+" "+d[5]; } </script> <center><h1><u>Trade Buying and Selling Transaction</u></h1></center> <br> </font> <font="Arial" color="white"> <table border="1" align="center"> <td><th>Trade Date: <input id="tradeDate" name="tradeDate" type="text" value=""></th></td> <td><th>Returning Users: <input type="text" name="user" id="return"><br></th></td> <td><th>Trade Reference: <input type="text" name="trade" id="trade"></th></td> </table> </font> <br> <br> <table border="1" align="center"> <tr> <td><th>Buy Currency Code:<input type="text" maxlength="3" onblur = "getData('data.txt','targetDiv')" onkeyup="this.value = this.value.toUpperCase();"></th></td> </tr> <tr> <td><th>Sell Currency Code:&nbsp<input type="text" name="sellcode" id="sellcode" maxlength=3 onkeyup="this.value = this.value.toUpperCase();"></th></td> </tr> </table> <br> <br> <table border="1" align="center"> <td><th>Exchange Rate:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="xrate" id="xrate"></th></td> </table> <br> <br> <table border="1" align="center"> <tr> <td><th>Buy Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="buyval" id="buyval"></th></td> </tr> <tr> <td><th>Sell Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type"text" name="sellval" id="sellval" maxlength=3></th></td> </tr> </table> <br> <br> <table border="1" align="center"> <tr> <td><th>Customer Code:</th></td> <td><th>Settlement:</th></td> </tr> <tr> <td><th><input type"text" name="code" id="code"></th></td> <td><th><input type"text" name="settlement" id="settlement"></th></td> </tr> </table> <br> <br> <table border="0" align="center"> <tr> <td><input type="submit" name="submit" id="submit" align="center" onclick = "getData(http://localhost/ch03/data.txt','targetDiv')"> </td> </tr> </table> <input type = "button" value = "Display Message" onclick = "getData(http://localhost/ch03/data.txt','targetDiv')"> </body> </html>

thanks in advance

You have a slight syntax error in your code:

Code:

if (window.XMLHttpRequest) { XMLHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); }

The variable names should be the same:

Code:

if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); }

Does that help?

nope, nothing still, ill try a different a approach thanks anyway

Take another look at:

Code:

XMLHttpRequestObject.open("GET, dataSource);

Should be "GET"

Secondly:

Code:

XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 { obj.innerHTML = XMLHttpRequestObject.responseText; } }

has an unmatched ) but in any case would better read:

Code:

XMLHttpRequestObject.onreadystatechange = function() { var x=XMLHttpRequestObject;if(x.readyState!=4)return; if(x.status==200 || !x.status) obj.innerHTML = XMLHttpRequestObject.responseText; }

Finally:

Code:

getData(http://localhost/ch03/data.txt','targetDiv')

it has an unmatched ' and change it to:

Code:

getData('http://localhost/ch03/data.txt','targetDiv')

might want to also move the file so you can simply use:

Code:

getData('data.txt','targetDiv')

Still the same, try it for yourself by making it a html and putting a notepad .txt with some text in it the same dir, its so weord because this works:

Code:

<html> <head> <title>Ajax at work</title> <script language = "javascript"> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> </head> <body> <H1>Fetching data with Ajax</H1> <form> <input type = "button" value = "Display Message" onclick = "getData('data.txt', 'targetDiv')"> <input type = "button" value = "Display Message" onclick = "getData('data.txt', 'targetDiv')"> </form> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </body> </html>

run it on a SERVER. If you insist upon testing it on your desktop with IE7 then change:

Code:

if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); }

to:

Code:

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

once you see it works, change it back since the first way is designed for the web while the second way serves IE7 on the file: protocol which is normally denied access yet activex still allows it. Both however allow requests on the http: protocol.

In the future, get used to using:

Code:

/* running locally on IE6,IE7 */ ;/*Gotta love IE's support for Conditional Compilation*/; /*@cc_on if(location.protocol=="file:"){ if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;} if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;} } @cc_off @*/ /* IE7, Firefox, Safari, Opera... the Standard way */ if(!xmlhttp)try{ xmlhttp=new XMLHttpRequest(); }catch(e){xmlhttp=false;} /* IE6 */ if(typeof ActiveXObject != "undefined"){ if(!xmlhttp)try{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xmlhttp=false;} if(!xmlhttp)try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xmlhttp=false;} } /* IceBrowser */ if(!xmlhttp)try{ xmlhttp=createRequest(); }catch(e){xmlhttp=false;}

thanks for your help, but changing it specific to internet explorer doesnt work (and im using IE6) i have no clue why the code doesnt work, its doing something but getting an error, says there is an error with:

yet all this button does is call the text out of data.txt and put it in a div, maybe its where i put it in the code?

Code:

<input type="button" onclick = "getData('data.txt', 'targetDiv')">

yet again heres my updated code: i feel like giving up :(

Code:

<html> <head> <title>Trading Currencies</title> <script type="javascript"> <script language = "javascript"> var XMLHttpRequestObject = false; XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } <form id="my form"> </script> <input type="button" onclick = "getData('data.txt', 'targetDiv')"> </form> <script type="text/javascript"> function onLoad() { var d = (new Date() + "").split(" "); document.getElementById('tradeDate').value = d[0]+" "+d[1]+" "+d[2]+" "+d[5]; with(new Date){ dateStr = [getDate(),getMonth()+1,getFullYear()].join('/'); document.getElementById('tradeDate').value = dateStr; } } </script> </head> <body onload= "onLoad()"> <center><h1><u>Trade Buying and Selling Transaction</u></h1></center> <form name="myForm"> <br> </font> <font="Arial" color="white"> <table border="1" align="center"> <td><th>Trade Date: <input id="tradeDate" name="tradeDate" type="text" value=""></th></td> <td><th>Returning Users: <input type="text" name="user" id="return"><br></th></td> <td><th>Trade Reference: <input type="text" name="trade" id="trade"></th></td> </table> </font> <br> <br> <table border="1" align="center"> <tr> <td><th>Buy Currency Code:<input type="text" maxlength="3" onkeyup="this.value = this.value.toUpperCase();"></th></td> <td> <div id="targetDiv"> <p>The fetched data will go here.</p> </div> </td> </tr> <tr> <td><th>Sell Currency Code:&nbsp <input type="text" name="sellcode" id="sellcode" maxlength=3 onkeyup="this.value = this.value.toUpperCase();"></th></td> </tr> </table> <br> <br> <table border="1" align="center"> <td><th>Exchange Rate:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="xrate" id="xrate"></th></td> </table> <br> <br> <table border="1" align="center"> <tr> <td><th>Buy Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="buyval" id="buyval"></th></td> </tr> <tr> <td><th>Sell Value:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type"text" name="sellval" id="sellval" maxlength=3></th></td> </tr> </table> <br> <br> <table border="1" align="center"> <tr> <td><th>Customer Code:</th></td> <td><th>Settlement:</th></td> </tr> <tr> <td><th><input type"text" name="code" id="code"></th></td> <td><th><input type"text" name="settlement" id="settlement"></th></td> </tr> </table> <br> <br> <table border="0" align="center"> <tr> <td><input type="submit" name="submit" id="submit" align="center"> </td> </tr> </table> </form> </body> </html>

Thanks for helping so far though mate, really appreciate it:o

It may also be that the text file it's grabbing needs to be served with a content type of text/xml. The .txt file is being served with a text/plain content type, and perhaps that's the problem.

Also, the JavaScript making the AJAX call must be on the same domain as the URL to the AJAX call. For example, a page on www.mysite.com cannot have a function in a JavaScript hosted on mysite.com make an AJAX call to www.google.com.

If the page on www.mysite.com linked to an external javascript file on Google, then www.mysite.com can make AJAX calls to google.com. This is how google maps work. You might be running into domain permission problems.

Code:

<script type="javascript"> <script language = "javascript"> ... <form id="my form"> </script>

Error: getData is not defined
Source File: http://localhost/xxTrade/trade.htm
Line: 1

This is the onlt thing going wrong i think, but it is defined, or does it have to be a variable?

What I'm saying is to replace:

Code:

<script type="javascript"> <script language = "javascript"> ...code defining getData... <form id="my form"> </script>

with:

Code:

<script type="text/javascript"> ...code defining getData... </script>

since getData is never defined due to invalid HTML syntax.

Thanks, I changed it to that, and now when i click there is no error, but i still doesnt do anything, it may be that i have placed the button in the wrong place in the code, is there anywhere specific that the call wouldnt work?

Your code has come a long way... what does it look like now?

Although I suspect that you are running it server-less and you should replace:

Code:

if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){

with:

Code:

if(XMLHttpRequestObject.readyState==4 && (!XMLHttpRequestObject.status || XMLHttpRequestObject.status==200)){

Wooooo

OMG you legend that worked, yes its come a long way and now it works! thanks so much for help: even though it gets harder from here, and instead of getting that text from a .txt file i have to get it from a database now :(

but this is a great improvement thank you