Problem with AJAX

[mohsin1]

please look at this javascript code. the box shows up properly in IE but remains empty in Firefox. Is it something to do with createRequestObject? The validation function will actually check the data in the database. Please help..

function createRequestObject()
{
/* Initialising the variable xmlhttp */
var xmlhttp=false;

/* Try and catch block for creating xmlhttp object according to the browser */
try
{
/* The xmlhttp object is built into the Microsoft XML Parser. */
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
/* The xmlhttp object is built into the Microsoft IE. */
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlhttp = false;
}
}
/* The xmlhttp object is built into the browsers other than Microsoft IE. */
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function checklogin(page)
{

var request = createRequestObject();
request.open('GET', 'login.php', true);
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var response = request.responseText;
document.getElementById('login').innerHTML = response;
document.getElementById('login').style.visibility= 'visible';
}
}
}
request.send(null);

}

function checkfields()
{
if(document.loginform.username.value=="")
{
alert("Please enter your Email!");
document.loginform.username.focus();
}
else if (document.loginform.password.value=="")
{
alert("Please enter your Password!");
document.loginform.password.focus();
}
else
validate();
}
function validate()
{
alert("Valid Data");
}

[DaveSawers]

It could be the order you're doing things in createRequestObject. I always do it the other way round (FF first) as in:

function createRequestObject()
{
  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;
}

[mohsin1]

Thanx mate. But no luck. The box still remains empty.

[DaveSawers]

Then it's not a problem with the AJAX part.

[mohsin1]

the page i am trying to load in ajax looks alright in firefox if i open it by writing in the url, jus that it does not appear when called by ajax.

[mohsin1]

here is the css of the <div> in question

div#login {visibility:hidden; position:absolute; top:150px; border:double thick #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; background-color:#6AA6BD; left:41%; height:90px}

thanx

[wige]

Would you be able to post (or message me with) a link to the page that is having the issue?

Looking at the CSS code, if the target div is one of the first items created on the page, and you use absolute positioning for the rest of the items on the page, the div may be on the bottom, covered by another layer.

[mohsin1]

well i have it on the localhost. i should be sorry for myself.

but i think its a problem with ajax. as now i'm trying to use the same createRequestObject() function to submit the feedback form on the website and again its not working on firefox. i figured out, it does not send the request at all as I am now using it with a <div> that has no css formatting.

[mohsin1]

just another point to ponder. i can pinpoint the innerHTML property now because the same createRequestObject() function allows me to check whether a new username is unique or not and display an error in a message box on the registration form.

so it does send and receive data. any guesses now???

[mohsin1]

this is where it works in Firefox

function unique(username)
{
		var ans;
		var request = createRequestObject();
		request.open('GET', 'regcheck.php?username='+username, true);
		request.onreadystatechange = function()
		{
			if(request.readyState == 4)
			{
				if(request.status == 200)
				{
					var response = request.responseText;
					var inv = "invalid";
					//alert(response.length);
					
					if(response==inv)
					{
						alert("The Email Address you want to register with already exists in our database.\n Please select another one.");
						document.register.username.focus();
						ans="false";
					}
					else{
					ans="true";
					}
					
				}
			}
		}
		request.send(null);
		return ans;
}

[mohsin1]

what next?? Thanx in advance

[mohsin1]

come on pro's. any guesses? what makes it not work with innerHTML and works with alert()?

[DaveSawers]

So you have confirmed that the problem is not with Ajax but with the display of the result in Firefox.

This is most likely due to an error in your HTML or CSS.

[mohsin1]

thanx dave. the box shows up but remains empty and i use javascript's innerHTML to diplay the response as pasted in my first post. do u want to have a look at the html and css?

[mohsin1]

this is the HTML

<div id="login"></div>

and this is the css

div#login {visibility:hidden; position:absolute; top:150px; border:double thick #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; background-color:#6AA6BD; left:41%; height:90px}
div#login input {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px}

[kgun]

1. Why do you use innerHTML to change page content? It may be faster than DOM scripting, but it is not my preferred method and it is not the proposed standard, even if most browsers support it. XMLHttpRequest is at the heart of AJAX and DOM scripting / building and are most flexible and seamless IMO.
2. You may read the two AJAX posts on my forum before you continue.
3. You may have problems with Loss of scope and this
   
   "Ordinarily the this keyword is a reserved word in object oriented languages and indicates a reference to the running or the current object. It is a convenient way to refer to "the object that is executing this code." But this has one small problem-its meaning changes when it's called from outside the object. This is the result of something called execution context. All of the code inside the object runs in the same execution context, but code that's run from other objects - such as event handlers - runs in the calling object's execution context. What this means is that when you're writing object-oriented JavaScript, you won't be able to use the this keyword to refer to the object in code for event handlers. The problem is called loss of scope".

[mohsin1]

i'm sorry i didnt know there was a substitute for innerHTML. i thought it was a part of DOM and was the only way to change page content. cud u let me know where can i find examples of other methods? btw i havnt used 'this' keyword at all.

[mohsin1]

u know what, just after the innerHTML statement i added this: alert(response); and POOF, the whole source of the login.php file showed up in a msgbox.

[kgun]

Originally Posted by mohsin1

i'm sorry i didnt know there was a substitute for innerHTML. i thought it was a part of DOM and was the only way to change page content. cud u let me know where can i find examples of other methods? btw i havnt used 'this' keyword at all.

Fast answer, register on my forum. There is a lot of book hints and links there.

"The problem is that PHP is just too easy. It tempts you to try out your ideas, and flatters you with good results. You write much of your code straight into your Web pages, because PHP is designed to support that.

Scroll down and read the complete message. A fast solution may be a very bad solution in the long run. The XMLHttprequest object (explained in greater detail on my forum) is the heart of the AJAX engine.

Minimalistic solution:

1. Buy the book "Learning jQuery" and start to use that library.
2. Next level: Buy the book "Professional Ajax" and start to use the zXml library.

Then you jump over one level, browser incompatibilities. You do not need to reinvent the wheel and you do not need to register on my forum.

[mohsin1]

oh my god, i just used firebug on my script and the response from login.php is actually appending inside the <div>. but the <form> inside is showing very lightly and different from other elements.

[kgun]

Did you note my edit?

Yes, and when you make web applications in AJAX, you should use the latest version of PHP and constantly upgrade, not least because of the XML technology support in PHP. The X in "AJAX = XML".

[mohsin1]

hi. the problem's solved now. thanx for help. i'd carelessly put the form tag between table and tr, and that made it buggy for firefox. thanx for ur help guys. but i learnt a lot.

[mohsin1]

kjell thanx for the website, i'v already tagged it.

[parolespedia]

Your last function

function checkfields()
{
if(document.loginform.username.value=="")
{
alert("Please enter your Email!")