Page 1 of 2

php, javascript, & xmlhttp problem

Posted: Wed Apr 25, 2007 11:25 am
by taterman
I created a site that asks the user to type in a beginning date and ending date range to display a list of ip addresses and other data on another page. The data is stored in a MySQL database. When the results are displayed on the next page, each ip address displayed has its own status dynamic drop down menu. I’m trying to get these status menus to update the status value in the database once the drop down menu is clicked on, so when data does display the drop down menus load showing the status value from the database.

As of now, I am able to all this, but when I try to chance the status value with the drop down menu, nothing happens. I took a look at a few tutorials including the one on this site, but I guess I’m still confused because it’s not working. Here is my code:

Code: Select all

<script type="text/javascript">
	function HTTPObject() 
	{
    	var JXHR;
    	
		if(window.ActiveXObject) 
		{        	
      		//Instantiate the latest MS ActiveX Objects
      		if(_XML_ActiveX) 
        		JXHR = new ActiveXObject(_XML_ActiveX);
			else
			{
      			//loops through the various versions of XMLHTTP in IE, in order of how common they are
    			var versions = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0",
								"Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0"];
      
	  			for(var i=0; i<versions.length; i++) 
				{
        			try 
					{//Try and  create the ActiveXObject for Internet Explorer, 
              		 //if it doesn't work  switch to next version and check again.
          				JXHR = new ActiveXObject(versions[i]);
          				
						if(JXHR) 
						{
            				var _XML_ActiveX = versions[i];
            				break;
          				}
        			}
        			catch(e) 
					{
						alert("problem 1");
					};
      			};//end for loop
     		}//end else
    	}//end 1st if
		
		//if there is no ActiveXObject available it must be firefox, opera, or something else		
    	if(!JXHR && typeof XMLHttpRequest != 'undefined') 
		{
      		try 
			{
        		JXHR = new XMLHttpRequest();
      		} 
			catch(e)
			{
				alert("problem 2");
        		JXHR = false;
      		}
    	}//end if
		else
			
    	return JXHR;
	}//end function
	
	var http = HTTPObject(); // Create the Object	
	var f = false;
	
	function updateDB(urlz, ip, val) 
	{
    	if(!f && http)
		{
		  var stuff = "ip="+ip+";val="+val;
		  http.open("GET", urlz + stuff, true);
		  f = true;
		  http.send(null);
    	}
  	}
</script>
</head>
<main>
<?php
………………… code

$n = ‘\n’;

print('<td align="left"><form method="post" name="a'.$ip.'" action="">'.$n.
'<select name="a'.$ip.'" onChange="updateDB(a'.$ip.', Update.php '.$ip. 'this.value)">'.$n.
'<option selected value="'.$row['Status'].'">'.$row['Status'].'</option>'.$n.
	'<option value="Open">Open</option>'.$n.
	'<option value="Contacted">Contacted</option>'.$n.
	'<option value="Client">Client</option>'.$n.
	'<option value="Closed - No Sale">Closed - No Sale</option>'.$n.
	'<option value="Closed - Not Valid">Closed - Not Valid</option>'.$n.
	'<option value="Closed - Not Interested">Closed - Not Interested</option>'.$n.
	'<option value="Closed - No Data">Closed - No Data</option>'.$n.
	'<option value="Closed - Large Company">Closed - Large Company</option>'.$n.
	'</select>'.$n.'</form>'.$n..'</td>'.$n);

…………………………………. More code
?>
thanks in advance for any help provided

Posted: Wed Apr 25, 2007 11:39 am
by Burrito
I don't see how you're handling the response from the server. Where are you having problems? Are you getting any JS errors? How are you trying to add options to your select box?

Posted: Wed Apr 25, 2007 11:50 am
by taterman
That must be my problem. I never handled the server response. I’m going have to find out how to do that as well. As for errors, I’m not getting any, which is odd.

Posted: Wed Apr 25, 2007 11:54 am
by Burrito
search for the responseText property...that'll get you started on how to handle the response from the server.

Posted: Wed Apr 25, 2007 12:00 pm
by taterman
I'll do just that. thanks for the replies and I'll be back if I'm still stuck.

Posted: Wed Apr 25, 2007 2:12 pm
by taterman
Ok, I added the server response. And I am still getting nothing. I don’t even get errors. When I choose an option in the drop down menu the program does nothing. I changed the code a little:

Code: Select all

	<!-- 	
	var http = HTTPObject(); // Create the Object	

	function HTTPObject() 
	{
    	var JXHR;
    	
		if(window.ActiveXObject) 
		{        	
      		//Instantiate the latest MS ActiveX Objects
      		if(_XML_ActiveX) 
        		JXHR = new ActiveXObject(_XML_ActiveX);
			else
			{
      			//loops through the various versions of XMLHTTP in IE, in order of how common they are
    			var versions = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0",
								"Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0"];
      
	  			for(var i=0; i<versions.length; i++) 
				{
        			try 
					{//Try and create the ActiveXObject for Internet Explorer, 
              		 //if it doesn't work switch to next version and check again.
          				JXHR = new ActiveXObject(versions[i]);
          				
						if(JXHR) 
						{
            				var _XML_ActiveX = versions[i];
            				break;
          				}
        			}
        			catch(e) 
					{/*Empty*/};
      			};//end for loop
     		}//end else
    	}//end 1st if
		
		//if there is no ActiveXObject available it must be firefox, opera, or something else		
    	if(!JXHR && typeof XMLHttpRequest != 'undefined') 
		{
      		try 
			{
        		JXHR = new XMLHttpRequest();
      		} 
			catch(e)
			{
        		JXHR = false;
      		}
    	}//end if
		else
			
    	return JXHR;
	}//end function
		
	var f = false;
	
	function updateDB(ip, name) 
	{
    	if(!f && http)
		{
		  var val = document.name.name.value;
		  var stuff = ";ip="+ip+";val="+val;
		  http.open("GET", Update.php + stuff, true);
		  http.onreadystatechange = responseJXHR(name);
		  f = true;
		  http.send(null);
    	}
  	}
	
	function responseJXHR(name) 
	{
    	if (http.readyState == 4) 
		{
        	var results = http.responseText;
        	document.name.name.value = results;        	
        	f = false;
    	}
  	}//end function
	//-->

Code: Select all

</script>
</head>
<main>
<?php
…………………..code
$n = ‘\n’; 

print('<td align="left"><form method="post" name="a'.$ip.'" action="">'.$n. 
'<select name="a'.$ip.'" onChange="updateDB('.$ip.',a'.ip.');">'.$n. 
'<option selected value="'.$row['Status'].'">'.$row['Status'].'</option>'.$n. 
   '<option value="Open">Open</option>'.$n. 
   '<option value="Contacted">Contacted</option>'.$n. 
   '<option value="Client">Client</option>'.$n. 
   '<option value="Closed - No Sale">Closed - No Sale</option>'.$n. 
   '<option value="Closed - Not Valid">Closed - Not Valid</option>'.$n. 
   '<option value="Closed - Not Interested">Closed - Not Interested</option>'.$n. 
   '<option value="Closed - No Data">Closed - No Data</option>'.$n. 
   '<option value="Closed - Large Company">Closed - Large Company</option>'.$n. 
   '</select>'.$n.'</form>'.$n..'</td>'.$n);
…………………..code
?>


Posted: Wed Apr 25, 2007 2:48 pm
by Burrito
please use the syntax tags for code snippets...it makes them much easier to read.

try something like this:

Code: Select all

http.onreadystatechange = function()
{
     if (http.readyState == 4 && http.status == 200) 
     {
          alert(http.responseText);
     }
}
edit:

I just looked over your XMLHttp creation and I'm not really sure what you're doing there.

you can simplify it with something like this:

Code: Select all

if (window.XMLHttpRequest)
{
  http = new XMLHttpRequest();
}
else
{
  http = new ActiveXObject("Microsoft.XMLHTTP");
}

Posted: Wed Apr 25, 2007 3:09 pm
by taterman
Thanks, I'll give this a try, but will not be able to respond back today cuz I gotta go to work.

Thanks again for your help

Posted: Thu Apr 26, 2007 2:07 pm
by taterman
It seems like I'm still having some problems with this code working correctly. When I select an option I can tell it is going to the functions, but I do not think the http.open("GET", send, true); is executing at all. Here again is what I have:

Javascript:

Code: Select all

var http = HTTPObject(); //Create the Object	

	function HTTPObject() 
	{    	
		var tmp;
		
		if(window.XMLHttpRequest)
  			tmp = new XMLHttpRequest();
		else
  			tmp = new ActiveXObject("Microsoft.XMLHTTP");
		
		return tmp;
	}//end function
		
	var f = false;
	
	function updateDB(ip, name) 
	{		
    	        if(!f && http)
		{
		    var val = document.getElementById(name).value;
		    var stuff = "?ip="+ip+"&val="+val;
		    var send = "Update.php"+stuff;
		  		 
		    http.open("GET", send, true);
		    http.onreadystatechange = responseJXHR(name);
		    f = true;
		    http.send(null);
    	        }
  	}
	
	function responseJXHR(name) 
	{		
    	   if (http.readyState == 4 && http.status == 200) 
	  {			
        	var results = http.responseText;
        	document.getElementById(name).value = results;        	
        	f = false;
    	  }
       }//end function
PHP that goes with the above code:

Code: Select all

<?php
//………………… some code

$n = ‘\n’;
$an = "'".$ip."'";
$am = "'a".$ip."'";

print('<td align="left"><form method="post" name="aa'.$ip.'" action="">'.$n.
'<select name="a'.$ip.'" id="a'.$ip.'" onChange="updateDB('.$an.', '.$am.');">'.$n.
'<option selected value="'.$row['Status'].'">'.$row['Status'].'</option>'.$n.
   '<option value="Open">Open</option>'.$n.
   '<option value="Contacted">Contacted</option>'.$n.
   '<option value="Client">Client</option>'.$n.
   '<option value="Closed - No Sale">Closed - No Sale</option>'.$n.
   '<option value="Closed - Not Valid">Closed - Not Valid</option>'.$n.
   '<option value="Closed - Not Interested">Closed - Not Interested</option>'.$n.
   '<option value="Closed - No Data">Closed - No Data</option>'.$n.
   '<option value="Closed - Large Company">Closed - Large Company</option>'.$n.
   '</select>'.$n.'</form>'.$n..'</td>'.$n);

 //More code
?>
Update.php code:

Code: Select all

<?php
	
	// Gets hidden varibles
	if(!isset($_SESSION['SESSION'])) require ( "../include/session_SC.php");
				
	// Connecting, selecting database
	$connect = @mysql_connect($_SESSION['MYSQL_SERVER1'], $_SESSION['MYSQL_LOGIN1'], $_SESSION['MYSQL_PASS1'])
				   or die('Error! Connection failure......');
				
	$db = $_SESSION['MYSQL_DB2'];
	mysql_select_db($db) or die('Error! Could not select database.');	
				
	$region = '';
	$ipType = '';
						
	if($_SESSION[arin] == 'checked')
	{
		$region = 'arin';
		$ipType = 'ARINip';
	}
	else
	{
		$region = 'non_arin';
		$ipType = 'nonARINip';
	}
	echo($_GET['val']." & ".$_GET['ip']);
	mysql_query("UPDATE ".$region." SET Status = ".$_GET['val']." WHERE ".$ipType." = ".$_GET['ip'])
			or die(mysql_error());
	
?>
Again, all I am trying to do is have the dynamic drop down menu update the status value in the database.


Thanks for any help given.

Posted: Thu Apr 26, 2007 2:19 pm
by Burrito
with what you've written, you need to be using 'tmp' as your xmlhttp object...not http.

Posted: Thu Apr 26, 2007 2:22 pm
by Kieran Huggins
use jquery to make the ajax calls, and use firebug to debug the requests - a winning combination if ever I've seen one...

Posted: Thu Apr 26, 2007 2:22 pm
by taterman
Even though I return tmp to var http = HTTPObject();?

Posted: Thu Apr 26, 2007 2:34 pm
by taterman
I tried switching it from http to tmp, but I still get the same result.

Posted: Thu Apr 26, 2007 2:50 pm
by Burrito
try this:
UNTESTED

Code: Select all


if(window.XMLHttpRequest)
    tmp = new XMLHttpRequest();
else
    tmp = new ActiveXObject("Microsoft.XMLHTTP");
               
        var f = false;
       
        function updateDB(ip, name)
        {              
                if(!f && tmp)
                {
                    var val = document.getElementById(name).value;
                    var stuff = "ip="+ip+"&val="+val;
                    var send = "Update.php"+stuff;
                              
                    tmp.open("GET", send, true);
                    tmp.onreadystatechange = function()
                    {
if (tmp.readyState == 4 && tmp.status == 200)
          {               
                var results = tmp.responseText;
                document.getElementById(name).value = results;         
                f = false;
          }
                    };
                    f = true;
                    //http.send(null);
                }
        }


Posted: Thu Apr 26, 2007 2:59 pm
by Burrito
I took some time and did some testing...what I had above won't work. I missed the fact that you weren't sending your url params in the send() method of the tmp object.

try this, it worked for me:

Code: Select all

if(window.XMLHttpRequest)
    tmp = new XMLHttpRequest();
else
    tmp = new ActiveXObject("Microsoft.XMLHTTP");
               
        var f = false;
       
function updateDB(ip, name)
{             
        if(!f && tmp)
        {
			ip = "whatever";
			val ="me";            
            var stuff = "ip="+ip+"&val="+val;
            var send = "test.php";
			                  
            tmp.open("GET", send, true);
			tmp.send(stuff);
            tmp.onreadystatechange = function()
            {
				if (tmp.readyState == 4 && tmp.status == 200)
				      {               
				            var results = tmp.responseText;
				            alert(results);         
				            f = false;
				      }
			};
                f = true;
                //http.send(null);
        }
}