AJAX Function Problem

**kmiraji** · 11-18-2011 03:51 PM

Hi Team,
I am creating the page where a user can edit or add values in db table. The page works fine but when the user presses any button the onclick function doesnt fire or it fires but perhaps cant pass variables , I dont know
Below is the code/.
PHP File(vehiclebodytype.php)

Code:

<?php
$mode=$_GET['mode'];
$id=$_GET['id'];
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$dbname = "vehicles_db";
	//Connect to MySQL Server
$con=mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
	if (!$con)
  		{
  		die('Could not connect: ' . mysql_error());
  		}
mysql_select_db($dbname,$con) or die(mysql_error());

//function to display the list of vehicle body types where user can choose eithe to edit existing item or add new
function displaylist()
{
	$sql="SELECT * FROM `vehiclebodytype` ORDER BY `vehiclebodytype_id`";
	$display_string = "<table  border=1><tr><td><form name = \"listform\"><table>";
	$result = mysql_query($sql) or die(mysql_error());
	while($row = mysql_fetch_array($result))
	{
		$display_string .= "<tr><td>".$row['bodytype']."</td><td><input type=\"submit\" onclick=\"ajaxFunction('view','".$row['vehiclebodytype_id']."')\" value=\"Edit\" /></td></tr>";
	}	
	$display_string .= "</table><input type=\"submit\" onclick=\"ajaxFunction('view','')\" value=\"Add New\" /></form></td></tr></table>";
	echo $display_string;
}
//To load complete page - (no values in query string
if (!$mode)
{
	echo "<html>\n";
	echo "<head><script type=\"text/javascript\" src=\"ajaxscript.js\"></script></head>\n";
	echo "<body>\n";
	echo "<table width =100%>\n";
	echo "<tr><td id ='list' width =20%>Main List<br />\n";
	echo displaylist();
	echo "</td><td id = \"edit\">Edit Form will be displayed here</td>\n";
	echo "</tr></table></body></html>";
}
//When the user clik edit button or clicks add button
elseif($mode == "edit")
{
			if($id == "")
			{
				$display_string = "<table><tr><td><form name = \"addform\"><table>";
				$display_string .= "<tr><td>Body Type</td><td><input name=\"bodytype\" type=\"text\" value = \"\" size=\"50\" /></td></tr>";
				$display_string .= "<tr><td><input type=\"submit\" onclick=\"ajaxFunction('save','')\" value=\"Save Added\" /></td></tr></table></form></td></tr></table>";
				echo $display_string;			
			}
			else
			{
				$sql="SELECT * FROM `vehiclebodytype` WHERE `vehiclebodytype_id` = ".$id;
				$result = mysql_query($sql) or die(mysql_error());
				$display_string = "<table><tr><td><form name = \"editform\"><table>";
				while($row = mysql_fetch_array($result))
				{
					$display_string .= "<tr><td>Body Type</td><td><input name=\"bodytype\" type=\"text\" value = \"".$row['bodytype']."\" size=\"50\" /></td></tr>";
				}
				$display_string .= "<tr><td><input type=\"submit\" onclick=\"ajaxFunction('save','".$row['vehiclebodytype_id']."')\" value=\"Save Changes\" /></td></tr></table></form></td></tr></table>";
				echo $display_string;
			}
}
//When the user clicks the SAVE button on the new form loaded by ajax			
elseif ($mode == "save")
{
			if($id == "")
			{
				$instsql = "INSERT INTO `vehiclebodytype` (`bodytype`, `created_by`, `created_on`, `modified_by`, `modified_on`) VALUES('".$bodytype."', '1', '".date("Y-m-d h:i:s",time())."', '1','".date("Y-m-d h:i:s",time())."')";
				$result = mysql_query($instsql) or die(mysql_error());
				displaylist();
			}
			else
			{
				$updsql = "UPDATE `vehiclebodytype` SET `bodytype` = '".$bodytype."', `modified_by` = '1', `modified_on` = '".date("Y-m-d h:i:s",time())."' WHERE `vehiclebodytype_id` = '".$vehiclebodytype_id."'";
				$result = mysql_query($updsql) or die(mysql_error());
				displaylist();
			}			
}
?>

AJAX (ajaxscript.js)

Code:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction()
{
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try
	{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} 
	catch (e)
	{
		// Internet Explorer Browsers
		try
		{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) 
		{
			try
			{
				ajaxRequest = 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
	ajaxRequest.onreadystatechange = function()
	{
		if(ajaxRequest.readyState == 4)
		{
			switch(mode)
			{
				case "view":
					var ajaxDisplay = document.getElementById('edit');
					if(value=="")
					{
						var queryString = "?mode=edit";
					}
					else
					{
						var queryString = "?mode=edit&id=" + value;
					}
					break;
				case "save":
					var ajaxDisplay = document.getElementById('list');
					if(value=="")
					{
						var queryString = "?mode=save";
					}
					else
					{
						var queryString = "?mode=save&id=" + value;
					}
					break;
			}
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}

	ajaxRequest.open("GET", "vehiclebodytype.php" + queryString, true);
	ajaxRequest.send(null); 
}

//-->
</script>

Something must be wrong somewhere please help.

**JunkMale** · 11-19-2011 01:54 AM

Try wrapping code in the proper tags... It helps.

What I see is an ajax function that is attempting to change the query string value after the request has been sent and if queryString is not set, then its likely that the server is getting a URL with a value of false or an error value because it does appear that queryString is not set.

What you need to do is set the quetString value prior to use and not after as changes like this will not be sent because the object has been sent already.

**kmiraji** · 11-20-2011 02:59 AM

Thanks,
I got it working

Thread: AJAX Function Problem

Thread Tools

Display

AJAX Function Problem

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions