not displaying selected options in drop down menu - php

Question

Below I have a piece of code where it is suppose to display 2 drop down menus, one for building and other for rooms. What happens is when the user selects a building from the building drop down menu, using the ajax/jquery it will navigate to the room.php page and lists the rooms that belongs to the building selected and displays the list of rooms in the rooms drop down menu. This works fine:
<script type="text/javascript">
function getRooms() {
var building = jQuery("#buildingsDrop").val();
jQuery('#roomsDrop').empty();
jQuery('#roomsDrop').html('<option value="">Please Select</option>');
jQuery.ajax({
type: "post",
url: "room.php",
data: { building:building },
success: function(response){
jQuery('#roomsDrop').append(response);
}
});
}
</script>
...
<?php
$sql = "SELECT DISTINCT Building FROM Room";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->execute();
$sqlstmt->bind_result($dbBuilding);
$buildings = array(); // easier if you don't use generic names for data
$buildingHTML = "";
$buildingHTML .= '<select name="buildings" id="buildingsDrop" onchange="getRooms();">'.PHP_EOL;
$buildingHTML .= '<option value="">Please Select</option>'.PHP_EOL;
while($sqlstmt->fetch())
{
$building = $dbBuilding;
$buildingHTML .= "<option value='".$building."'>" . $building . "</option>".PHP_EOL;
}
$buildingHTML .= '</select>';
$roomHTML = "";
$roomHTML .= '<select name="rooms" id="roomsDrop">'.PHP_EOL;
$roomHTML .= '<option value="">Please Select</option>'.PHP_EOL;
$roomHTML .= '</select>';
?>
room.php:
$building = isset($_POST['building']) ? $_POST['building'] : '';
$sql = "SELECT Room FROM Room WHERE Building = ?";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->bind_param("s",$building);
$sqlstmt->execute();
$sqlstmt->bind_result($dbRoom);
$roomHTML = "";
while($sqlstmt->fetch()) {
$roomHTML .= "<option value='".$dbRoom."'>" . $dbRoom . "</option>".PHP_EOL;
}
echo $roomHTML;
The problem I am having though is the when a user selects an assessment, it is suppose to display the assessment's building and room options in the relevant drop down menus. But it is not selecting those options, they remain on the "Please Select" option. Why is this and how can I get the options shown?
Below is the view source code:
//Assessment drop down menu:
<p><strong>Assessments:</strong> <select name="session" id="sessionsDrop">
<option value="">Please Select</option>
<option value='71' style='color: green'>AKXMB - 30-11-2012 - 10:00</option>
</select> </p>
</form>
//Building drop down menu:
<select name="buildings" id="buildingsDrop" onchange="getRooms();">
<option value="">Please Select</option>
<option value='Canalside East'>Canalside East</option>
<option value='Canalside West'>Canalside West</option>
</select>
//Room drop down menu (list of rooms displayed in room.php):
<select name="rooms" id="roomsDrop">
<option value="">Please Select</option>
</select>
//Retrieve assessment information
//(Below is where problem lies where it is not selecting building and room options in drop down menu)
<script type="text/javascript">
$(document).ready( function(){
var sessioninfo = [{"SessionId":71,"Building":"Canalside East","Room":"CE01\/04"},{"SessionId":84,"Building":"Canalside East","Room":"CE01\/04"}];
$('#sessionsDrop').change( function(){
var sessionId = $(this).val();
if (sessionId !== '') {
for (var i = 0, l = sessioninfo.length; i < l; i++)
{
if (sessioninfo[i].SessionId == sessionId) {
var currentbuilding = $('#currentBuilding').val(sessioninfo[i].Building);
var editbuilding = $('#BuildingsDrop').val(sessioninfo[i].Building);
var currentroom = $('#currentRoom').val(sessioninfo[i].Room);
var editroom = $('#RoomsDrop').val(sessioninfo[i].Room);
var currentid = $('#currentId').val(sessioninfo[i].SessionId);
var editid = $('#newId').val(sessioninfo[i].SessionId);
break;
}
}
}
});
});
</script>
UPDATE:
Application
In the application select a "Module" from drop down menu and submit.
Below it should show some features. In the Assessment drop down menu
select any assessment.
You can see underneath that for "Current Assessment Details" it
displays the building and room in the readonly text inputs to
indicate what is the assessment's current building and room.
I want the same building and room to be selected in the drop down
menus in the "New Assessment's Room" section. You can see the
building is selected in the Building drop down menu but the Room is
not selected in the Room drop down menu.

Answer 1

Unless this was a copy/paste error, you are missing your <script></script> tags around your assessment function/script -
<script type="text/javascript">
$(document).ready( function(){
...
});
</script>
Edit
Your issue is that your id's are wrong case -
...
var editbuilding = $('#BuildingsDrop').val(sessioninfo[i].Building);
...
var editroom = $('#RoomsDrop').val(sessioninfo[i].Room);
Change to -
...
var editbuilding = $('#buildingsDrop').val(sessioninfo[i].Building);
...
var editroom = $('#roomsDrop').val(sessioninfo[i].Room);
see also - In the DOM are node ids case sensititve?
Edit - 2
Just add getRooms() just before var editroom to populate #roomsDrop so then you can set the selected.
var currentbuilding = $('#currentBuilding').val(sessioninfo[i].Building);
var editbuilding = $('#buildingsDrop').val(sessioninfo[i].Building);
var currentroom = $('#currentRoom').val(sessioninfo[i].Room);
getRooms();
var editroom = $('#roomsDrop').val(sessioninfo[i].Room);
var currentid = $('#currentId').val(sessioninfo[i].SessionId);
var editid = $('#newId').val(sessioninfo[i].SessionId);
Edit - 3
By default, $.ajax runs asynchronously in the browser, so the issue is that before your are getting to success: function(response){} in function getRooms() it has already moved on to var editroom = $('#roomsDrop').val(sessioninfo[i].Room);, and since jQuery('#roomsDrop').append(response); has not appended the option values to roomsDrop there is nothing to select. This can be fixed in 2 ways -
(1) quick fix using async: false
<script type="text/javascript">
function getRooms() {
var building = jQuery("#buildingsDrop").val();
jQuery('#roomsDrop').empty();
jQuery('#roomsDrop').html('<option value="">Please Select</option>');
jQuery.ajax({
type: "post",
url: "room.php",
data: { building:building },
async: false,
success: function(response){
jQuery('#roomsDrop').append(response);
}
});
}
</script>
This makes the $.ajax call synchronously, so it will not proceed to var editroom = $('#roomsDrop').val(sessioninfo[i].Room); until after the success: function(response){} is done. note be aware that async: false freezes the browser while it waits for the response, so it may hold up any other actions.
(2) using a callback function -
<script type="text/javascript">
function getRooms(callback) {
var building = jQuery("#buildingsDrop").val();
jQuery('#roomsDrop').empty();
jQuery('#roomsDrop').html('<option value="">Please Select</option>');
jQuery.ajax({
type: "post",
url: "room.php",
data: { building:building },
async: false,
success: function(response){
jQuery('#roomsDrop').append(response);
callback();
}
});
}
</script>
AND
getRooms(function(){
var editroom = $('#roomsDrop').val(sessioninfo[i].Room);});
This callback function will execute the var editroom = $('#roomsDrop').val(sessioninfo[i].Room); after getRooms() has finished, but will continue the rest of the script without holding up the browser