Question

Here’s the situation: I’m writing a simple AJAX application that performs CRUD functions. When the user double clicks on a particular element, the element changes into a text box so that they can edit inline. When the text box loses focus (code for which is below), the value of the textbox gets POSTed to a PHP script that updates the database.

All is groovy except for one thing. When I create a new record, which gets popped onto the top of the list with AJAX, I can’t edit that record without refreshing the page. I mean, the edit looks like it’s been committed, but when you refresh, it reverts back to the original. After refreshing, there are no issues.

To boil it down: When I try to run the following code on newly created rows in my table (both in the database and on the page), the edit appears to be made on the page, but never makes it to the database.

//Make changes on FOCUSOUT
    $('#editable').live('focusout', function(){
        var parentListItem = $(this).parents('li');
        var theText = $(this).val();
        var parentListItemID = parentListItem.parents('ul').attr('id');

        $(this).remove();
        parentListItem.html(theText);
        parentListItem.removeClass('beingEdited');

        $.post("databasefuncs.php?func=edit", { postedMessage: parentListItemID, fullTextContent: theText },
            function(result){
                if(result == 1) {
                    parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
                } else {
                    alert(result);
                }

            });

    });

Answer 1

I suppose you are not binding the event to the new DOM Element loaded via AJAX.