Question

当我点击提交时，我有一个使用bootstrap ajax和codeigniter的下拉菜单登录，如果有错误，有时需要几次点击才能显示错误，因为下拉菜单在我提交时会一直关闭。

问题：当我点击下拉菜单上的表单提交按钮时登录如果有错误我怎么能停止引导下拉列表关闭因为我必须在错误之前点击提交几次出现

在我的response.success虚假部分我尝试了

$('#dropdown-login').on('hide.bs.dropdown', function () {
    $('#error').html(response.messages);
    return false;
});

此视图会附加到底部代码上显示的菜单中。

<li>
<div class="row">
<div class="col-md-12">
<div id="error"></div>
<form class="form" role="form" method="post"  accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-success btn-block">Sign in</button>
</div>
</form>
</div>
</div>
</li>

<script type="text/javascript">
$(document).ready(function() {
    $('#submit').on('click', function(e) {   
        $.ajax({
            url: "<?php echo base_url('catalog/members/login/validate');?>",
            type: 'post',
            dataType: 'json',
            data: {
                username: $('#username').val(),
                password: $('#password').val()
            },
            success: function(response){
                if (response.success == true) {

                } else {

                    $('#dropdown-login').on('hide.bs.dropdown', function () {
                        $('#error').html(response.messages);
                        return false;
                    });      

                }
            }  
        });
    }); 
});
</script>

图像

菜单

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">    
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign Up</a></li>
                <li class="dropdown" id="dropdown-login">
                    <a class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<script type="text/javascript">
$(document).ready(function() {
    $('#dropdown-login').on('click', function() {

        $('#ul-dropdown-login').remove();

        $.ajax({
            url: "<?php echo base_url();?>catalog/members/login",
            dataType: 'html',
            success: function(html) {
                $('#dropdown-login').append('<ul class="dropdown-menu" id="ul-dropdown-login" style="padding: 15px;min-width: 250px;" >' + html + '</ul>');
            }
        });
    }); 
});        
</script>

Answer 1

Solved事实证明我的菜单脚本非常简单，我不得不删除这段代码

$('#ul-dropdown-login').remove();

菜单脚本

<script type="text/javascript">
$(document).ready(function() {

    $('#login-toggle').on('click', function(e) {

        //e.preventDefault();

        //$('.error').remove();

        $.ajax({
            url: "<?php echo base_url();?>catalog/members/login",
            dataType: 'html',
            success: function(html) {
                if($('#login-dropdown').length == 0) {
                $('#login-toggle').append('<ul class="dropdown-menu" id="login-dropdown" style="padding: 15px;min-width: 250px;" >' + html + '</ul>');

                }
            }
        });
    }); 


});        
</script>

登录脚本

<script type="text/javascript">
$(document).ready(function() {
    $('#login-submit').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo base_url('catalog/members/login/validate');?>",
            type: 'post',
            dataType: 'json',
            data: {
                username: $('#username').val(),
                password: $('#password').val()
            },
            success: function(response){
                if (response.success == true) {

                } else {

                    if($('.error').length == 0) {
                        $('#input-username').after(response.error_username);
                        $('#input-password').after(response.error_password);
                    }
                }
            }  
        });
    });      
});   
</script>

如果ajax＆amp;存在登录错误，请关闭boostrap下拉菜单。 codeigniter表单验证

1 个答案: