php, javascript, & xmlhttp problem

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

php, javascript, & xmlhttp problem

Post 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
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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?
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

search for the responseText property...that'll get you started on how to handle the response from the server.
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post by taterman »

I'll do just that. thanks for the replies and I'll be back if I'm still stuck.
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post 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
?>

User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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");
}
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post 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
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

with what you've written, you need to be using 'tmp' as your xmlhttp object...not http.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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...
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post by taterman »

Even though I return tmp to var http = HTTPObject();?
taterman
Forum Newbie
Posts: 13
Joined: Mon Apr 09, 2007 10:49 am

Post by taterman »

I tried switching it from http to tmp, but I still get the same result.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

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

User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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);
        }
} 
Post Reply