CODEWITHSUNDEEP
phpmysqlajaxselectmenu
michaelmcgurk
michaelmcgurk

Reputation: 6509

Chained Select Menu works great, but requires small tweak

Currently I have my chained select menus working great.

However currently when the page loads the first dropdown menu is completely empty.

I would prefer to populate the menu initially with ALL the results from: SELECT * FROM employees and then if the user chooses an option from 2nd dropdown, it would then initiate the AJAX and filter the results based on the selection.

Is this possible?

Here are my files:

dept_form.html (HTML Form) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Employees by Department</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
    <script src="dept.js" type="text/javascript"></script>
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="" method="get" id="dept_form">
<select id="results"></select>
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
</p>
</form>

</body>
</html>

ajax.js :

// ajax.js

/*  This page defines a function for creating an Ajax request object.
 *  This page should be included by other pages that 
 *  need to perform an XMLHttpRequest.
 */

/*  Function for creating the XMLHttpRequest object.
 *  Function takes no arguments.
 *  Function returns a browser-specific XMLHttpRequest object
 *  or returns the Boolean value false.
 */
function getXMLHttpRequestObject() {

    // Initialize the object:
    var ajax = false;

    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest) {

        // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // Older IE browsers

        // Create type Msxml2.XMLHTTP, if possible:
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) { // Create the older type instead:
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }

    } // End of main IF-ELSE IF.

    // Return the value:
    return ajax;

} // End of getXMLHttpRequestObject() function.

dept.js :

// 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:
      $('#did').change(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.

dept_results_ajax.php

<?php # dept_results_ajax.php

// No need to make a full HTML document!

// Validate the received department ID:
$did = 0; // Initialized value.
if (isset($_GET['did'])) { // Received by the page.
  $did = (int) $_GET['did']; // Type-cast to int.
}

// Make sure the department ID is a positive integer:
if ($did > 0) {

  // Get the employees from the database...

  // Include the database connection script:
  require_once('mysql.inc.php');

  // Query the database:
  $q = "SELECT * FROM employees WHERE department_id=$did ORDER BY last_name, first_name";
  $r = mysql_query($q, $dbc);

  // Check that some results were returned:
  if (mysql_num_rows($r) > 0) {

    // Retrieve the results:
    while ($row = mysql_fetch_array($r, MYSQL_ASSOC)) {

      ?>
      <option value="<?php echo $row['last_name']; ?>"><?php echo $row['last_name']; ?></option>
      <?php
    } // End of WHILE loop.

  } else { // No employees.
    echo '<p class="error">There are no employees listed for the given department.</p>';
  }

  // Close the database connection.
  mysql_close($dbc);

} else { // Invalid department ID!
  echo '<p class="error">Please select a valid department from the drop-down menu in order to view its employees.</p>';
}

?>

Can someone explain the change I need to make in my scripts to achieve what I require.

Many thanks for any pointers. Very much appreciated.

Upvotes: 3

Views: 1212

Answers (1)

Daan
Daan

Reputation: 3348

You can do this in two ways: first, you can have a PHP script generate dept_form.html (which would then become a .php file, of course) and put all the results from your MySQL query into the menu; the second (and preferred, especially for large data sets) approach would be to insert a few lines after if (document.getElementById('results')) { in dept.js to load all the data, so even before setting the function on $('#did').change events. These lines would then simply make an AJAX call to the PHP script and get all the data you need.

By the way, you may want to consider using jQuery, which will make your life a lot easier in terms of AJAX calls. Hope this helps a bit.

EDIT

Try using something like this:

// Open the connection:
ajax.open('get', 'dept_results_ajax.php');

// Function that handles the response:
ajax.onreadystatechange = function() {
    // Pass it this request object:
    handleResponse(ajax);
}

// Send the request:
ajax.send(null);

Then, in your PHP script, just put the same code you already have under the else clause, except for the parts that are needed for processing the department ID, so pretty much whenever you have $did or a WHERE clause.

Upvotes: 2

Related Questions