Fancybox jQuery ajax on success bind form Submit

Question

Hi,

is there a way to bind the "submit" to the fancybox after success?

Here's what I have:

<div class="ta_l" id="tell_friend">
    <form id="form_tell_friend" method="post" action="">            
        <table cellspacing="0" cellpadding="0" border="0" class="tbl_insert mr_b0">
            <tbody>
                <tr class="tell_friend_email dn">
                    <th>&nbsp;</th>
                    <td><span class="red">Please provide a valid email address</span></td>
                </tr>
                <tr>
                    <th><label for="tell_friend_email">Email: *</label></th>
                    <td><input type="text" class="fld" value="" id="tell_friend_email" name="tell_friend_email" /></td>
                </tr>
                <tr class="tell_friend_content dn">
                    <th>&nbsp;</th>
                    <td><span class="red">Please provide a message</span></td>
                </tr>
                <tr>
                    <th><label for="tell_friend_content">Message: *</label></th>
                    <td><textarea class="tartiny" rows="" cols="" id="tell_friend_content" name="tell_friend_content"></textarea></td>
                </tr>
                <tr>
                    <th>&nbsp;</th>
                    <td>
                        <label class="sbm sbm_blue small" for="tell_friend_btn">
                            <input type="submit" value="Send" class="btn" id="tell_friend_btn" />
                        </label>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

then I call fancybox and do some validation with ajax and php:

// tell a friend form
if($('.tell-friend').length > 0) {

    $('.tell-friend').fancybox({
        'speedIn'       :   600, 
        'speedOut'      :   200,
        'overlayShow'   :   true,
        'scrolling'     : 'no',
        'titleShow'     : false     
    });

    function tellAFriend() {

        $.ajax({
            type    : "POST",
            cache   : false,
            url     : "/message/run/tellafriend",
            data    : $(this).serializeArray(),
            dataType: "json",
            success: function(data) {
                $("#form_tell_friend").bind("submit", tellAFriend);                 
                if(data != 1) {
                    $.each(data, function(key, value) {
                        $('.' + value).fadeIn(500);
                    });
                    $.fancybox.resize();
                    $("#form_tell_friend").bind("submit", tellAFriend);                     
                } else {
                    $.fancybox({
                        'scrolling'     : 'no',
                        'content'       : 'Your message has been sent successfully'
                    });
                }                                   
            },
            error: function(data) {
                alert('Error occured');
            }
        });

        return false;
    }

    $("#form_tell_friend").bind("submit", tellAFriend);     
}

and finally my php:

public function tellafriendAction() {
$empty = array();

if(!empty($_POST)) {
    foreach($_POST as $key => $value) {
        if (empty($value)) {
            $empty[] = $key;
        }
    }
}

if(!empty($empty)) {
    echo json_encode($empty);
} else {
    echo 1;
}       

}

Now - validation is going fine first time, but I can't resubmit the form - if I put some values to the fields it still displays warnings after I click Submit button - as if it didn't recognize the submit event.

I've added:

$("#form_tell_friend").bind("submit", tellAFriend);

on success in ajax - but I don't think it's working - any idea?

Answer 1

Ok - in case anyone was wondering - I've solved the problem.

It wasn't really binding - it was the error messages - they didn't hide after reload.

Here's how I've got around this problem (perhaps not the best solution - but it works):

if($('.tell-friend').length > 0) {

    $('.tell-friend').fancybox({
        'speedIn'       :   600, 
        'speedOut'      :   200,
        'overlayShow'   :   true,
        'scrolling'     : 'no',
        'titleShow'     : false     
    });

    function tellAFriend() {
        var rows = $('tr.dn');
        $.each(rows, function() {
            $(this).hide();
        });
        $.ajax({
            type    : "POST",
            cache   : false,
            url     : "/message/run/tellafriend",
            data    : $(this).serializeArray(),
            dataType: "json",
            success: function(data) {                                   
                if(data != 1) {
                    $.each(data, function(key, value) {
                        $('.' + value).fadeIn(500);
                    });
                    $.fancybox.resize();
                } else {
                    $.fancybox({
                        'scrolling'     : 'no',
                        'content'       : 'Your message has been sent successfully'
                    });
                }                                   
            },
            error: function(data) {
                alert('Error occured');
            }
        });

        return false;
    }

    $("#form_tell_friend").bind("submit", tellAFriend);     
}

basically - at the beginning of the tellAFriend() function I've looped through all of the elements of the table row (tr) with the class "dn" and used hide() to hide it - then if there are still any missing values - they will show up again:

var rows = $('tr.dn');
        $.each(rows, function() {
            $(this).hide();
        });