AJAX - coding question

mcrob · #1 (**permalink**) 02-09-07, 04:29 PM

Hey there how is it going I got a question

Go on this site: http://www.w3schools.com/php/php_ajax_database.asp

This is a great tutorial but I am concerned with somethings I see.

Code:

 var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

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;
}

1. In this javascript code is it possible to have it display a loading image when the user presses submit, then right after it loads then the loading image disappears?

Code:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form> 
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="Peter">Peter Griffin</option>
<option value="Lois">Lois Griffin</option>
<option value="Glenn">Glenn Quagmire</option>
<option value="Joseph">Joseph Swanson</option>
</select>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

2. In the HTML Form, you'll notice that there is only one List/Menu field. Is it possible to have multiple text fields and retrieve the entered data in the PHP page?? And how can I include a Submit button so if the user clicks on submit then the AJAX event takes place. I know there maybe some changes I may need to do on the javascript code.

I really hope somebody can reply back to this topic, I am in need to know this desperately so I can create some stunning web applications.

TwoD · #2 (**permalink**) 02-09-07, 07:06 PM

The code for showing an image,
for example:

Code:

document.getElementById('imageId').style.display="";

needs to be placed right after

Code:

xmlHttp.send(null)

and the code to hide it again,
for example

Code:

document.getElementById('imageId').style.display="none"

needs to be placed after

Code:

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

mcrob · #3 (**permalink**) 02-09-07, 08:15 PM

Code:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getusers.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
document.getElementById('imageId').style.display="";
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText
 document.getElementById('imageId').style.display="none"

 } 
}

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;
}

Thats cool...... but

I do not know where to put the image link

EG: <img src='images/ajax-animation.gif' />

TwoD · #4 (**permalink**) 02-09-07, 11:54 PM

The link can be placed anywhere on the page since getElementById will find it for you.

Just make sure you give it an id="myImgOrSomehting" attribute.

Contrid · #5 (**permalink**) 02-12-07, 07:09 PM

For the image, you can do something like this :

HTML Code:

<img id="myImage" src="images/filename.gif" style="visibility:hidden;" />

and then use JavaScript to make it visible when the submit button is clicked :

HTML Code:

document.getElementById('myImage').style.visibility = "visible";

Good luck

If you have any questions, post them here.