Question

我有一个界面，旨在鼓励管理员用户选择存在的现有名称条目，然后使其可编辑。

渲染的代码就像这样开始

before

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

after

出现的问题是，其中一位管理员告诉我，当他在选择菜单中选择一个没有任何变化的人时 - 例如文本输入没有出现，选择输入也不会消失。

用户和我都在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();                                
});

Answer 1

您说用户浏览器中没有错误。我认为有一个错误，但你没有看到它。

通过执行以下操作记录ajax调用中的错误：

$.ajax({
  ...
}).error(function (data, textStatus, xhr) {
     console.log("error when using ajax" + data);
});

Answer 2

如果在现有文件上实现了新功能，则可能是Cache问题。

如果要求用户清除缓存不是一个选项，请尝试在javascript中添加“版本”：

<script src="/js/yourjavascript.js?20130218" type="text/javascript">

之后的值？不会影响javascript但更改资源的名称，告诉浏览器该文件不在缓存中，因此他必须请求它。

您还可以在控制台上检查服务器响应，以确保服务器在两种情况下都能正确回复。

两位Chrome用户与ajax调用有不同的结果

2 个答案: