Question

I want this to be set up so that when a certain body of text is clicked, a text input field pops up, and the user can enter data into the field, then either click a ‘save’ or ‘cancel’ button and either send it to database or reset the value, respectively. However, despite usage of ‘return false’, I can’t seem to keep this code from activating repeatedly.

I’ve used die() and that works, but I also want to be able to reinstantiate the original click event after the user either saves or cancels, and can’t think of a way to make that work. Thanks in advance for the help.

$('td[name]').live("click", function() {
    nameof = $(this).attr("name");
    idof = $(this).attr("id");
    valueof = $(this).html();

    $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><span id="save">save</span> &nbsp <span id="cancel">cancel</span>');

    return false;   
});

Update:

Here’s what I finally came up with (includes all edit-in-place code):

$('td[name="grouping"] span, td[name="title"] span').live('click', function() {         
    nameof = $(this).parent().attr("name");
    idof = $(this).parent().attr("id");
    valueof = $(this).html();

    if($("table td>span").children('input').length > 0) {} 
    else {
        if($(this).children().length > 0) {} 
        else {
            $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><input type="hidden" name="originalinput" value="' + valueof + '"><span class="save">save</span> &nbsp; <span class="cancel">cancel</span>');
        }
    }

});

$('.cancel').live('click', function() {         
    $(this).parent().html($(this).siblings('input[name="originalinput"]').attr("value"));
});

$('.save').live('click', function() {

    savevalue = $(this).siblings('input[type="text"]').attr("value");
    saveid = $(this).siblings('input[name="id"]').attr("value");
    savecolumn = $(this).siblings('input[type="text"]').attr("name");

    $.ajax({
       type: "POST",
       url: "../php/adminajax.php",
       data: 'id=' + saveid + '&' + savecolumn + '=' + savevalue
    });

    $(this).parent().html(savevalue);
});

$('#saving').ajaxStart( function() {
    $(this).fadeIn(100);
});

$('#saving').ajaxStop( function() {
    $(this).fadeOut(2000);
});

I’m sure it’s much messier than anything I could’ve downloaded, but at least I know the basics of an AJAX edit-in-place now. Thanks for the help, all.

Answer 1

It looks like you’re essentially trying to do an edit-in-place deal. The issue you’re running into is that the user’s click is being propagated through the text box/spans back to it’s parent container, thus triggering the click event again. You need to filter it so it doesn’t select td’s that have the input within it’s contents. Something along the lines of this:

$('td[name]:not(td>input)').live(...);

Although not a direct answer to what you’re looking for why not use an existing plugin like one found here?