我有一个界面,旨在鼓励管理员用户选择它们存在的现有名称条目,然后使其可编辑。
渲染的代码是这样开始的
<td class="selectname" colspan="2" style="width: 220px; display: table-cell;">
<select name="PersonSelect" id="PersonSelect" style="font-size:10px">
<option></option>
<option value="123">Aamodt, Jodi</option>
...
并且在进行选择后,选择值被清除并且 TD 被隐藏
<td class="selectname" colspan="2" style="width: 220px; display: none;">
并显示两个新输入:
<td class="entername" style="display: table-cell;"><input type="text" size="12" name="First" id="First" value="" class="required valid"></td>
<td class="entername" style="display: table-cell;"><input type="text" size="12" name="Last" id="Last" value="" class="required valid"></td>
出现的问题是,其中一位管理员告诉我,当他在选择菜单中选择一个人时,没有任何变化——例如,文本输入没有出现,选择输入也没有消失。
用户和我都在 Chrome 中访问该页面。用户不是特别技术,但给出的屏幕截图在症状上很清楚。在他的 Chrome 中没有关闭 JavaScript,因为在这些相同的页面加载期间,用户的 JavaScript 验证例程是成功的。用户和我正在加载相同的数据集,因此这不应该是与数据本身相关的损坏问题。
ajax更改功能如下。
有什么建议吗?
$("#PersonSelect").change(function() {
$.ajax({
url: 'person_form_populater.php?person=' + $("#PersonSelect").val() + '&entity=' + $("#Entity").val(),
dataType: 'json',
success: function(data) {
if (data['found']) {
alert('There is already a record linking that person to this entity');
$('#First_' + data['found']).focus();
var origColor = $('#bmformtable_' + data['found']).css("background-color");
$('#bmformtable_' + data['found']).css("border", '0px solid #f00');
$('#bmformtable_' + data['found']).animate({
borderWidth: 5
}, 2000, "linear", function() {
$('#bmformtable_' + data['found']).animate({
borderWidth: 0
}, 2000, "linear", function() {
});
});
} else {
$('#togglelink').click();
$('#First').val(data['First']);
$('#Last').val(data['Last']);
$('#Occupation').val(data['Occupation']);
if (data['Gender'] == 'Male') {
$("#Gender").attr('checked',true);
} else if (data['Gender'] == 'Female') {
$("#Gender2").attr('checked',true);
} else {
$("#Gender").attr('checked',false);
$("#Gender2").attr('checked',false);
}
$('#Race').val(data['Race']);
$('#Income').val(data['Income']);
$('#Person').val(data['ID']);
}
}
});
});
// 编辑 此函数允许用户“取消选择”已加载的记录并再次访问选择菜单:
$("#togglelink,#togglelink2").click(function(){
$('#PersonSelect option').attr('selected', false);
$('#First').val('');
$('#Last').val('');
$('#Occupation').val('');
$("#Gender").attr('checked',false);
$("#Gender2").attr('checked',false);
$('#Race').val('');
$('#Income').val('');
$('#Person').val('');
$(".entername, .selectname, #togglelink, #togglelink2").toggle();
});