我正在使用Eric Martin优秀的simplemodal插件来创建注册表单。我想使用另一个插件来提供密码字段屏蔽和取消屏蔽(为此我使用来自prothemer的showPassword jquery插件)。我已经尝试了这个和其他几个这样的插件,并且无法让它们在一个简单的模式对话框中工作,我很确定我没有编写调用来正确加载其他插件。我查看了simplemodal网站上的示例,看不出我出错的地方。一些智慧的话语将不胜感激!
在我的html表单中,我有这个:
<div id="register_form" style='display:none'>
<div id="r_status" align="left">
<h1>Register now - it's free!</h1>
<center><div id="register_response"><!-- spanner --></div></center>
<form id="register" action="javascript:alert('registered!');">
<div id="register_form_elements">
<p class="register_username">
<label>Username</label>
<input id="username" name="username" type="text" placeholder="Your username" tabindex="1" accesskey="u"autofocus maxlength="30" />
</p>
<p class="register_password">
<label for="reg_password">Password (<div class="checker"></div>)</label>
<input type="password" id="reg_password" tabindex="2" accesskey="p" name="password" maxlength="15" />
</p>
<p class="register_email_address">
<label>Your email address:</label>
<input id="emailaddress" name="emailaddress" type="text" placeholder="Email address" tabindex="1" accesskey="u"autofocus maxlength="30" />
</p>
<p class="register_button_holder">
<input value="Register now!" name="register" id="submit" class="register_button" type="submit" />
</p>
</div><!-- end div register_form_elements -->
<div id="register_information">
<h3>Stand by to:<h3>
<ul>
<li>Download your personal, permanent code.</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p>
Already registered?<br />
<a href="index.php?action=login">Log in here</a>
</p>
</div> <!-- end div register_information -->
<div class="clearboth">
<p class="legalese">
By clicking this button you agree to the <a href="tanc.php">terms and conditions</a> and <a href="privacy_policy.php">privacy policy</a>
</p>
</div> <!-- end div clearboth -->
<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif"> Processing...
</div> <!-- end div ajax_loading -->
</form>
</div> <!-- end div r_status -->
</div> <!-- end div register_form -->
在我的js文件中,我有这个:
$(document).ready(function(){
$(".register_link").click(function(){
$('#register_form').modal({
overlayId:'r_simplemodal-overlay',
containerId:'r_simplemodal-container',
opacity: 70,
onShow: function(dialog){
$('#reg_password').showPassword('.checker', { text: 'Show text', name: 'showmypass' });
} // end onShow
}); // end modal
}); // end login_link.click function
// When the form is submitted
$("#r_status > form").submit(function(){
// Hide 'Submit' Button
$('#submit').hide();
// Show Gif Spinning Rotator
$('#ajax_loading').show();
// 'this' refers to the current submitted form
var str = $(this).serialize();
// -- Start AJAX Call --
$.ajax({
type: "POST",
url: "signup.php", // Send the login info to this page
data: str,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
// Show 'Submit' Button
$('#submit').show();
// Hide Gif Spinning Rotator
$('#ajax_loading').hide();
// if the login was successful
if(msg == 'OK') {
var login_response = '<div id="registered">' +
'<div style="width: 350px; float: left; margin-left: 70px;">' +
'<div style="width: 40px; float: left;">' +
'<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
'</div>' +
'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
"You are successfully registered! <br /> Please wait while you're redirected...</div></div>";
$('a.modalCloseImg').hide();
$('#r_simplemodal-container').css("width","500px");
$('#r_simplemodal-container').css("height","120px");
$(this).html(login_response); // Refers to 'status'
// After 3 seconds redirect the
setTimeout('go_to_private_page()', 3000);
} else {
// login was unsuccessful
var register_response = msg;
$('#register_response').html(register_response);
} // end if msg == OK
}); // end ajaxComplete function
} // end function (msg)
}); // end Ajax call
return false;
}); // end register form submit function
}); // end document ready function
function go_to_private_page() {
window.location = 'user/index.php'; // Members Area
}
我预计这将导致屏蔽密码输入字段,并在.checker范围内显示复选框和消息,以将字段转换为纯文本。但是,我只是得到了蒙面文本 - 没有复选框。
我确定我犯了一个非常基本的错误,但看不到它。救命啊!