Странная проблема здесь ...
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) работает до первого оповещения (), а затем беззвучно выполняет функцию .ajax. Без ошибок, просто действует так, как будто его там никогда не было.
Однако, если я использую функцию $(".past-lookup-circuit").live. handleLookupButton(circuit) работает просто отлично, в том числе через функцию .ajax.
В обоих случаях строка данных var выглядит одинаково. Даже если я жестко закодирую номер канала для функции handleLookupButton(circuit), $("#lookup-button").live не работает, но $(".past-lookup-circuit").live работает.
Я уверен, что мне здесь не хватает чего-то простого, но я в тупике. Кстати, это прекрасно работает во всех других браузерах и в режиме совместимости ie7.