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

Reply via email to