我在Bootstrap中找到了一个登录Dropdown菜单。但是,当我通过Ajax注册请求它消失时,它应该显示成功函数中的东西。不知道这里到底发生了什么是代码 我想要的是当我注册页面不应该刷新,我想在Dropdown菜单上显示登录成功,在此套装中消失
<?php
//require_once 'imports.php';
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Twitter Bootstrap Modal Login Popup - Social Login Popup </title>
<meta name="description" content="Twitter Bootstrap Modal Login Popup - Social Login Popup ">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<body>
<div class="container-full">
<nav class="navbar navbar-default " role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">House Trade</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse ">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li id='modal-launcher' data-toggle="modal" data-target="#login-modal" class="login"><a >Login</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<script type="text/javascript">
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789JKLMNOPQ";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
$(document).ready(function(){
$("#register").submit(function(e){
e.preventDefault();
$(this).tooltip('show');
var firstname=$('#First_name').val();
var lastname=$('#last_name').val();
var username=$('#reg_username').val();
var password=$('#password').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: "doRegister.php",
data: "id="+makeid()+"&first_name="+firstname+"&last_name="+lastname+"&username="+username+"&password="+password+"&email="+email ,
success: function(html){
$(".modal-body.login-modal").css('display', 'none');
$(".modal-body.login-modal").text('some text');
}
}
});
return false;
});
});
</script>
</body>
</html>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header login_modal_header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Login or Create Your Account</h2>
</div>
<div class="modal-body login-modal">
<div class="clearfix"></div>
<div id='social-icons-conatainer'>
<div class='modal-body-left'>
<div class="form-group">
<input required type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<a href="#" class="btn btn-success modal-login-btn">Login</a>
<a href="#" class="login-link text-center">Lost your password?</a>
</div>
<div class='modal-body-right'>
<form action="" method="POST" role="form">
<div class="form-group">
<input required type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="reg_username" placeholder="Enter your User Name " value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="password" id="password" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<button type="submit" id="register" class="btn btn-success modal-login-btn">Sign up</button>
</form>
</div>
<div id='center-line'> OR </div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="modal-footer login_modal_footer">
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
这是jQuery与其他库使用$.noConflict( true )