jqueryモーダルログインと登録に取り組んでいます。デフォルトでは、モーダル ウィンドウにはログイン フォームが表示されます。番組登録ボタンをクリックすると、登録フォームに切り替わります。jqquery コードは、現在アクティブな (表示されている) フォームで実行されるはずですが、デフォルトのフォーム (ログイン) でのみ機能するようです。登録フォームに切り替えると、コードは何も実行せず、その理由がわかりません。jqueryはどれも機能していないようです。ページの読み込み時に jquery が読み込まれると、現在のフォームの ID を保持する plActiveForm 変数を再定義できないようです。コードからわかるように、この変数は全体で使用されています。
どんな助けでも大歓迎です。ありがとうございました！
意味があるかどうかわかりませんが、これを説明するのは難しいです。私のプラグインを以下に示します。
// -----------------------------------------------
// 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');
var plMWrap = $('.pl-m');
var plMOverlay = $('.pl-m-overlay');
var plMLoginFrm = $('#pl_frmMlogin');
var plMRegFrm = $('#pl_frmMRegister');
var plMLoading = $('.pl-loading');
var plMCloseBtn = $('.pl-m-close');
var plMShowRegBtn = $('#pl_showRegForm');
var plMShowLoginBtn = $('#pl_showLoginForm');
var plMLoginSubmitUrl = 'pl-module/public/login.php';
var plMRegisterSubmitUrl = 'pl-module/public/register.php';
var plActiveForm = plMLoginFrm;
var 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
});
});