Question

这似乎是一件非常简单的事情，但我现在已经把它拉了几个小时：我想在注册表单上检查用户名的唯一性。所以我正在编写一个调用某个端点的小型AJAX jquery函数，同时我向popover显示正在检查唯一性。

这是我的HTML：

@Controller
@RequestMapping("deliveries")
public class DeliveryController {

    private DeliveryRepository repository;
    SimpMessagingTemplate template;

    @Autowired
    public DeliveryController(DeliveryRepository repository, SimpMessagingTemplate template) {
        this.repository = repository;
        this.template = template;
    }

    public void updateListandBroadcast() {
        System.out.println("in update and broadcast");
        template.convertAndSend("/topic/openDeliveries", getOpenDeliveries());
    }


    public List<Delivery> getOpenDeliveries() {
        return repository.findByDeliveredFalse();
    }


    @RequestMapping(value = "/new", method = RequestMethod.POST)
    public @ResponseBody Delivery newDelivery(@RequestBody Delivery delivery) {
        Delivery d = repository.save(delivery);
        updateListandBroadcast();
        return d;
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
    public @ResponseBody void delete(@PathVariable String id) {
        repository.delete(Long.parseLong(id));
        updateListandBroadcast();
    }

}

这是我的js：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Active Deliveries</title>
  <script src="sockjs-0.3.4.js"></script>
  <script src="stomp.js"></script>
  <script src="jquery-3.0.0.js"></script>
  <script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
      document.getElementById('connect').disabled = connected;
      document.getElementById('disconnect').disabled = !connected;
      document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
      document.getElementById('response').innerHTML = '';
    }

    function connect() {
      var socket = new SockJS('http://localhost:8080/delivery-ws');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function(frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('http://localhost:8080/openDeliveries', function(deliveryList) {
          console.log('in callback for opendelivery topic');
          showDeliveries(deliveryList);
        });
      });
    }

    function disconnect() {
      if (stompClient != null) {
        stompClient.disconnect();
      }
      setConnected(false);
      console.log("Disconnected");
    }

    function showDeliveries(list) {
      console.log('in show deliveries');
      var response = document.getElementById('response');
      response.innerHTML = list.body;


    }
  </script>
</head>

<body onload="disconnect()">
  <h1>Deliveries</h1>
  <noscript>
    <h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2>
  </noscript>
  <div>

    <div>
      <button id="connect" onclick="connect();">Connect</button>
      <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
      <p id="response"></p>
      <table id="data-table"></table>
    </div>
  </div>

</body>

</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>事件中显示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' }); });，但在我点击某处并返回输入后显示它。为什么？我在这里缺少什么？

Answer 1

您必须首先创建弹出框，然后在模糊时显示它。

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',
    trigger: 'manual'
  });
  $(this).popover('show');
});

$('#username').click(function() {
  $(this).popover('hide');
});

在Blur上显示Bootstrap Popover而不是单击

1 个答案:

CODEPEN