Question

I have an application which you can view by clicking on this link application

When you open the application, please follow these steps below:

1. When you open application, you will see 2 drop down menus, one for Course and one for Module, please choose Course INFO101 - ... and Module CHI2513 - ... in the relevant drop down menus and click on the “Submit Course and Module” button.

2. You will see some details being displayed below. You will see another drop down menu displayed for Assessments, please select any assessment from the drop down menu, you will see the details of the assessment selected appears in the text inputs below except for “New Date” and “New Start Time”.

3. Please click on the calender and clock icons to select a “New Date” and a “New Start Time” for the relevant text inputs. Once you have done that, then click on the “Update Date/Start Time” button below.

4. A confirmation box will appear, click OK. Now a message will appear below stating that the update was successful but here is the problem. If you look at the drop down menu for assessments, you can see that for the assessment you have just changed, it does not show the new time and date, it still shows the old one. Now if you refresh the page and follow steps 1 and 2, then it shows the update time and date in the drop down menu.

So what my question is that how can I get the new date and time to be displayed in the drop down menu for the selected assessment, straight after the user has confirmed the update to happen so that they can see that the change has happened without the need for a refresh?

Also the Current Date and Start Time text inputs needs to change to display the new date and start time after the update and the New Date and New Start Time text inputs should go back to blank.

Below is the editsessionadmin.php page where it displays the application:

<script type="text/javascript">

function submitform() {    

$.ajax({
type: "POST",
url: "updatedatetime.php",
data: $('#updateForm').serialize(),
success: function(html){
$("#targetdiv").html(html);
}
});        
}

function showConfirm(){

var examInput = document.getElementById('newAssessment').value;
var dateInput = document.getElementById('newDate').value;
var timeInput = document.getElementById('newTime').value;

if (editvalidation()) {

var confirmMsg=confirm("Are you sure you want to update the following:" + "\n" + "Exam: " + examInput +  "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);

if (confirmMsg==true)
{
submitform();   
}
}
} 

$('body').on('click', '#updateSubmit', showConfirm); 



</script>   

<style>
.red{ color:red; }
.green{ color:green; }
</style>

<?php

// connect to the database
include('connect.php');
include('noscript.php');

/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
die();
}

$newassessment = (isset($_POST['Assessmentnew'])) ? $_POST['Assessmentnew'] : '';

$sql = "SELECT CourseId, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<select name="courses" id="coursesDrop" onchange="getModules();">'.PHP_EOL; 
$courseHTML .= '<option value="">Please Select</option>'.PHP_EOL;  

while($sqlstmt->fetch()) 
{ 
$course = $dbCourseId;
$coursename = $dbCourseName; 
$courseHTML .= "<option value='".$course."'>" . $course . " - " . $coursename . "</option>".PHP_EOL;  

$outputcourse = ""; 
$outputcourse .= "<p><strong>Course:</strong> " . $course .  " - "  . $coursename . "</p>";

} 

$courseHTML .= '</select>'; 

$moduleHTML = "";  
$moduleHTML .= '<select name="modules" id="modulesDrop">'.PHP_EOL; 
$moduleHTML .= '<option value="">Please Select</option>'.PHP_EOL;  
$moduleHTML .= '</select>'; 


?>

<script type="text/javascript">

function getModules() { 
var course = jQuery("#coursesDrop").val(); 
jQuery('#modulesDrop').empty(); 
jQuery('#modulesDrop').html('<option value="">Please Select</option>'); 
jQuery.ajax({ 
type: "post", 
url:  "module.php", 
data: { course:course }, 
success: function(response){ 
jQuery('#modulesDrop').append(response); 
} 
}); 


}


</script> 

<h1>EDIT AN ASSESSMENT'S DATE/START TIME</h1>   

<p>You can edit assessment's Date and Start time on this page. Only active assessments can be editted.</p>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();">
<table>
<tr>
<th>Course: <?php echo $courseHTML; ?></th>
<th>Module: <?php echo $moduleHTML; ?></th>
</tr>
</table>
<p><input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" /></p>
<div id="moduleAlert"></div>
</form>

<?php

if (isset($_POST['moduleSubmit'])) {    

$outputmodule = ""; 

$moduleInfo = explode("_", $_POST['modules']);
$moduleId = $moduleInfo[0];
$moduleName = $moduleInfo[1];
$outputmodule = sprintf("<p><strong>Module:</strong> %s - %s</p>", $moduleId, $moduleName);

echo $outputcourse;
echo $outputmodule;

$sessionquery = "
SELECT SessionId, SessionName, SessionDate, SessionTime, ModuleId
FROM Session
WHERE
(ModuleId = ?)
ORDER BY SessionName 
";

$sessionqrystmt=$mysqli->prepare($sessionquery);
// You only need to call bind_param once
$sessionqrystmt->bind_param("s",$moduleId);
// get result and assign variables (prefix with db)

$sessionqrystmt->execute(); 

$sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbModuleId);

$sessionqrystmt->store_result();

$sessionnum = $sessionqrystmt->num_rows();   

if($sessionnum ==0){
echo "<p>Sorry, You have No Assessments under this Module</p>";
} else { 

$sessionHTML = '<select name="session" id="sessionsDrop">'.PHP_EOL;
$sessionHTML .= '<option value="">Please Select</option>'.PHP_EOL;           

while ( $sessionqrystmt->fetch() ) {
if(time() > strtotime($dbSessionDate." ".$dbSessionTime)){
$class = 'green';
} else {
$class = 'red';
}
$sessionHTML .= sprintf("<option value='%s' style='color: %s'>%s - %s - %s</option>", $dbSessionId, $class, $dbSessionName, date("d-m-Y",strtotime($dbSessionDate)), date("H:i",strtotime($dbSessionTime))) . PHP_EOL;  
}


$sessionHTML .= '</select>';


$assessmentform = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'>
<p><strong>Assessments:</strong> {$sessionHTML} </p>   
</form>";

echo $assessmentform;

}



$editsession = "<form id='updateForm'>

<p><strong>Current Assessment's Date/Start Time:</strong></p>
<table>
<tr>
<th>Assessment:</th>
<td><input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Date:</th>
<td><input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Start Time:</th>
<td><input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='currentAlert'></div>

<p><strong>New Assessment's Date/Start Time:</strong></p>
<table>
<tr>
<th>Assessment:</th>
<td><input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Date:</th> 
<td><input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Start Time:</th> 
<td><input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/><span class='timepicker_button_trigger'><img src='Images/clock.gif' alt='Choose Time' /></span> </td>
</tr>
</table>
<div id='datetimeAlert'></div>

</form>

<button id='updateSubmit'>Update Date/Start Time</button>

<div id="targetdiv"></div>
";

echo $editsession;


}

?>

below is the updatedatetime.php which the ajax calls in order to perform the update and display the success/error message:

<?php

 // connect to the database
 include('connect.php');

  /* check connection */
  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
  }

$sessionname = (isset($_POST['Assessmentnew'])) ? $_POST['Assessmentnew'] : ''; 
$sessiondate = (isset($_POST['Datenew'])) ? $_POST['Datenew'] : ''; 
$sessiontime = (isset($_POST['Timenew'])) ? $_POST['Timenew'] : ''; 

$formatdate = date("Y-m-d",strtotime($sessiondate));
$formattime = date("H:i:s",strtotime($sessiontime));

$updatesql = "UPDATE Session SET SessionDate = ?, SessionTime = ? WHERE SessionName = ?";                                           
$update = $mysqli->prepare($updatesql);
$update->bind_param("sss", $formatdate, $formattime, $sessionname);
$update->execute();

$query = "SELECT SessionName, SessionDate, SessionTime FROM Session WHERE SessionName = ?";
// prepare query
$stmt=$mysqli->prepare($query);
// You only need to call bind_param once
$stmt->bind_param("s", $sessionname);
// execute query
$stmt->execute(); 
// get result and assign variables (prefix with db)
$stmt->bind_result($dbSessionName, $dbSessionDate, $dbSessionTime);
//get number of rows
$stmt->store_result();
$numrows = $stmt->num_rows();

if ($numrows == 1){

echo "<span style='color: green'>Your Assessment's new Date and Time have been updated</span>";

}else{

echo "<span style='color: red'>An error has occured, your Assessment's new Date and Time have not been updated</span>";

}

        ?>

Answer 1

The following Javascript should do what you want. This should be called from the success function of your AJAX code.

//Get and store the new date and time.
var newDate = jQuery("#newDate").val();
var newTime = jQuery("#newTime").val();

//Set your current date and time to your new date and time.
jQuery("#currentDate").val(newDate);
jQuery("#currentTime").val(newTime);

//Find the currently selected session and update it.
var selectedOption = jQuery("#sessionsDrop option:selected");
var label = selectedOption.text().split(" - ");
selectedOption.text(label[0] + " - " + newDate + " - " + newTime);

//Clear the new date and time fields.
jQuery("#newDate").val("");
jQuery("#newTime").val("");