Hi,
Currently I have my chained select menus working great. When I select an option in the 2nd dropdown, it updates the contents of the 1st dropdown. From a MySQL database no less.
However, when the page loads initially, the first dropdown menu is completely empty.
I would prefer to populate the <select> 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?
Would I be making this change in the PHP script (dept_results_ajax.php) or in one of my JS files perhaps>
Here are my files for reference:
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.