Question

有没有办法在成功后将“提交”绑定到fancybox？

这就是我所拥有的：

<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>

然后我调用fancybox并使用ajax和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);     
}

最后我的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;
}

}

现在 - 验证第一次正常，但我无法重新提交表单 - 如果我在字段中添加一些值，它在单击“提交”按钮后仍显示警告 - 就好像它无法识别提交事件一样。

我添加了：

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

关于ajax的成功 - 但我认为它没有用 - 任何想法？

Answer 1

好的 - 如果有人想知道 - 我已经解决了这个问题。

它没有真正的绑定 - 这是错误消息 - 重新加载后它们没有隐藏。

以下是我如何解决这个问题（也许不是最好的解决方案 - 但它确实有效）：

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);     
}

基本上 - 在tellAFriend（）函数的开头我已经使用类“dn”循环遍历表行（tr）的所有元素，并使用hide（）来隐藏它 - 然后如果仍然存在任何缺失值 - 它们将再次出现：

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

Fancybox jQuery ajax成功绑定表单提交

1 个答案: