// dept.js

/*  This page does all the magic for applying
 *  Ajax to an employees listing form.
 *  The department_id is sent to a PHP 
 *  script which will return data in HTML format.
 */
 
// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();
  
  // Attach the function call to the form submission, if supported:
  if (ajax) {
  
    // Check for DOM support:
    if (document.getElementById('results')) {
    
      // Add an onsubmit event handler to the form:
      document.getElementById('dept_form').onsubmit = function() {
      
        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.
        
        // Get the department_id:
        var did = document.getElementById('did').value;
        
        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));
      
        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }
        
        // Send the request:
        ajax.send(null);
      
        return false; // So form isn't submitted.

      } // End of anonymous function.
      
    } // End of DOM check.
    
  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is complete:
  if (ajax.readyState == 4) {
  
    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {
      
      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;

      // Make the results box visible:
      results.style.display = 'block';
      
    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }
    
  } // End of readyState IF.
  
} // End of handleResponse() function.