[vitron]

Hi there guys
Im making a javascript tool for my site, and I thought Id make the tool portable (I can easily drag it from my current project, and with little effort, add it into another project), so I decided to add new ajax function set to it, so it wont get any ajax problems if my new project doesn't use ajax. The problem is, its returning nothing, and sometimes it returns 'undefined'. I've isolated the problem to when it gets a response, but cant figure out what the problem is.

Ajax Source Code:-

Code:

function runAjaxTask(){
	this.randomString = randomString;
	this.NewXmlHttpObject = NewXmlHttpObject;
	this.getContent = getContent;
	
	function randomString(maxLength){
		var chars = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
		var stringLength = maxLength;
		var outputString;
		var i = 0;
		while(i < stringLength){
			outputString += chars[Math.round(Math.random()*35)];
			i++;
		}
		return outputString.replace("undefined","");
	}
	function NewXmlHttpObject(){
		var newxmlhttp = null;
		try {
			newxmlhttp = new XMLHttpRequest();
		}
		catch(ie){
			try {
				newxmlhttp = new window.ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e){
				newxmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		if(newxmlhttp === null){
			alert("Your browser does not support AJAX!");
			return 0;
		} else {
			return newxmlhttp;
		}
	}
	function getContent(url,toid){
		var xmlhttp = this.NewXmlHttpObject();
		var ajaxURL = url+'&rid='+this.randomString(20);
		xmlhttp.open("GET", ajaxURL, true);
		xmlhttp.onreadystatechange = function(){
			if (xmlhttp.readyState === 4){
				if(xmlhttp.status === 200){
					var ajaxResponse = xmlhttp.responseText;
					document.getElementById(toid).innerHTML = ajaxResponse;
				} else {
					document.getElementById(toid).innerHTML = "Problem retrieving data (URL: "+ajaxURL+"):-" + xmlhttp.statusText;
				}
			}
		};
		xmlhttp.send(null);
	}
}
//var ajax = new runAjaxTask();

hope someone can help me, and quick please, im actually running past my deadline for this project, so I need to fix this problem quick

[job0107]

This line of code:

Code:

if(newxmlhttp === null){

Should be:

Code:

if(newxmlhttp == null){

Generally when you pass GET values, the first one starts with a question mark.
So I would assume this line of code:

Code:

var ajaxURL = url+'&rid='+this.randomString(20);

Should be:

Code:

var ajaxURL = url+'?rid='+this.randomString(20);

Unless you are including the first name/value pair with the url variable.

And these two lines of code have the same problem as the first problem:

Code:

if (xmlhttp.readyState === 4){                
           if(xmlhttp.status === 200){

Should be:

Code:

if (xmlhttp.readyState == 4){                
           if(xmlhttp.status == 200){

[vitron]

The reason my if statements all have '===' is because its the correct javascript syntax, but it really doesn't matter if you use '==' or '===', I use it because I want to make sure my code runs perfectly on as many javascript browsers as possible
and yes, '?' is always sent to 'ajaxURL' by 'url' in my scripts:-

Code:

var ajax = new runAjaxTask();
ajax.getContent('run.php?task=checkprofiles&action=run','statusBox');

also, I forgot to mention in the first post, but my code is 100% syntax correct, so there is no errors in the way my coed has been displayed
if you don't believe me, check out using this tool:- JavaScript Lint
if you run my code with '==' instead of '===' you get the error messag:

lint warning: comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==)

[job0107]

The problem is, its returning nothing, and sometimes it returns 'undefined'.

The only way I have been able to get it to return 'undefined' is if I don't assign any value to "var ajaxResponse"

And if I assign a value to it, "var ajaxResponse = xmlhttp.responseText;",
the worst I get back is nothing.
Unless run.php doesn't exist, then I get back "Problem retrieving data (URL: run.php?task=checkprofiles&action=run&rid=tcjsloup 65e2omqccqx1):-Not Found".

So the problem doesn't seem to be in this bit of code.

[job0107]

Originally Posted by vitron

The reason my if statements all have '===' is because its the correct javascript syntax, but it really doesn't matter if you use '==' or '===', I use it because I want to make sure my code runs perfectly on as many javascript browsers as possible
and yes, '?' is always sent to 'ajaxURL' by 'url' in my scripts:-

Code:

var ajax = new runAjaxTask();
ajax.getContent('run.php?task=checkprofiles&action=run','statusBox');

also, I forgot to mention in the first post, but my code is 100% syntax correct, so there is no errors in the way my coed has been displayed
if you don't believe me, check out using this tool:- JavaScript Lint
if you run my code with '==' instead of '===' you get the error messag:

This warning only applies to this line of code:

Code:

if(newxmlhttp === null){

It does not apply to these lines:

Code:

if (xmlhttp.readyState == 4){
                if(xmlhttp.status == 200){

And this is valid code because you use the 'not' operator to check for a null value.
The 'not' operator is not a type comparison, it checks for a Boolean 'true (any value besides null or 0)' or 'false (null or 0)' :

Code:

if(!newxmlhttp){

But in either case, your code will run either way.

[vitron]

Thanks for your help Jerry
but it seems the problem must be the way im calling the ajax functions i think, and because of that the problem occurs at:-

Code:

var ajaxResponse = xmlhttp.responseText;
document.getElementById(toid).innerHTML = ajaxResponse;

it seems that because of the way Im calling the ajax function (im calling it through another javascript function/class that I cant display here), when it trys saving the returned content to "document.getElementById(toid).innerHTML" it doesn't actually do it, so when my other code looks for the content in "document.getElementById(toid).innerHTML", it doesn't find anything and returns nothing then

[job0107]

First make sure run.php is echoing something back.
And if it is, then you may have to use setTimeout() to delay any further actions until the response has been received.

Depending on server traffic, the returned response could take more time then you are allowing.
As I have found out, without a delay, trying to fetch the returned response from the recipient object can be hit and miss.

Without understanding what exactly you are doing, it is impossible for me to know where the problem is.

[job0107]

This may be a little simplified but this code creates the runAjaxTask() object that fetches a task and displays it in div1.
Then the runAjaxTask() object creates the transferAjaxTask() object that transfers a copy of the task from div1 to div2.
This code works seamlessly because the transferAjaxTask() object doesn't get created until there is a valid response from AJAX.

HTML Code:

<script>
function runAjaxTask()
{
 this.randomString = randomString;
 this.NewXmlHttpObject = NewXmlHttpObject;
 this.getContent = getContent;
 this.results = results;
 function results()
 {
  return this.getContent;
  }
 function randomString(maxLength)
 {
  var chars = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
  var stringLength = maxLength;
  var outputString;
  var i = 0;
  while(i < stringLength)
  {
    outputString += chars[Math.round(Math.random()*35)];
    i++;
    }
  return outputString.replace("undefined","");
  }
 function NewXmlHttpObject()
 {
  var newxmlhttp = null;
  try {newxmlhttp = new XMLHttpRequest();}
  catch(ie){try {newxmlhttp = new window.ActiveXObject("Msxml2.XMLHTTP");}
            catch(ie){newxmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");}
              }
  if(newxmlhttp === null)
  {
    alert("Your browser does not support AJAX!");
    return 0;
    }
  else{return newxmlhttp;}
  }
 function getContent(url,toid,transtoid)
 {
  var xmlhttp = this.NewXmlHttpObject();
  var ajaxURL = url+'&rid='+this.randomString(20);
  xmlhttp.open("GET", ajaxURL, true);
  xmlhttp.onreadystatechange = function()
  {
    if(xmlhttp.readyState == 4)
   {
     if(xmlhttp.status == 200)
    {
      var ajaxResponse = xmlhttp.responseText;
      document.getElementById(toid).innerHTML = ajaxResponse;
      var initialize = new transferAjaxTask();
     initialize.transfer(toid,transtoid);
      }
    else{document.getElementById(toid).innerHTML = "Problem retrieving data (URL: "+ajaxURL+"):-" + xmlhttp.statusText;}
     }
   };
  xmlhttp.send(null);
  }
 }
function transferAjaxTask()
{
 this.transfer = transfer;
 function transfer(obj1,obj2){document.getElementById(obj2).innerHTML = document.getElementById(obj1).innerHTML;}
 }
</script>
<body>
<div id="div1" style="border:1px solid #000;"></div>
<div id="div2" style="border:1px solid #f00;"></div>
<script>
var ajax = new runAjaxTask();
ajax.getContent('run.php?task=checkprofiles&action=run','div1','div2');
</script>
</body>

[Vicious]

Originally Posted by job0107

This line of code:
And these two lines of code have the same problem as the first problem:

Code:

if (xmlhttp.readyState === 4){                
           if(xmlhttp.status === 200){

Should be:

Code:

if (xmlhttp.readyState == 4){                
           if(xmlhttp.status == 200){

=== makes sure there is no type conversion (also known as explicit type check):

Code:

var myvar = "4";
if (myvar == 4){ alert("hmm, string converted to integer");}
if (myvar ===4){ alert("this alert shouldn't be shown");}

If you run that in firebug, you'll see what happens.

[vitron]

Thanks for your help on this jerry, your suggestion about setTimeout() is what fixed the problem for me
(I know its a late reply, just thought Id say thanks )