javascript error :function callAjax undefined in firefox

[debashishnit]

I am calling the callAjax function in the HTML body as below :

<center>
    <h3>Request Tracking System</h3>
<table width="70%" border=0>
    <tr>
    <td width=100% valign=top>
    <table width=100% cellpadding=8 cellspacing=0 class=bord border=0>
        <th colspan=2>
            <button type="button" onclick="javascript:callAjax('m');return false;">Requests for me</button>
        </th>
        <th colspan=2>
            <button type="button" onclick="javascript:callAjax('o');return false;">All Requests</button>
        </th>
    </table>

    <br/><br/>
    <div id="my_requests" >

    </div>

    <!--<div id="remove_user_show" style="display:none;">

    </td>
</table>

my callAjax function is as follows :

<script language="javascript" type="text/javascript">

function callAjax(type)
{
alert("kk");
    var ajaxRequest;  // The variable that makes Ajax possible!
    var xmlHttpReq = false;
    var self = this;

    try
    {
        // Opera 8.0+, Firefox, Safari
        //ajaxRequest = new XMLHttpRequest();
        self.xmlHttpReq = new XMLHttpRequest();
    } 
    catch (e)
    {
        // Internet Explorer Browsers
        try
        {
            //ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) 
        {
            try
            {
                //ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e)
            {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    var queryString = "&flag=i&flag2=" + type;
    var strUrl = "index.php?mode=home" + queryString;
    //window.location.href = strUrl;
    self.xmlHttpReq.onreadystatechange = function(){
        if(self.xmlHttpReq.readyState == 4 || self.xmlHttpReq.readyState == "complete")
        {
            document.getElementById('my_requests').innerHTML = self.xmlHttpReq.responseText;
        }

    }
    self.xmlHttpReq.open("GET", strUrl, true);
    //self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.send(); 



}

</script>

please help me ...

[hielo]

try:

<script type="text/javascript">

function callAjax(type,method)
{
	method = (String(method).toUpperCase()=="POST") ? "POST" : "GET";
	var xmlHttpReq = false;
	try
	{
		// Opera 8.0+, Firefox, Safari
		//ajaxRequest = new XMLHttpRequest();
		xmlHttpReq = new XMLHttpRequest();
	} 
	catch (e)
	{
		// Internet Explorer Browsers
		try
		{
			xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) 
		{
			try
			{
				xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (e)
			{
				// Something went wrong
				alert("Your browser broke!");
			return false;
			}
		}
	}

	// Create a function that will receive data sent from the server
	var queryString = "mode=home&flag=i&flag2=" + type;
	var strUrl = "index.php?" + queryString;
	//window.location.href = strUrl;
	xmlHttpReq.onreadystatechange = function()
	{
		if( xmlHttpReq.readyState == 4 || xmlHttpReq.readyState == "complete")
		{
			if( 200==xmlHttpReq.status )
			{
				document.getElementById('my_requests').innerHTML = xmlHttpReq.responseText;
			}
			delete(xmlHttpReq.onreadystatechange);
			delete(xmlHttpReq);
		}
	return true;
	}

	try{
		xmlHttpReq.open(method, strUrl, true);
		var params=null;
		if("POST"==method)
		{	params=queryString;
			xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttpReq.setRequestHeader('Content-Length', params.length);
		}
		xmlHttpReq.send(params); 
	}
	catch(e)
	{
		alert(method + ' ' + e.toString());
		delete(xmlHttpReq.onreadystatechange);
		delete(xmlHttpReq);
		return false;
	}
return true;
}

</script>


<h3>Request Tracking System</h3>
<table width="70%" border='1'>
	<tr>
		<td width='100%' valign='top'>
			<table width='100%' cellpadding='8' cellspacing='0' class='bord' border='1'>
				<th colspan='2'>
					<button type="button" onclick="callAjax('m');return false;">Requests for me</button>
				</th>
				<th colspan='2'>
					<button type="button" onclick="callAjax('o');return false;">All Requests</button>
				</th>
			</table>
			<br/><br/>
			<div id="my_requests" >
			</div>
			<!-- <div id="remove_user_show" style="display:none;"></div> -->
		</td>
	</tr>
</table>