1

我有一个通过使用表单元素更新用户位置的网站。

用户做的第一件事是单击标有Check In的按钮。这会更新数据库（通过使用 AJAX 在另一个页面上的 php）。单击Check In后，用户会看到一个带有位置列表的选择/下拉列表。用户单击选择上的位置之一，然后再次使用该位置更新 php 页面。用户可以多次执行此操作，每次都更新数据库。当用户完成后，他向下滚动选择/下拉菜单到最后一个名为Check Out的选项。当用户点击结帐时，数据库将再次更新，并出现红色文本而不是选择“已签出”。

这是我的代码（减去 php/database 的东西）：

<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 回答