ajax fancybox にフォームを投稿し、検証エンジンを使用して検証しようとしています。検証と投稿の後、現在のファンシーボックスを閉じて、一連の手順でファンシーボックスajaxに別のページをロードします。
これが最初にロードされたページの私のスクリプトであることを助けてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { font-size:17px; font-family:Arial, Helvetica, sans-serif;}
body { font-size:12px; font-family:Verdana, Geneva, sans-serif;}
em {
font-size: 12px;
}
#regShr { background-color:#e8eef9; border:1px solid #DAE0EA; padding:9px;}
.d1 { float:left; width:300px; margin-right:10px;}
.d2 { float:left; margin-right:10px; margin-top:10px;}
.button {
-moz-border-radius: 5px;
-moz-box-shadow: #6E7849 0px 0px 10px;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-border-radius: 5px;
-webkit-box-shadow: #6E7849 0 0 10px;
-webkit-transition: all 0.5s ease;
background-color: #B20000;
background-image: -moz-linear-gradient(80deg, #D90000, #B20000);
background-image: -ms-linear-gradient(80deg, #D90000, #B20000);
background-image: -o-linear-gradient(80deg, #D90000, #B20000);
background-image: -webkit-linear-gradient(80deg, #D90000, #B20000);
background-image: linear-gradient(80deg, #D90000, #B20000);
border-radius: 5px;
border: 1px solid #4a5032;
box-shadow: #6E7849 0px 0px 10px;
color: #ffffff;
display: inline-block;
font-family: Trebuchet MS;
font-size: 1em;
margin: auto;
padding: 10px;
text-decoration: none;
text-shadow: #000000 5px 5px 15px;
transition: all 0.5s ease;
}
.button:hover {
background-color: #FF0000;
background-image: -moz-linear-gradient(80deg, #FF3838, #FF0000);
background-image: -ms-linear-gradient(80deg, #FF3838, #FF0000);
background-image: -o-linear-gradient(80deg, #FF3838, #FF0000);
background-image: -webkit-linear-gradient(80deg, #FF3838, #FF0000);
background-image: linear-gradient(80deg, #FF3838, #FF0000);
padding: 10px;
}
</style>
<script type="text/javascript" src="/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<link rel="stylesheet" href="/validator/css/validationEngine.jquery.css" type="text/css"/>
</script>
<script src="/validator/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="/validator/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<form id="regFormFirst" name="regFormFirst" method="post" action="">
<table width="600" border="0" align="center" cellpadding="2" cellspacing="3">
<tr style="background-color:#900; border-bottom:#333 2px solid; padding:10px;">
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="72%"><img src="/images/logo.png" width="120" style="padding:10px;" /></td>
<td width="28%" align="center" style="color:#fff; font-size:14px; font-family:Arial, Helvetica, sans-serif;"><strong>Step 1 out of 3</strong> [<a href="#" onclick="$.fancybox.close();" style="color:#fff; font-size:14px; font-family:Arial, Helvetica, sans-serif ; font-weight:bold;">Close</a>]</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><h1>Sign up for free to comment on stories.</h1></td>
</tr>
<tr>
<td colspan="2"><div id="regShr">
<div class="d1">Connect to your Facebook or Twitter acount and we'll fill in your registration information below.</div>
<div class="d2"><a href="javascript:void(0);" id="fbRegButton"><img src="http://img1-cdn.newser.com/images/connect_facebook.png" alt="Connect To Facebook to simplify the registration process" /></a></div>
<div class="d2"><a id="TwitterButton" title="Connect To Twitter to simplify the registration process"><img src="http://img2-cdn.newser.com/images/connect_twitter.png" alt="Connect To Twitter to simplify the registration process" /></a></div>
<div style="clear:both;"></div>
</div></td>
</tr>
<tr>
<td width="196">Username:</td>
<td width="387"><input name="username" type="text" id="username" class="validate[required]" tabindex="1" />
<br />
<em>Appears on all of your comments</em></td>
</tr>
<tr>
<td>Email Address</td>
<td><input name="email" type="text" id="email" tabindex="2" />
<br />
<em>Invisible to the public</em></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" type="password" id="password" tabindex="3" /></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input name="conpassword" type="password" id="conpassword" tabindex="4" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><input id="agree" type="checkbox" name="agree" tabindex="5" />
I have read and agreed to the <a href="http://www.newser.com/terms.aspx">terms of use.</a></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><a id="continue" class="button" tabindex="6" href="#" onclick="jQuery('#regFormFirst').validationEngine('validate'); postClose();">CONTINUE</a></td>
<td>Already have an account? <a href="javascript:void(0);" onclick="CloseRegister();OpenLogin(0);">Log in here.</a></td>
</tr>
</table>
</form>
</body>
親ページには機能がありますpostClose();。
function postClose () {
dataString = $("#regFormFirst").serialize();
$.ajax({
type: "POST",
url: "/includes/reguser.php",
data: dataString,
success: function(){
}
});
$.fancybox.open({ href : '/register2.php', type: 'ajax'});
}
現在のページを検証したいだけです...データベースに投稿し、fancyboxを介して次のページを開きます。