I have a table full of cells where i want the user to be able to click on a cell to convert it to an input box for editing (ala excel editing). When the user leaves the "cell" (onblur event) i want to check the content of the input for any changes, and if changed post it to the server with an .ajax call.
In FF it works almost perfectly, except if i click fast from cell to cell, then it somtimes "misses" and altough the previous is converted back to text and saved to db, the new one is not "selected". In IE7 when i click in a "cell" it gets converted just fine, i can type and when i leave the "cell" it updates correctly. However, if i click in a "cell", then tries to click in the "cell" again (after its converted to an input), IE7 comes with "Error 'undefined' is null or not an object." on this line: var cellOldValue = $(event.target).html(); Here is the relevant code: Setup the event handler: $('tbody td').click(function(event){cellClicked(event);}); Here is the function: function cellClicked(event){ if ($('#selected') != null && $('#selected').length > 0){ // blur event still firing setTimeout(cellClicked(event),25); //wait until the blur event is done before converting the next field } var cellOldValue = $(event.target).html(); // IE7 bug when clicking on the same cell twice? $(event.target).html('<input id="selected" type="text" value="' + $ (event.target).html() + '"/>'); $(event.target).children("input:first").focus(); $(event.target).children("input:first").blur(function (event){ if (cellOldValue != $('#selected').val()){ var i = 0; // find the index of the cell, could have used cellIndex but it apparently has some problems in som browsers var td = $(event.target).parent(); while (td.prev().length != 0){ td = td.prev(); i++; } cellPostData($(event.target).parent().parent().attr("id"), i, $ ('#selected').val()); //save data } $(event.target).parent().html($('#selected').val()); //remove the input at set the new value in the cell }); }