相关疑难解决方法(0)

Bootstrap popover内容无法动态更改

我使用如下代码:

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");
Run Code Online (Sandbox Code Playgroud)

这正确地创建了popover及其内容.我想在不关闭弹出窗口的情况下将新数据加载到弹出框中.

我尝试过以下方法:

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});
Run Code Online (Sandbox Code Playgroud)

在此调用之后,元素中的数据将被更改,但不会显示在显示的弹出框中.

我该怎么办?

jquery popover twitter-bootstrap

59
推荐指数
5
解决办法
7万
查看次数

是否可以为Twitter Bootstrap popover分配一个id?

我已经能够显示Twitter Bootstrap popovers,但有没有办法在创建时为他们分配id,所以我可以操纵它们?

到目前为止,我的代码是:.js

$('#test-button').popover({content:'test.', trigger:'click'});
$('#test-button').popover('show');
Run Code Online (Sandbox Code Playgroud)

html的

<a id='test-button' rel='popover'>
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

8
推荐指数
1
解决办法
7282
查看次数

Twitter Bootstrap Popup忽略了延迟

在stackoverflow上关注这个问题后,我创建了一个在悬停时加载的twitter bootstrap popover.但是,没有使用延迟,popover只是立即显示.这是我的代码:

$('body').delegate('.withajaxpopover', 'hover', function(event) {
   if (event.type === 'mouseenter') {
      var el=$(this);
      $.get(el.attr('data-load'), function(d) {
      el.popover({delay: { 
                     show: 750, 
                     hide: 100
                  },
                  title: "MyTitle", 
                  content: d}).popover('show', 
                                       {delay: { show: 750, hide: 100 }});
                    });
   } else {
                    $(this).popover('hide');
   }
});
$('body').delegate('.withajaxpopover', 'click', function(event) {
   $(this).popover('hide');
});
Run Code Online (Sandbox Code Playgroud)

延迟只是被忽略了.我能做什么?

感谢您的帮助或提示!

delay popover twitter-bootstrap

7
推荐指数
1
解决办法
6704
查看次数

具有AJAX的Bootstrap工具提示(更多时间)

平凡,常用案例

我想要一个工具提示,显示鼠标悬停时立即加载GIF,并由AJAX成功回调产生的HTML代替。关于AJAX工具提示的错误答案几乎和在线上问这个确切问题的人数一样多。特别是,我一直在造型我的努力就这个这个,尤其是几个答案在这里

对于所有这些解决方案,即使是那些专门声称要解决该问题的解决方案,我始终遇到的问题是,工具提示有时会出现得很晚而无法消失。这也不是库问题,因为过去我在使用jQuery-UI工具提示时遇到了相同的问题。

图书馆

  • jQuery v2.2.3
  • Bootstrap v3.3.6

先前尝试使用jQuery 1并遇到了相同的问题:

  • jQuery v1.12.3

我的页面也依赖jQuery Datatables v1.10.11库,但这与工具提示问题正交,除了我的特定用例生成具有可变延迟的更多和更快的AJAX工具提示请求这一事实之外,这增加了观察工具提示的可能性。 “粘”的问题。

当前尝试

我当前的解决方案大致基于此处的'towr'答案,非常接近有效。我已经尝试过该页面上方的所有解决方案,它们要么由于某种原因而损坏,要么存在“粘滞”工具提示问题。

因此,在AJAX请求加载数据以填充表之后,我按class遍历单元格$( ".tooltip-cell" ).on( "mouseover", set_tooltip ),其中set_tooltip一个函数执行以下操作

var $e = $(this);
if( $e.attr( "title" ) === undefined ) { // request data once per cell
    // show loading GIF
    $e.attr( "title", "<img src='images/wait.gif'/>" );
    $e.tooltip(
        {
            html: true,
            trigger: "hover"
        }
        ).tooltip( "show" );
    // perform AJAX GET
    $.ajax( …
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery tooltip twitter-bootstrap

6
推荐指数
1
解决办法
2653
查看次数

Twitter Bootstrap Popover和AJAX

我一直在浏览如何在bootstrap popover上加载ajax内容的解决方案,但找不到任何合适的解决方案.

这是我到目前为止所拥有的:

$(".btnCharge").click(function () {
    $("#boxPayment").fadeIn();
})
.popover({
    title: 'Advantages',
    html: 'true',
    content: function () {
        $.ajax({
            type: "POST",
            url: "Index.aspx/FindAdvantagesByCCID",
            data: '{"id": "' + 1 + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var json = jQuery.parseJSON(data.d);
                var html = '';
                $.each(json, function (i, item) {
                    html = html + '<a href="#"><i class="icon-ok"></i>' + item.Advantage + '</a><br />';
                });
            }
        });
    },
    placement: 'bottom',
    trigger: 'hover'
});
Run Code Online (Sandbox Code Playgroud)

如何在弹出窗口内容中添加ajax响应?我试过"返回"并且不起作用.

有清洁的解决方案

javascript asp.net ajax popover twitter-bootstrap

4
推荐指数
1
解决办法
2万
查看次数

如何更改已显示的引导程序弹出窗口的内容?

我有一个输入密码两次的表格.我检查密码复杂性和一致性,并在附加到INPUT字段的弹出窗口中显示相应的错误消息:

<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover">
<input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/>
</a>
Run Code Online (Sandbox Code Playgroud)

使用此代码:

$("#aIdPwd2").popover({content: msg});
Run Code Online (Sandbox Code Playgroud)

您可以选择动态显示将要显示的消息.但是一旦它显示一次,它将始终保持不变.

我阅读了很多关于这个流行问题的文章并尝试了很多东西(将2个不同的popover附加到相同的输入,更改getElementsByClassName中的内部html("popover-content"),销毁并重新创建popover,..),但没有迄今取得的任何成功.

关于如何更改已经显示的引导程序弹出窗口内容或任何类型的解决方案的解决方案将受到高度赞赏.

javascript css popover twitter-bootstrap

4
推荐指数
2
解决办法
2万
查看次数

设置数据内容并显示弹出窗口

我正在尝试使用jquery的ajax从资源获取数据,然后我尝试使用此数据来填充引导弹出窗口,如下所示:

$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
Run Code Online (Sandbox Code Playgroud)

并且检索数据的功能是:

get_data_for_popover_and_display = function() {
    var _data = $(this).attr('alt');
    $.ajax({
         type: 'GET',
         url: '/myresource',
         data: _data,
         dataType: 'html',
         success: function(data) {
             $(this).attr('data-content', data);
             $(this).popover('show');
         }
    });
}
Run Code Online (Sandbox Code Playgroud)

发生的事情是当我点击时弹出窗口没有显示,但是如果我稍后悬停元素它将显示弹出窗口,但没有内容(data-content属性).如果我alert()success回调内部放置它将显示返回的数据.

知道为什么会这样吗?谢谢!

javascript jquery twitter-bootstrap

3
推荐指数
2
解决办法
2万
查看次数

标签 统计

twitter-bootstrap ×7

javascript ×4

popover ×4

jquery ×3

ajax ×2

asp.net ×1

css ×1

delay ×1

tooltip ×1