如何使用带有悬停和 ajax 内容的 webui-popover答案

【问题标题】：How to use webui-popover with hover and ajax content如何使用带有悬停和 ajax 内容的 webui-popover
【发布时间】：2015-07-24 09:27:53
【问题描述】：

我尝试使用弹出框https://github.com/sandywalker/webui-popover。我需要“quora”弹出框功能：链接应该是可点击的，但悬停应该显示带有 ajax 加载内容的弹出框。

我尝试了以下方法：

  $(function(){
    function details_in_popup(link, div_id){
      $.ajax({
          url: link,
          success: function(response){
              $('#'+div_id).html(response);
          }
      });
      return '<div id="'+ div_id +'">Loading...</div>';
    }

    $('a.user_popover').livequery(function(){
      var link = 'your_url_there';
      $(this).webuiPopover({
        content: function(data){
          var div_id =  "tmp-id-" + $.now();
          return details_in_popup(link, div_id);
        },
        placement: 'bottom',
        trigger: 'hover',
        cache: false
      });
    })
  })

【问题讨论】：

你到底是哪里出了问题？
无法对 ajax 加载的内容使用“悬停”事件。如果我将 'async' 类型与 'url' 一起使用，则仅通过单击触发弹出框。

标签： ajax hover popover

【解决方案1】：

你可以在初始化webui时通过数据属性data-url或者url参数添加你的ajax请求的url，然后用hover设置trigger参数。

类似的东西

(function($){
    $('a.user_popover').webuiPopover({
        title:'Sample',
        placement: 'bottom',
        trigger:'hover',
        type:'async',//content type, values:'html','iframe','async'
        url: 'your_url_there'
    });
})(jQuery);

【讨论】：

【解决方案2】：

是的，我知道这是一个很老的问题，但我正在回答，因为我想它可以帮助其他人。

以下对我有用。我使用 bootstrap 3 和 webuipopover 插件 - v1.2.5

HTML：

<span class="glyphicon glyphicon-info-sign popup-ajax"></span>

Javascript：

$('.popup-ajax').webuiPopover({
    title: "Info",
    placement: 'top',
    height: 210,
    width: 400,
    animation: 'fade',
    html: true,
    type:'async',
    content: function(){
        var target = $(this).data('target');
        $.ajax({
            url: 'use_your_url_here',
            success: function(res){
                var html = '<p>'+res+'</p>';
                $("#"+target+" .webui-popover-content").html(html);
            },
            error: function(res){
                var error = JSON.parse(res.responseText);
                html = ['<div class="alert alert-danger" role="alert">'];
                html.push('Error:'+ error.error+'</div>');
                $("#"+target+" .webui-popover-content").html(html.join(' '));
            }
        });
    }
});

希望能有所帮助。

【讨论】：