How to do ajax on my program

Discussion in 'JavaScript' started by Luke Watson, Mar 22, 2011.

0
  1. #1
    Hey guys i created a program that when you type in a certain number it triggers a database file and brings up the information in a php file. What i would like is to use ajax to do the same thing but i have no idea on how to do it.

    Here is my code,

    HTML:

    
<!-- Web Get Part Details --> 
<html> 
 <head> 
  <title>Web Get Part Details</title> 
  <style type="text/css"> 
   body {
          background-color: black;
          color: white;
          font-size: 30;
          text-align: center;
        }
  </style> 
 
  <script type="text/javascript"> 
  function validate()
{
if(document.frmPart.txtPartNumber.value == "")
{
alert("Part number must be entered");
document.frmPart.txtPartNumber.focus();
}
else
{
document.frmPart.submit();
}
}
 
  function clean()
    {
      document.frmPart.txtPartNumber.value= "";
      document.frmPart.txtPartNumber.focus();
    }
  </script> 
 
  </head> 
  <body onload="window.document.frmPart.txtPartNumber.focus()"> 
 
  <h1>Web Get Part Details</h1> 
  <form name="frmPart" action="jpdset1_4.php"> 
  Enter the part number : <input type="text" name="txtPartNumber"> 
  <br /><br /><br /> 
  <input type="button" name="cmdGetPart" value="Get Part Details" onclick="validate()" /> 
  &nbsp;&nbsp;
  <input type="button" name="cmdclear" value="Clear" onclick="clean()" /> 
  </form> 
 
  </body> 
 </html>
    Code (markup):
    PHP:

    
<?php
$part_number;
$part_description;
$units_on_hand;
$item_class;
$warehouse_number;
$units_price;
$query;
$result_set;
$connection;
$record;
$part_number = $_GET["txtPartNumber"];

$connection = @mysql_connect("localhost","test","")
                or die ("\n\nProblem connecting to database.\n" . mysql_error() . "\n\n");

  mysql_select_db("testdb")
   or die ("\n\nProblem with database.\n" . mysql_error() . "\n\n");

  $query = "select * from part where part_number = '" . $part_number ."'";

  $result_set = mysql_query($query)
                or die ("\n\nProblem with query . \n" . mysql_error() . "\n\n");

  $record = mysql_fetch_assoc($result_set);

  if ($record == "")
  {
    print("${indent}Part no. $part_number does not exist");
  }
  else
  {
  $part_description = $record['part_description'];
  $units_on_hand = $record['units_on_hand'];
  $item_class = $record['item_class'];
  $warehouse_number = $record['warehouse_number'];
  $unit_price = $record['unit_price'];;
echo("<html>\n");
echo("  <head>\n");
echo("   <title>Web Get Part Details Ajax Enhanced</title>\n");
echo("   <style type='text/css'>\n");
echo("     body { background-color:black;\n");
echo("            color:white;\n");
echo("            font-size:25px;\n");
echo("            text-align:center;\n");
echo("     }\n");
echo("   .title {");
echo("   background-color: #ccccFF;");
echo("   color: black;");
echo("   }");
echo("   .data {");
echo("   background-color: #cccccc;");
echo("   font-weight: bold;");
echo("   color: black;");
echo("   }");
echo("   </style>\n");
echo("  </head>\n");
echo("  <body>\n");
echo("   <h1>Web Get Part Details Ajax Enhanced</h1>\n");
echo("   Part details are :\n");
echo("   <br /><br /><br />\n");
echo("   <table cellpadding='5' cellspacing='5' border='1' align='center'>\n");
echo("   <tr><td class='title'>Part Number :</td><td class='data'> " . $part_number . "</td></tr>\n");
echo("   <tr><td class='title'>Part Description :</td><td class='data'>" . $part_description . "</td></tr>\n");
echo("   <tr><td class='title'>Units On Hand :</td><td class='data'>" . $units_on_hand . "</td></tr>\n");
echo("   <tr><td class='title'>Item Class :</td><td class='data'>" . $item_class . "</td></tr>\n");
echo("   <tr><td class='title'>Warehouse Number :</td><td class='data'>" . $warehouse_number . "</td></tr>\n");
echo("   <tr><td class='title'>Units Price :</td><td class='data'>" . $unit_price . "</td></tr>\n");
echo("  </table>\n");
echo("   <br /><br /><br />\n");
echo("   <a href='index.html'>Do another one</a>\n");
echo("  </body>\n");
echo("</html>\n");
mysql_close($connection);
}
?>
    Code (markup):
    If anyone can help me out would be much appreciated. Cheers :)
     
    Luke Watson, Mar 22, 2011 IP
  2. bledileka

    bledileka Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try using xmlhttprequest like this sample :
    
var http_request = false;
   function PostKeys(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) {
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) {
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            result = http_request.responseText;
			 document.getElementById("preview").innerHTML = result; 
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function geting() {
    var poststr = "value="+document.frmPart.txtPartNumber.value;
    PostKeys('pathtophpfile', poststr);
   }
    Code (markup):
    for the result place an empty div like this :
    <div id="preview"></div>
    Code (markup):
    To call the function just do an action onclick. like :
    <input type="button" name="cmdGetPart" value="Get Part Details" onclick="geting()" />
    Code (markup):
    Hope this helps.
     
    bledileka, Mar 24, 2011 IP