Member Avatar for k2k

trying to call an external ajax function to exec the php script to update a table. it is somehow not working.. it is my first time programming in ajax, please point it out if there is anything obviously wrong. thanks.

<html>
<head>
<script>myAjaxFunctions.js</script>
</head>

<body>
<button type="button" onclick="clearT1();">Clear TableOne</button>
</body>

</html>
/**** This is "myAjaxFunction.js *****/
var asyncRequest;
		
		function getContent(url)
		{
			try
			{
				asyncRequest = new XMLHttpRequest();
				asyncRequest.onreadystatechange = stateChange;
				asyncRequest.open('POST', url, true);
				asyncRequest.send(null);
			}
			
			catch(exception)
			{
				alert('Request Failed.');
			}
		}
		
		
		
		
		function clearT1()  
		{
			//getContent("clearTable_exc.php");
			
			try
			{
				asyncRequest = new XMLHttpRequest();
				asyncRequest.onreadystatechange = stateChange;
				asyncRequest.open('POST', "../clearTable_exc.php" , true);  //// php page 
				asyncRequest.send(null);
			}
			
			catch(exception)
			{
				alert('Request Failed.');
			}
		}
		
		
		function stateChange()
		{
			if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
			{
				document.getElementById('contentArea').innerHTML = asyncRequest.responseText;
			}
		}
/*** this is the php page ****/
<?php

include('config.php');
//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
$db = mysql_select_db(DB_DATABASE);
	
$query="update orders set order_status=1 where table_num=1";
mysql_query($query);
?>
  • 2 Contributors
  • 6 Replies
  • 459 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Graphix

Recommended Answers

All 6 Replies

Member Avatar for Graphix

Your code seems fine, except for the fact that there does not exist a div with the id 'contentArea'.

There are 2 things why your script might not work:

1. The script is not included. Use:

<script type="text/javascript" src="myAjaxFunction.js"></script>

2. The page is not executed on a server. The thing is with AJAX, that it needs a server to function properly, else the readyState and status will never be both 4 and 200

~G

Member Avatar for k2k

thanks i didn't think it matters but i was missing type="text/javascript... it works now

Member Avatar for k2k

the function is working, however, I would like to reuse the following code with just a different "table_num" as below comment.. any idea how I can parse a variable or something from my ajax code to the php code below?

js is client side and uses cookie,, while php is server side using session.. is there a way to communicate between them?

i didn't find very good explanation of "asyncRequest.send(null);" how do i send data from the send() and how do i retrieve the data back from for example php file?

<?php
include('config.php');
//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
$db = mysql_select_db(DB_DATABASE);
// i wanna set """table_num""" as a variable parsed from the ajax code   
$query="update orders set order_status=1 where table_num=1";
mysql_query($query);
?>
var asyncRequest;
		
		function getContent(url)
		{
			try
			{
				asyncRequest = new XMLHttpRequest();
				asyncRequest.onreadystatechange = stateChange;
				asyncRequest.open('POST', url, true);
				asyncRequest.send(null);   // can i use the send? 
			}
			
			catch(exception)
			{
				alert('Request Failed.');
			}
		}
		
		
		
		
		function clearT1()      // is here anything i can do here to parse ? 
		{
		//i could make multiple of "clearTAble_exc.php with different table_num
	        // but i guess this is not a good practice 
                 getContent("../php_lib/clearTable_exc.php");
		}
		
		
		function stateChange()
		{
			if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
			{
				document.getElementById('contentArea').innerHTML = asyncRequest.responseText;
			}
		}

thanks =)

Member Avatar for k2k

i added the header info along with the send(data) function in my ajax code..

// is this the right way to get the value of the variable out? it is probably wrong since it doesn't return the value to me. 

i couldn't find a good php example in how to get the data from the send(data).. 

thanks 

<?php
echo "$_POST[data]";
echo "$_POST[res_name]";
?>
var asyncRequest;
var data = "table=table_for_testing&res_name=name_for_testing";

		function getContent(url)
		{
			try
			{
				asyncRequest = new XMLHttpRequest();
				asyncRequest.onreadystatechange = stateChange;
				asyncRequest.open('POST', url, true);
				
				      //////////////// newly added for php parsing ///////////////////////
				////// Send the proper header information along with the request ////////////
				asyncRequest.setRequestHeader("Content-type", "some-regular-data");
				asyncRequest.setRequestHeader("Content-length", data.length);
				asyncRequest.setRequestHeader("Connection", "close");
				//////////////////////////////////////////////////////////////////////////////
				
				
				asyncRequest.send(data);
			}
			
			catch(exception)
			{
				alert('Request Failed.');
			}
		}
		
		
		function stateChange()
		{
			if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
			{
				document.getElementById('contentArea').innerHTML = asyncRequest.responseText;
			}
		}
Member Avatar for Graphix

The php code should be

<?php
echo $_POST['data'];
echo $_POST['res_name'];
?>

And on line 14 it needs to be

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

~G

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.