Fancybox JQuery AJAX на форму привязки успеха Отправить - PullRequest
2 голосов
/ 02 августа 2010

есть ли способ связать «отправить» в 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 - но я не думаю, что это работает - есть идеи?

1 Ответ

3 голосов
/ 02 августа 2010

Хорошо - на случай, если кому-то интересно - я решил проблему.

На самом деле это не было обязательным, это были сообщения об ошибках - они не скрывались после перезагрузки.

Вот как я обошёл эту проблему (возможно, не лучшее решение - но она работает):

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 (), которую я перебрал во всехэлементы строки таблицы (tr) с классом «dn» и использующие hide (), чтобы скрыть это - тогда, если все еще есть какие-либо пропущенные значения - они появятся снова:

var rows = $('tr.dn');
        $.each(rows, function() {
            $(this).hide();
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...