1

フォーム要素を使用してユーザーの場所を更新する Web サイトがあります。

ユーザーが最初に行うことは、 Check Inというラベルの付いたボタンをクリックすることです。これにより、データベースが更新されます (AJAX を使用した別のページの php)。[チェックイン] をクリックすると、場所のリストを含む選択/ドロップダウンがユーザーに表示されます。ユーザーが選択した場所の 1 つをクリックすると、php ページがその場所で再び更新されます。ユーザーは、データベースを更新するたびに、これを何度も行うことができます。ユーザーが完了すると、チェックアウトと呼ばれる最後のオプションまで選択/ドロップダウンをスクロールダウンします。ユーザーがチェックアウトを押すと、データベースがもう一度更新され、「チェックアウト済み」という選択の代わりに赤いテキストが表示されます。

これが私のコードです（php /データベースのものを差し引いたもの）：

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

<script type="text/javascript">

$(document).ready(function() {
  // Hide the form on load      
  $('.locationSelect').hide();
  // Hide the completed message
  $('.finished').hide();
});

// When someone clicks checkin this function will be called
$('.checkIn').click(function(){
$e = $(this);
 $.ajax({
    type: "POST",
    url: "changeloc.php", // this page adds date to the database
    data: "checkIn="+$(this).val(), // we are sending $_POST['checkIn']
    success: function(){
       // Display the form once AJAX is finished 
       $('#myForm').show();
    }
 });
});

// This function will be called when someone uses the select field
$('.[locationSelect]').change(function(){
  $e = $(this);
  $.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "locationSelect="+$(this).val(),
    success: function(){
       // Display the form once the AJAX is finished 
       alert('Done');
    }
  });
});


</script>

ここにhtmlがあります：

<button class="checkIn">Check In</button>

<form method='post' class='myForm' action=''>

<td>
<select name='locationSelect' class='locationSelect'>
    <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='Check Out'>CheckOut</option>
</select>
</form>


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

問題は、Check Inを押しても選択が表示されないことです。Chrome エラー コンソールを確認しましたが、エラーは発生しませんでした。

助けてくれてありがとう！

4

2 に答える 2

3

さて、ここに：

// Display the form once AJAX is finished 
$('#myForm').show();

これでなければなりません：

// Display the form once AJAX is finished 
$('.myForm').show();

それとは別に、Ajax クエリが適切に返されることを確認してください。そうでない場合、このコードは実行されません。

于 2012-10-23T00:31:15.663 に答える
0

ajax呼び出しにエラー処理を配置して、正しく返されるかどうかを確認することを検討してください。

 success: function(){
  alert('done');
 },
 error: function(request){
  alert(request.responseText);
 }

これは、ajaxの問題であるか、構文などの他の問題に関連しているかをトラブルシューティングするのに役立ちます

于 2012-10-23T00:43:17.080 に答える