Блог

У меня есть вход в выпадающее меню с помощью bootstrap ajax и codeigniter, когда я нажимаю на «Отправить», и если иногда возникает ошибка, требуется несколько щелчков мыши, прежде чем появится ошибка, потому что выпадающее меню продолжает закрываться, когда я его отправляю.

Вопрос: Когда я нажимаю на кнопку отправки формы в своем выпадающем меню, войдите в систему, если есть ошибка, как я могу остановить закрытие выпадающего списка начальной загрузки, потому что мне нужно нажать «Отправить» несколько раз, прежде чем появится ошибка

В моей части response.success false я пробовал

 $('#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>
  

Решаемая, оказывается, была довольно простой в моем сценарии меню, мне пришлось удалить этот фрагмент кода

 $('#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>