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

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开发者_如何学Go: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.

---

Instead of using <button> Try using

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

---

you know, you could attack this another way, if you still want to use $('button#lookup-button').click() to fire an ajax call ...

i've written tons of "GUI catcher" code (like the click event, etc) that then calls my ajax function, passing the params i need. that way, it provides me the opportunity to reuse the same ajax function for other GUI-like event requests ...

i also provide a variable that stores my 'success' handler function. that way, the successful result of my ajax call then calls another function to handle results ... either success or error condition panels within the div (<span class="success">congratulations!</span> types of panels), clearing checked items or textarea elements, etc ...

might seem "more complicated" but it provides greater flexibility, for me ...

your mileage may vary. :)

---

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