2010-09-02 12 views
2

奇怪的問題......IE8的jQuery用古怪。點擊()和阿賈克斯()函數這裏

UPDATE

增加了更多服務器端的調試之後,我發現handleLookupButton($("#select-circuit").val());handleLookupButton($(this).text());都使用相同的值調用ajax函數。

問題是handleLookupButton($("#select-circuit").val());不等待服務器結果。它只是吹過ajax循環,沒有發生,沒有成功,沒有錯誤。

服務器完成ajax函數稍後調用的頁面就好了,顯然ajax函數不再監聽它。我還沒有想出一個決議。再次,這隻發生在IE8上。

結束時更新

考慮下面的JSP代碼片段

<div id="main-controls" class="main-controls ui-widget ui-corner-all" align="center" style="padding-top: 5px;"> 
    <form action="#" id="lookupForm"> 

    <div align="right" style="padding-right: 10px; padding-bottom: 5px;"> 
    <label id="select-circuit-label" class="select-label" style="font-size: 8pt; font-weight: bold">Circuit: 
     <input type="text" id="select-circuit" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;"> 
    </label> 

    <label id="select-ne-label" class="select-label" style="font-size: 8pt; font-weight: bold">NE: 
     <input type="text" id="select-ne" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled"> 
    </label> 

    <label id="select-customer-label" class="select-label" style="font-size: 8pt; font-weight: bold">Customer: 
     <input type="text" id="select-customer" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled"> 
    </label> 
    </div> 

    <div align="center"> 
    <button id="lookup-button" class="lookup-button ui-widget" >Lookup</button> 
    </div> 
    </form> 
</div> 

<br></br> 

<div id="lookup-history-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;"> 
    <b>Lookup History</b> 
    <hr class="ui-widget ui-corner-all ui-header" width="80%"> 
    <br> 
    <div align="left"> 
     <ul id="lookup-history-list"> 
     </ul> 
    </div> 
</div> 

<div id="favorites-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;"> 
    <b>Favorites</b> 
    <hr class="ui-widget ui-corner-all ui-header" width="80%"> 
    <br> 
    <div align="left"> 
     <ul id="favorite-list" style="padding:2px; margin:2px; border-bottom: thin;"> 
      <c:if test="${fn:length(favorites)> 0}"> 
      <c:forEach var="favorite" items="${favorites}"> 
       <c:set var="companyTrimed" value="${favorite.company}"/> 
       <li> 
        <b><span class="past-lookup-circuit"><c:out value="${favorite.circuit}" /></span></b> 
        <span class="delete-favorite-icon ui-icon ui-icon-trash" 
          style="width: 14px; float: right;" 
          title="DELETE this Favorite" 
          circuit='<c:out value="${favorite.circuit}" />' 
          > 
        </span><br> 
        <span class="lightly-darkened" style="padding-left: 20px;"><c:out value="${fn:substring(companyTrimed,0,20)}" />...</span> 

       </li> 
      </c:forEach> 
      </c:if> 
     </ul> 
    </div> 
</div> 

我有以下的jQuery代碼

// This is to look up a circuit 
$("#lookup-button").live("click", function() { 
    handleLookupButton($("#select-circuit").val()); 
}); 

// Handle loading from history 
$(".past-lookup-circuit").live("click", function() { 
    $("#select-circuit").removeAttr("disabled"); 
    $("#select-ne").val(""); 
    $("#select-ne").attr("disabled", "disabled"); 
    $("#select-circuit").val($(this).text()); 
    $("#select-circuit").fadeOut("slow"); 
    $("#select-circuit").fadeIn("slow"); 
    handleLookupButton($(this).text()); 
}); 

function handleLookupButton(circuit) { 

var ne = ""; 
var data = "circuit=" + circuit + "&ne=" + ne + "&random=" + Math.random(); 

$("#test-results-container").html(
     "<b>Checking EON...</b><br><img src='images/small-loader.gif'>"); 
$("#test-results-container").show(); 

$(".tl1-results").hide(); 

alert("IE8 test: \n\n>" + data + "<"); 

$.ajax({ 
    type : "POST", 
    url : "test.html", 
    data : data, 
    success : function(xhr) { 

     alert("IE8 test: \n\n" + xhr); 

       //.... stuff snipped here ....  


    }, 
    error : function(xhr) { 
     $("#test-results-container").html("<span id='ajax-error-lookup'><b>Error: <b>" + xhr.statusText + "</span>"); 
     $("#test-detail-container").html(xhr.responseText); 
    } 
}); 

}

這裏是問題。

使用$("#lookup-button").live函數handleLookupButton(circuit)運行到第一個alert(),然後靜默地在.ajax函數中進行提取。沒有錯誤,它只是表現得好像它永遠不會存在。

但是,如果我使用$(".past-lookup-circuit").live函數。 handleLookupButton(circuit)運行得很好,包括通過.ajax函數。

對於這兩個執行,var數據字符串看起來都是相同的。即使我在handleLookupButton(circuit)函數中將電路編號硬編碼,$("#lookup-button").live也不起作用,但$(".past-lookup-circuit").live確實起作用。

我敢肯定我在這裏錯過了一些簡單的東西,但我很難過。順便說一句,這在所有其他瀏覽器和IE7兼容模式下工作正常。

+1

您是否嘗試在故障情況下添加「完整」處理程序,並查看它是否完成?另外,你可以在服務器端調試嗎?在失敗的情況下它是否完全符合要求? – OneDeveloper 2010-09-02 08:33:50

+0

我在服務器端使用廣泛的日誌記錄。 ajax請求永遠不會被提交。添加「完整」處理程序沒有效果,因爲ajax請求永遠不會被觸發。我將繼續使用調試器來代碼,希望我能從中收集一些信息。 – Bill 2010-09-02 15:53:54

+0

@OneDeveloper添加更多的服務器端記錄確實有幫助,謝謝。 – Bill 2010-09-02 18:44:23

回答

1

而不是使用<button>的請嘗試使用

<input type="button" id="lookup-button" class="lookup-button ui-widget" value="Loopup" /> 
+0

精美的作品。 – Bill 2011-03-07 18:31:26

0

好的,找到了解決方法。它是無用的,但它的工作。我不接受這個答案,因爲我想知道它爲什麼會這樣做。我自己回答,而不是編輯問題,以便更容易被人看到和有用。

問題在於點擊「按鈕」標籤。

<button id="lookup-button" class="lookup-button ui-widget" >Lookup</button> 

工作作爲發射了一個阿賈克斯功能的錨。

<span id="lookup-span">Lookup</span> 

確實有效。

Bleh,到我的下一個IE8 bug「功能」。

1
你知道

,你會這樣攻擊的另一種方式,如果你仍然想使用$(「按鈕#查找按鈕」)。點擊()來觸發一個ajax調用...

我已經寫了噸的「GUI捕手」代碼(如點擊事件等),然後調用我的ajax函數,傳遞我需要的參數。這樣,它爲我提供了重用相同的ajax函數用於其他類似GUI事件請求的機會......

我還提供了一個存儲我的'成功'處理函數的變量。這樣,我的ajax調用的成功結果然後調用另一個函數來處理結果... div中的成功或錯誤條件面板(<span class="success">congratulations!</span>類型面板),清除選中的項目或textarea元素等...

可能看起來「更復雜」,但它爲我提供了更大的靈活性...

您的里程可能會有所不同。 :)