IE8 jquery weirdness with .click() and .ajax() function.

Question

Strange problem here...

UPDATE

After adding a lot more server side debugging, I found that handleLookupButton($("#select-circuit").val()); and handleLookupButton($(this).text()); both do call the ajax function with the same values.

The problem is that handleLookupButton($("#select-circuit").val()); does not wait around for the server results. It just blows through the ajax loop like nothing happened, no success, no error.

The server finishes the page that the ajax function called a moment later just fine, apparently the ajax function is no longer listening for it. I haven't figured out a resolution yet. Once again this only happens with IE8.

END UPDATE

Given the following jsp snippet

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

I have the following jQuery code

// 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());
});

Also

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);
    }
});

}

Here is the issue.

With the $("#lookup-button").live function The handleLookupButton(circuit) runs as far as the first alert(), then bails silently at the .ajax function. No error, it just simply acts as if it was never there.

However if I use the $(".past-lookup-circuit").live function. The handleLookupButton(circuit) runs just fine, including through the .ajax function.

With both executions, the var data string looks the same. Even if I hardcode in a circuit number to the handleLookupButton(circuit) function, the $("#lookup-button").live doesn't work, but the $(".past-lookup-circuit").live does.

I'm sure I'm missing something simple here, but I am stumped. Btw, this works fine in all other browsers, and ie7 compatibility mode.

Answer 1

Ok, found a workaround. It's inane but it works. I'm not accepting this answer because I want to know why it does what it does. I'm answering it myself rather than editing the question so that it's more likely to be seen and useful for others.

The problem is with clicking a "button" tag.

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

does not work as an anchor for firing off a .ajax function.

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

Does work.

Bleh, onto my next IE8 bug "feature".