Issue with ajax update with mysql

Question

I'm building a location finder application for a doctors office. In the app, there is a list of multiple patients waiting to be checked in.

For example, the first patient is Patient X. Here's the step by step process (the easiest way to describe my problem)

1) Next to Patient X's name is a button labeled Check In. Upon clicking Check In, the patient id (called selectid) is sent along via Ajax to changeloc.php where the time and date of check in are logged.

2) Upon success, the user is then presented with a dropdown (replacing the initial button) with the multiple locations the user could choose. Upon selecting a location from the select, the variable locationSelect will be sent to changeloc.php where it will be logged.

3) The user then might decide to choose multiple locations, repeating step 2

4) At the end, when the user is done selecting locations, he clicks on the last option in the same select where the user had clicked locations in steps 2 and 3, titled Check Out. Upon clicking this, it is sent to checkloc.php and logged.

5) Finally, the dropdown dissapears and the words Checked Out

Here's my code:

PHP

<?php

 date_default_timezone_set('America/Denver');

 $apptid = $_REQUEST['selectid'];
 $currentlocation = $_REQUEST['locationSelect'];
 $currentlocationstart = date("Y-m-d H:i:s"); 
 $checkin = $_REQUEST['checkIn'];
 $checkout = $_REQUEST['checkOut'];
 /*** mysql hostname ***/
 $hostname = 'localhost';

 /*** mysql username ***/
 $username = '***********';

 /*** mysql password ***/
 $password = '**********';


$conn = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);
    /*** The SQL SELECT statement ***/

if(!empty($currentlocation)){
   //$sql2 = "UPDATE history SET ";
   //$query = $conn->prepare($sql2);
   //$query->execute(array(':apptid'=>$apptid, ':locationstart'=>$locationstart));
   $sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
   $q = $conn->prepare($sql);
   $q->execute(array($currentlocation,$currentlocationstart, $apptid));

}

if(!empty($checkin)){
   $sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
   $q = $conn->prepare($sql);
   $q->execute(array($checkin,$currentlocationstart, $apptid));
   //$sql2 = "insert into history (apptid, locationstart) VALUES (:apptid,:locationstart)";
   //$query = $conn->prepare($sql2);
   //$query->execute(array(':apptid'=>$apptid, ':locationstart'=>$locationstart));
}

if(!empty($checkout)){
   $sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
   $q = $conn->prepare($sql);
   $q->execute(array($checkout,$currentlocationstart, $apptid));
}
?>

Javascript

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();  // Hide all Selects on screen
$('.finished').hide();        // Hide all checked Out divs on screen

$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('-')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $e.nextAll('form').first().find('.location').show();
        }
    });
});

$('.locationSelect').change(function() {
    $e = $(this);
    var data = $e.data("param").split('-')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
});
$('.locationSelect option[value="CheckOut"]').click(function() {
    var $e = $(this);
    var data = $e.closest('select').data("param").split('-')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    // from which checkout was processed
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "checkOut" : $(this).val(), "selectid" : data},
        success: function() {
            // Get the immediate form for the option
            // find the first finished div sibling of form
            // and then show it..
            $e.closest('form').nextAll('.finished').first().show();
            // Hide the current select in which the option was selected
            $e.closest('.locationSelect').hide();
            alert('done');
        },
        error: function(request) {
            alert(request.responseText);
        }
    });
});
});
</script>

and the html:

<button class="checkIn" data-param="button-1">Check In</button>

   <form method='post' class='myForm' action=''>
      <select name='locationSelect' class='locationSelect' data-param="location-1">
        <option value='1'>Exam Room 1</option>
        <option value='2'>Exam Room 2</option>
        <option value='3'>Exam Room 3</option>
        <option value='4'>Exam Room 4</option>
        <option value='CheckOut'>Check Out</option>
      </select>
    </form>

<div class='finished' style='color:#ff0000;'>Checked Out</div>

The problem is:

1) When the user clicks the Check In button, the button dissapears like it should, but the dropdown doesn't appear (which probably means nothing else will appear after the dropdown)

2) The database isn't being updated with anything.

Thanks for any and all help! Please ask for details if you need any more!

Answer 1

The code $e.nextAll('form').first().find('.location').show(); is looking for an element with the class "location" while the form in the html has a select with the class "locationSelect". I think you wanted these two classes to read the same.