兩個Chrome瀏覽器用戶從Ajax調用不同的結果

Question

我有一個旨在鼓勵管理員用戶選擇他們存在的現有名稱條目，但隨後可對其進行修改的接口。

渲染代碼開始了，像這樣

<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中訪問該頁面。用戶不是特別的技術，但給出截圖明確的症狀。由於JavaScript驗證例程在這些相同頁面加載期間爲用戶取得成功，因此他的Chrome中沒有關閉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

如果新功能是在現有文件中實現它可能是一個緩存的問題。

如果要求用戶清除緩存是不是一種選擇，嘗試附加一個「版本」的javascript：

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

後的值是多少？不會影響JavaScript，但會更改資源的名稱，告訴瀏覽器該文件不在緩存中，因此他必須請求它。

你也可以查看控制檯上的服務器響應，以確保服務器在這兩種情況下正確地回答。