登录Dropbox在Ajax请求后消失

时间:2015-08-14 18:50:32

标签: php jquery ajax twitter-bootstrap

我在Bootstrap中找到了一个登录Dropdown菜单。但是,当我通过Ajax注册请求它消失时,它应该显示成功函数中的东西。不知道这里到底发生了什么是代码  我想要的是当我注册页面不应该刷新,我想在Dropdown菜单上显示登录成功,在此套装中消失

Dropbox Source Code

live site

<?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">&times;</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>

1 个答案:

答案 0 :(得分:0)

这是jQuery与其他库使用$.noConflict( true )

冲突的问题