Steven M Steven M - 5 months ago 12
Javascript Question

Show Bootstrap Popover on Blur not click

This seems like a pretty simple thing, but I am pulling my hairs on it for hours now: I want to check for uniqueness of usernames on a signup form. So I am writing a small AJAX jquery function that calls some endpoint, while I show a popover that the uniqueness is being checked.

https://jsfiddle.net/7p41z88h/

This is my html:

<div class="row">
<div class="col-lg-12" style="margin-top:200px">
<form method="post" action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="" name='name' id="username" >
</div>
</form>
</div>
</div>


and this is my js:

var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif" /> Checking if this username is available...';

$('#username').blur( function(){
$("#username").popover( {
title: '',
content: check,
html:true,
placement: 'top'
});
});


My expectation would be that this shows the
popover
on the
blur
event, but it shows it after I click somewhere and back into the input. Why? What am I'm missing here?

Answer

You have to create popover first, then show it on blur.

var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif"> Checking if this username is available...';

$('#username').blur(function() {
  $(this).popover({ 
    title: '', 
    content: check, 
    html: true, 
    placement: 'top' 
  });
  $(this).popover('show');
});

CODEPEN