3

ログインと登録用の Jquery モーダル ウィンドウを作成しようとしています。ページの css トリガーがクリックされると、モーダル ウィンドウが ajax を介してページの本文に動的に挿入されます。モーダル ウィンドウが開いたときに表示されるデフォルトのフォームは、ログイン フォームです。この時点で、すべてが期待どおりに機能します (フォームの検証、ajax 送信など)。スクリプトは、デフォルトとして設定されているフォームで常に正常に動作します。

ユーザーがまだアカウントを持っていない場合は、リンクをクリックして登録フォームを表示できます。この時点で、ログイン フォームがフェード アウトし、登録フォームがフェード インします。

ただし、登録フォームに切り替えると、jquery は plMShowRegBtn および plMShowLoginBtn クリック イベントのスクリプトの指示に従って plActiveForm 変数を再定義しません。登録フォームをデフォルト フォームにすると、ログイン フォームに切り替えるまではすべて正常に動作しますが、その時点で同じ問題が発生します。フォームで jquery が実行されないだけです。ただし、他のすべての jquery は正常に動作します (閉じるなど)。モーダル ウィンドウを削除し、マークアップから削除します)。

jquery が読み込まれ、plActiveForm 変数の値が定義されると、再定義できないようです。この変数は、現在のフォームの ID を保持し、コード全体で使用されます。

live() および on() 関数で plMShowRegBtn および plMShowLoginBtn クリック イベントを使用しようとしましたが、役に立ちませんでした。

html の部分はここには示されていませんが、非常に単純です。ログイン用と登録用の 2 つのフォームと、表示されるフォームを切り替えるための 2 つの入力ボタンを持つ div コンテナー。両方の形式は、デフォルトで css display:none です。

どんな助けでも大歓迎です。ありがとうございました！

私のプラグインを以下に示します。

// -----------------------------------------------
// JQUERY - FOR MODAL LOGIN + REGISTRATION FORM
// -----------------------------------------------
(function ($) {
$.fn.plMlogin = function (options) {

    // -----------------------------------------------
    // DEFAULTS AND OPTIONS
    // -----------------------------------------------
    var defaults = {
        plTooltip: true,
        plResetButton: true,
        plBubbleResponse: true
    };
    var settings = $.extend({}, defaults, options);

    // -----------------------------------------------
    // SHOW MODAL WINDOW ON CLICK
    // -----------------------------------------------
    $('.pl-m-trigger').click(function(e) {
        e.preventDefault();

        // -> append container into body
        $('body').append('<div class="pl-m-container">');

        // -> load modal forms into container
        $.ajax({
            url: 'pl-module/public/modal-login-html.php',
            dataType: 'html',
            timeout: 10000, // 10 seconds
            success: function(html) {

                // -----------------------------------------------
                // -> LOAD FORMS INTO CONTAINER
                // -----------------------------------------------
                $(".pl-m-container").html(html);

                // -----------------------------------------------
                // PROPERTIES
                // -----------------------------------------------
                var plMContainer = $('.pl-m-container'),
                    plMWrap = $('.pl-m'),
                    plMOverlay = $('.pl-m-overlay'),
                    plMLoginFrm = $('#pl_frmMlogin'),
                    plMRegFrm = $('#pl_frmMRegister'),
                    plMLoading = $('.pl-loading'),
                    plMCloseBtn = $('.pl-m-close'),
                    plMShowRegBtn = $('#pl_showRegForm'),
                    plMShowLoginBtn = $('#pl_showLoginForm'),
                    plMLoginSubmitUrl = 'pl-module/public/login.php',
                    plMRegisterSubmitUrl = 'pl-module/public/register.php',
                    plActiveForm = plMLoginFrm,
                    plSubmitUrl = plMLoginSubmitUrl;

                // -----------------------------------------------
                // SHOW MODAL WINDOW AND DEFAULT FORM
                // -----------------------------------------------
                $(plMWrap).fadeIn('fast');
                $(plMOverlay).fadeIn('fast');
                $(plActiveForm).fadeIn('fast');

                // -----------------------------------------------
                // CLOSE MODAL WINDOW ON BTN CLICK
                // -----------------------------------------------
                $(plMCloseBtn).click(function(e) {
                    e.preventDefault();
                    $(plMWrap).fadeOut('fast', function() {
                        $(plMOverlay).fadeOut('fast', function() {
                            $(plMContainer).remove();
                        });
                    });
                });

                // -----------------------------------------------
                // CLOSE MODAL WINDOW ON OVERLAY CLICK
                // -----------------------------------------------
                $(plMOverlay).click(function() {
                    $(plMWrap).fadeOut('fast', function() {
                        $(this).fadeOut('fast', function() {
                            $(plMContainer).remove();
                        });
                    });
                });

                // -----------------------------------------------
                // SWITCH TO REGISTRATION FORM
                // -----------------------------------------------
                $(plMShowRegBtn).click(function(e) {
                    e.preventDefault();
                    plResetForm();
                    $(plMLoginFrm).slideUp('fast', function() {
                        $(plMRegFrm).slideDown('fast', function(){
                            // set active form to registration
                            plActiveForm = plMRegFrm;
                            plSubmitUrl = plMRegisterSubmitUrl;
                        });
                    });
                });

                // -----------------------------------------------
                // SWITCH TO LOGIN FORM
                // -----------------------------------------------
                $(plMShowLoginBtn).click(function(e) {
                    e.preventDefault();
                    plResetForm();
                    $(plMRegFrm).slideUp('fast', function() {
                        $(plMLoginFrm).slideDown('fast', function(){
                            // set active form to login
                            plActiveForm = plMLoginFrm;
                            plSubmitUrl = plMLoginSubmitUrl;
                        });
                    });
                });

                // -----------------------------------------------
                // RESPONSE MESSAGES
                // -----------------------------------------------
                function plResponse(plMsg, plShowHide) {
                    var plResponse = $('.pl-response', plActiveForm);
                    if (plShowHide === true) {
                        $(plResponse).fadeIn('slow').html(plMsg);
                    } else if (plShowHide === false) {
                        $(plResponse).fadeOut('slow');
                    }
                }

                // -----------------------------------------------
                // RESET FORM BUTTON CLICK
                // -----------------------------------------------
                if (settings.plResetButton) {
                    var plResetBtn = $('.pl-reset-btn', plActiveForm);

                    $(plResetBtn).click(function (e) {
                        e.preventDefault();
                        plResetForm();
                    });
                }

                // -----------------------------------------------
                // RESET FORM FUNCTION
                // -----------------------------------------------
                function plResetForm() {
                    $('.pl-cust-response', plActiveForm).remove();
                    $('.pl-error', plActiveForm).removeClass('pl-error');
                    plResponse('', false);
                    plResetBtn.hide();
                    $(plActiveForm)[0].reset();
                }

                // -----------------------------------------------
                // FORM VALIDATION
                // -----------------------------------------------
                function plValidate() {
                    // remove custom errors if visible
                    $('.pl-cust-response', plActiveForm).remove();

                    // -----------------------------------------------
                    // CHECK - EMPTY REQUIRED FIELDS
                    // -----------------------------------------------
                    $(plActiveForm).find('.pl-required').each(function () {
                        var plEmptyCheck = $.trim($(this).val());
                        if (plEmptyCheck.length == 0) {
                            plResponse(PLLANG.MSG_03, true);
                            if (settings.plBubbleResponse) {
                                $(this).parent().append('<span class="pl-cust-response">' + PLLANG.MSG_04 + '</span>');
                                $('.pl-cust-response').fadeIn('slow');
                            }
                            $(this).addClass('pl-error');
                        } else {
                            $(this).removeClass('pl-error');
                        }
                    });

                    // -----------------------------------------------
                    // IF ERROR(S) FOUND
                    // -----------------------------------------------
                    var $errors = $('.pl-error', plActiveForm);
                    if ($errors.length > 0) {
                        if (settings.plResetButton) {
                            plResetBtn.show();
                        }
                        return false;
                    } else {
                        plResponse('', false);
                        return true;
                    }
                }

                // -----------------------------------------------
                // FORM SUBMIT
                // -----------------------------------------------
                plActiveForm.submit(function (e) {
                    e.preventDefault();

                    // if validation is ok
                    if (plValidate() === true) {
                        var plFormData = $(this).serialize();
                        plAjaxSubmit(plFormData);
                        $(plMLoading).show();
                    } else {
                        return false;
                    }
                });

                // -----------------------------------------------
                // AJAX SUBMIT FUNCTION
                // -----------------------------------------------
                function plAjaxSubmit(plFormData) {
                    $.ajax({
                        type: 'POST',
                        url: plSubmitUrl,
                        data: plFormData,
                        dataType: 'json',
                        cache: false,
                        timeout: 20000,
                        success: function (data) {
                            $.each(data, function(key, value) {
                                if (value.error == true) {
                                    // hide loading image
                                    $(plMLoading).hide();

                                    plResponse(value.msg, true);

                                    // show reset button
                                    if (settings.plResetButton) {
                                        plResetBtn.show();
                                    }
                                } else if (value.error == false) {
                                    // reset form
                                    plResetForm();

                                    // hide loading image
                                    $(plMLoading).hide();

                                    // display success message
                                    plResponse(value.msg, true);
                                }
                            });
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            plResponse(PLLANG.MSG_06, true);

                            // hide loading image
                            $(plMLoading).hide();
                        },
                        complete: function (XMLHttpRequest, status) {
                            // hide loading image
                            $(plMLoading).hide();
                        }
                    });
                }
            }
        });
    });
};
})(jQuery);

// -----------------------------------------------
// INSTANTIATE MODAL LOGIN
// -----------------------------------------------
$(document).ready(function() {
    $('.pl-m').plMlogin({
        plTooltip : true,
        plResetButton : true,
        plBubbleResponse : true
    });
});
4

2 に答える 2

0

モーダルウィンドウを処理する別のプラグインを作成し、そこに送信されたファイルをロードすることで問題を解決しました。非常にコンパクトで、ページに含める必要がある唯一の参照です。フォームには、すべての検証およびその他の機能を処理する独自のプラグインがあります。フォームとそれに関連するjsは、モーダルプラグイントリガーアクションによってページに挿入され、操作全体が実質的に無重力になります。すべてが動的に追加されてから削除されます。

于 2012-09-14T00:20:00.080 に答える
0

スコープの問題のように聞こえます。「プロパティ」のデカールをajaxの成功からプラグインの本体に移動してみてください。例として：

$.fn.plMlogin = function (options) {
    // declare private properties here
    var plActiveForm, plMLoginFrm; // etc.

そして、ajax成功関数で、プロパティをローカルにせずに次のように設定しますvar。

plMLoginFrm = $('#pl_frmMlogin');
plActiveForm = plMLoginFrm;
于 2012-09-09T05:56:21.730 に答える