次のようなアプリケーションがあります。
) 患者 X の名前の横に、[チェックイン] というラベルの付いたボタンがあります。これはサーバー側に記録されます。
2) [チェックイン] ボタン をクリックすると、ユーザーが選択できる複数の場所を含むドロップダウン (最初のボタンを置き換える) がユーザーに表示されます。選択から場所を選択すると、サーバー側が再び更新されます。
3) 次に、ユーザーは、ステップ 2 を繰り返して、複数の場所を選択することを決定する場合があります。
4) 最後に、ユーザーが場所の選択を完了すると、ユーザーが手順 2 と 3 で場所をクリックしたのと同じ選択で、[チェックアウト] というタイトルの [チェックアウト] ボタンをクリックします。これをクリックすると、checkloc.php に送信され、ログに記録されます。
5) 最後に、ドロップダウンが消え、Checked Out という単語が表示されます。
さて、問題はページに多くの患者がいるということです (患者 A、患者 B、C、D など)。ページに 1 人の患者がいる場合、プロセスは上記の手順と同じように機能します。
残念ながら、ページに複数の患者がいる場合、(たとえば)患者 A の横にある [チェックイン] ボタンをクリックすると、2 つのドロップダウンが表示されます。名前の横にある [チェックイン] ボタンをクリックした人はいません。
これが私のコードです：
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="0">Select a location</option>
<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>
</select>
</form>
<button class="checkOut" data-param="cbutton_1">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
<!--START SECOND SET-->
<button class="checkIn" data-param="button_2">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_2'>
<option value="0">Select a location</option>
<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>
</select>
</form>
<button class="checkOut" data-param="cbutton_2">Check Out</button>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
およびjavascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide(); // Hide all Selects on screen
$('.finished').hide(); // Hide all checked Out divs on screen
$('.checkOut').hide();
$('.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: "checkin.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...
$('.locationSelect').show();
$('.checkOut').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
}
});
});
$('.checkOut').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: "checkout.php",
// Data used to set the values in Database
data: { "checkOut" : $(this).val(), "buttonId" : data},
success: function() {
// Hide the current Button clicked
$e.hide();
$('.locationSelect').hide();
// Get the immediate form for the button
// find the select inside it and show...
$('.finished').show();
}
});
});
});
</script>
詳細や説明が必要な場合は、お問い合わせください。