显示/隐藏表单元素的问题

我有一个通过使用表单元素更新用户位置的网站。显示/隐藏表单元素的问题

用户的第一件事就是点击一个标签为的按钮。签入。这更新数据库（通过使用AJAX在另一页上的php）。点击登录后，用户将看到一个选择/下拉列表以及一系列位置信息。用户点击select中的一个位置，然后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>

的问题是，当你打入住，选择没有出现。我查看了Chrome错误控制台，但没有发现错误。

感谢您的帮助！

来源

2012-10-23 Muhambi

你能检查它发布的实际URL吗？我认为这在Chrome开发者工具中可见（我知道你可以在Firefox的Firebug中看到它）。我怀疑你的服务器没有返回任何东西，所以成功函数没有被调用。你可能会另外为你的'.ajax'调用设置一个超时和一个错误处理程序，看看它是否被调用。 –

你应该删除孤独的 – sglessard

那么，在这里：

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

应该是这样的：

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

从

除此之外，验证您的Ajax查询返回正确，否则该代码不会运行。

来源

2012-10-23 00:31:15 Rafael

+ 1的鹰眼捕捉！ –

谢谢，有时你只需要休息一下，一双新眼睛。 :) – Rafael

你可能要考虑将错误处理您的Ajax调用，看看他们是否正在返回正确

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

这将有助于排除故障是否其ajax的问题或与之相关的其他东西，比如语法

来源

2012-10-23 00:43:17

显示/隐藏表单元素的问题

回答

相关问题