Works in Firefox but not in Opera or IE - any Ideas

Chunk78 · April 21, 2007

Hi all

I'm a complete newbie when it comes to AJAX but after reading the tutorials on here and some of the posts I thought I would give it a go.

I am writing a Players profile section for my local football team. I have a drop down box that allows you to filter the profiles by position. Each time the List box value changes it populates a list box with all the players matching that position. Clicking on a players name will then display their Statistics.

When I was writing the page I carried out my testing using Firefox and couldn't believe how smoothly things were going. I then tried testing it in Opera and Internet Explorer and on both occasions I cannot get the List Box to populate. I have attached an image of the error message I get from IE:

Any help would be much appreciated:

Code is as follows:

HTML Page:

<head>
<script src="database/scripts/playerprofile.js"></script>	
</head>

<body onload="filterProfiles('All Profiles')">
<div id="contentwide">
  <h2>Tredegar Arms AFC - Player Profiles </h2>
  <p>This section will introduce you to the Tredegar Arms AFC Players.</p>
  <form>

<table width="80%">
	<tr>
	  	<td>
	  		<select id="CatagorySelect" name="CatagorySelect" onchange="filterProfiles(this.value)">
				<option value="AL" selected="selected">All Profiles</option>
				<option value="NP">Non Players</option>
				<option value="GK">Goalkeepers</option>
				<option value="DF">Defenders</option>
				<option value="MD">Midfielders</option>
				<option value="ST">Strikers</option>
			</select>
		</td>
  	</tr>
</table>
<p></p>			
<table>
	<tr>
	  	<td width="25%" rowspan="10" valign="top">

		  	<select id="Playerlist" name="Playerlist" size="15" onchange="displayProfiles(this.value)">

	  		</select>
		</td>
	</tr>
	<tr>
		<td>
			<div id="buildProfile" name="buildProfile">

			</div>
		</td>
	</tr>
  </table> 
      </form>
</body>
</html>

This is the JavaScript Code:

var xmlHttp = false

//This function returns the Available Profiles
function stateChanged() 
{ 
alert(xmlHttp.readyState+" -- "+xmlHttp.responseText)
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
	document.getElementById("Playerlist").innerHTML=xmlHttp.responseText
} 
}

//This Function returns the Player Profiles Values 
function stateChanged2() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
	//alert(xmlHttp.responseText)
	document.getElementById("buildProfile").innerHTML=xmlHttp.responseText
	} 
}

//This function sets up the XMLHttp variable

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


// This function will search the database for all players that match the Filter Criteria
function filterProfiles(filterString)
{ 

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

}

//This function will display the Profiles on the screen
function displayProfiles(PlayerID)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request")
		return
	} 
var url="./database/include/pro_display.php"
url=url+"?q="+PlayerID
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged2 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

This is the php for populating the Player Information

<?php


$q=$_GET["q"];
$pos = strpos ( $q , ', ' , 0 );
$SName=substr($q, 0, $pos);
$FName=substr($q, $pos+2);

include ("db_con.php");

//Run Query
$query = "SELECT player_aka, player_DOB, player_pos_full, player_favourite, player_ambition, player_imageid, player_cur_played, player_cur_scored FROM tbl_player_profile WHERE player_fname= '".$FName."' AND player_sname='".$SName."'";

$result = mysql_query($query) or die("Invalid Query Type: - Query failed:");

echo "<table>";

while($row = mysql_fetch_array($result))
{

echo "<tr>";
echo "<th>Name:</th>";
echo "<td>" .$FName." ".$SName."</td>";
echo "<td rowspan='3'><div align='center'><img src='./images/".$row['player_imageid'].".jpg' alt='Picture for" .$FName." ".$SName."' width='100' height='100' id='PlayerPicture' /></div></td>";
echo "</tr>";
echo "<tr>";
echo "<th>Nickname:</th>";
echo "<td>" . $row['player_aka'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Position:</th>";
echo "<td>" . $row['player_pos_full'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>DOB:</th>";
echo "<td colspan=2>" . $row['player_DOB'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Ambition:</th>";
echo "<td colspan=2>" . $row['player_ambition'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fav Player:</th>";
echo "<td colspan=2>" . $row['player_favourite'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Played:</th>";
echo "<td colspan=2>" . $row['player_cur_played'] . "</td>";
echo "</tr>";
echo "<tr>";
if ($row['player_pos_full']=="Goalkeepers")
{
	echo "<th>Conceded:</th>";
}	
else
{
echo "<th>Scored:</th>";
}	
echo "<td colspan=2>" . $row['player_cur_scored'] . "</td>";
echo "</tr>";
}

echo "</table>";

?>

This is the php for populating the list box

<?php


$q=$_GET["q"];

include ("db_con.php");

switch ($q) 
{

case 'NP':
	// Non Playing Staff Profiles have been selected
	$buildQuery = " WHERE player_pos_short = 'CS' 
				  	OR player_pos_short = 'CO' 
					OR player_pos_short = 'MA' 
					OR player_pos_short = 'CS' ";
	break;

case 'GK':
	// GoalKeepers Profiles have been selected
	$buildQuery = " WHERE player_pos_short = 'GK' ";
	break;

case 'DF':
	// Defenders Profiles have been selected
	$buildQuery = " WHERE player_pos_short = 'DF' ";
	break;

case 'MD':
	// Midfielders Profiles have been selected
	$buildQuery = " WHERE player_pos_short = 'MD' ";
	break;

case 'ST':
	// GoalKeepers Profiles have been selected
	$buildQuery = " WHERE player_pos_short = 'ST' ";
	break;

default:
	// All Profiles have been selected
	$buildQuery = " ";
}

//Run Query
$query = "SELECT player_id, player_sname, player_fname FROM tbl_player_profile $buildQuery ORDER BY player_sname ASC, player_fname ASC";

$result = mysql_query($query) or die("Invalid Query Type: - Query failed:");

$numberOfRows = MYSQL_NUMROWS($result);

if ($numberOfRows==0)
{
echo "<option>No Profiles Found</option>";
}
else if ($numberOfRows>0)
{
while ($i < $numberOfRows) 
{
	$thisFname = MYSQL_RESULT($result,$i,"player_fname");
	$thisSname = MYSQL_RESULT($result,$i,"player_sname");
	$displayProfile	= $thisSname.", ".$thisFname;									
	echo "<option>$displayProfile</option>\n";
	$i ++;
}
}

?>

[attachment deleted by admin]

roopurt18 · April 27, 2007

This is just a wild guess and might not do it, but in your ajax callback functions, replace:

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

with:

if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

Sign In

Works in Firefox but not in Opera or IE - any Ideas

Recommended Posts

Chunk78

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information