[Solved] Stop dropdown login form from closing if validation error

I have question about ajax.

Question On my dropdown menu link sign in if there is a error on my ajax login form validation how to stop the bootstrap dropdown menu from closing?

I append view using script below.

Code:

<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>

On my login view this is the append html

Code:

<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" required>
</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) {
        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) {

                    location.reload();

                } else {
                    
                    $( "#error" ).html(response.messages);
                }
            }
        });

    });
});
</script>

Attached Files

Thumbnail(s)
   

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

If your using Bootstrap you would need to use the javascript dropdown and check for the validation error and then control the dropdown

SEE: the Bootstrap DropDown js file.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Your sample is too complicated for me to try to replicate and test, but if you have disabled default action on click, the menu should not be closing, and you can inject the error message back into the panel. If it is closing for some reason, which I am not sure why it would, and you cannot find the relevant code to stop it doing it, you would need to reopen it via js with the error message injected.

PHP Code:

$('.dropdown').addClass('open'); 


If your using Bootstrap you would need to use the javascript dropdown and check for the validation error and then control the dropdown

SEE: the Bootstrap DropDown js file.

I got it working now just tweaking error messages it seem to be this was issue

Code:

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

PHP Code:

<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($('.text-danger').length == 0) {
                        $('#input-username').after(response.error_username);
                        $('#input-password').after(response.error_password);
                    }
                }
            }  
        });
    });      
});   
</script> 


PHP Code:

<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> 


There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!