jQuery: form returned on "success" needs re-binding

Question

hello. a quick question. I am using the jQuery.forms.js plug-in.

I have a form that posts to a php page and returns data with jSon.

The data that is returned is code for a new form (it replaces the form that was used to post the information). The new form is not bound to any jQuery functions, as it was not around when the page loaded.

So, how can I get ajax form to recognize the new form, so that if i need to use the form a second time, it is also utilizing the jQuery function?

// jQuery for submitting info to php doc and, on success, replacing the form 
$(document).ready(function() { 
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
      bindNote(); 
         } 
    });
});

<!-- /////////////////////// POST ONLINE /////////////////////// -->

<div id='onlineStatus<?php echo $b_id ?>' class='postOnline'>
  <form name="postOnline"  id="postOnline<?php echo $b_id ?>" action="postOnline.php" method="post">
    <input type="hidden" value="<?php echo $b_id ?>" name="b" />
    <input type="hidden" value="1" name="p" />
    <input type="submit" class="button"  value="Post Online" />
  </form>   
</div>

<!-- /////////////////////// POST ONLINE /////////////////////// -->


// ... code for entering data into database and then...
$result = mysql_query( $sql );
if($result) {
if($show == '1'){$val = 'remove from online'; $num='0';}
if($show == '0'){$val = 'show online'; $num='1';}

$return = "
<form name='postOnline'  id='postOnline$id' action='postOnline.php' method='post'>
<input type='hidden' value='$b_id' name='b' />
<input type='hidden' value='$num' name='p' />
<input type='submit' class='button'  value='$val' />
</form> 
";
    print json_encode(array("rid" => $id, "formed" => $return));
}
?>

Answer 1

You need to rebind the event handlers after the ajax call. I heard about a new feature in the newer version of jquery called live events, that would make this unnecessary though.

Answer 2

The easiest solution to this is not using jQuery's form plugin and doing it manually, which is really not very difficult:

$(document).ready(function() { 
    jQuery('form[id*=postOnline]').live('submit', function() {
        var formdata = $(this).serialize();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            dataType: 'json',
            data: formdata,
            success: function(data) { 
                $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
                bindNote(); 
            }
        });
        return false;
    });
});

Now since you are using jQuery's new (1.3) live functionality, any forms you add that match the form[id*=postOnline] selector will still be wired with this event.

Alternatively, you can open up the jquery forms code and find wherever it does its binding and try to modify it so that it uses it live. Even another alternative would be to encompass the wiring in a function, and call it at the end of your success function, like so:

function bindForm() {
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote();
            bindForm();
        } 
    });
}

$(document).ready(function() { 
    bindForm();
});

I don't think it is very neat, but it should work.

Answer 3

If for whatever reason you're stuck with a pre-1.3 version of jQuery, use the "livequery" plugin.