www.webdeveloper.com
Results 1 to 3 of 3

Thread: AJAX Function Problem

  1. #1
    Join Date
    Nov 2011
    Posts
    2

    AJAX Function Problem

    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.

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  3. #3
    Join Date
    Nov 2011
    Posts
    2
    Thanks,
    I got it working

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles