Question

In a very very simple inline edit in place, jQuery change the text to an editable form with

$(document).ready(function() {
 $(".editable").bind("dblclick", function () {
  OriginalText = $(this).html();
  $(this).html("<form id='test' method='post' action='test.php'>
  <input type='text' class='editBox' value='" + OriginalText + "' />
  <input type='submit' value='change' /> </form>")
 }); 
});

Now this form works for change the text, but I want to make it work with ajax; with a code like

$(function(){
    $('#test').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
    });
});

But when using them as separate functions, they do not work, probably because the form is itself generated by jQuery, and not part of the original html. How can I mix these two functions to generate ajax-based form?

Answer 1

You’ll need to delegate the click since the form and submit elements are added dynamically after page load. Look at this doc

So your JS would look something like this.

$(document).ready(function() {
 $(".editable").bind("dblclick", function () {
  OriginalText = $(this).html();
  $(this).html("<form id='test' method='post' action='test.php'>
  <input type='text' class='editBox' value='" + OriginalText + "' />
  <input type='submit' value='change' /> </form>")
 }); 
});

$('body').delegate('#test','submit',function(e){
e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
});