I encountered an issue with my dropdown menu login that utilizes bootstrap ajax and codeigniter. When I attempt to submit the form and there is an error, I have to click multiple times before the error message appears because the dropdown menu keeps closing upon submission.
Question: How can I prevent the bootstrap dropdown from closing when submitting my form on the dropdown menu login, so that the error message displays after the first click?
In attempting to address this issue in the response.success false section, I tried the following:
$('#dropdown-login').on('hide.bs.dropdown', function () {
$('#error').html(response.messages);
return false;
});
This view is appended to the menu displayed in the code snippet at the bottom.
<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>
Image
https://i.stack.imgur.com/tfAq7.png
Menu
<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>