php - ドロップダウンメニューで更新されたデータをすぐに変更する方法

Question

このリンクアプリケーションをクリックして表示できるアプリケーションがあります

アプリケーションを開くときは、次の手順に従ってください。

アプリケーションを開くと、コース用とモジュール用の 2 つのドロップダウンメニューが表示されます。関連するドロップダウンメニューでコースINFO101 - ...とモジュールを選択CHI2513 - ...し、[コースとモジュールを送信] ボタンをクリックしてください。
以下にいくつかの詳細が表示されます。アセスメント用の別のドロップダウンメニューが表示されます。ドロップダウンメニューから任意のアセスメントを選択してください。選択したアセスメントの詳細が、「新しい日付」と「新しい開始時刻」を除く下のテキスト入力に表示されます。
カレンダーと時計のアイコンをクリックして、関連するテキスト入力の「新しい日付」と「新しい開始時刻」を選択してください。完了したら、下の [日付/開始時刻の更新] ボタンをクリックします。
確認ボックスが表示されるので、[OK] をクリックします。アップデートが成功したことを示すメッセージが下に表示されますが、ここに問題があります。評価のドロップダウンメニューを見ると、変更したばかりの評価について、新しい日時が表示されず、古い日付が表示されていることがわかります。ページを更新して手順 1 と 2 を実行すると、ドロップダウンメニューに更新日時が表示されます。

私の質問は、ユーザーが更新の発生を確認した直後に、選択した評価のドロップダウンメニューに表示される新しい日付と時刻を取得して、リフレッシュが必要ですか？

また、現在の日付と開始時刻のテキスト入力は、更新後に新しい日付と開始時刻を表示するように変更する必要があり、新しい日付と新しい開始時刻のテキスト入力は空白に戻る必要があります。

以下は、アプリケーションを表示する editsessionadmin.php ページです。

<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;


}

?>

以下は、更新を実行して成功/エラーメッセージを表示するために ajax が呼び出す updatedatetime.php です。

<?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>";

}

        ?>

score 1 · Accepted Answer

次のJavascriptは、あなたが望むことをするはずです。これは、AJAX コードの success 関数から呼び出す必要があります。

//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("");

php - ドロップダウンメニューで更新されたデータをすぐに変更する方法

1 に答える 1

Related

Reference