Question

   <script>
     function showData(recId,e)
        {  
      Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ControllerClass.getPopData}',

              recId,"{!record.Id}",

              function (result, event) {

              if(event.status)

              alert(result);   //Alerts correct value        

              $('.li').popover({content:result}); //Holds previous value 

              }, {buffer:false}
            );     
        }   
 </script>

现在我面临的问题是，如果显示的列表中有3个项目，则我单击的第一个项目将显示正确的数据，但是单击任何其他项目将显示相同的先前数据，直到刷新页面并单击。但是，在远程操作中，我可以看到每次都提取了正确的数据，但是在页面中，该数据始终显示我单击的第一项。

警报显示正确的更新内容，但弹出框未在框中设置相同的内容。

我还尝试了以下方法，使用setcontent在其中一个答案中找到了方法。这有点奏效，但我必须单击两次以获取正确的内容。在第一次onclick中，它显示先前的值：

   $('.li').popover({    
    content: 'Loading...'    
     });
       
     $('.li').attr('data-content', res);
 var popover = $('.li').data('popover');
 popover.setContent();
 popover.$tip.addClass(popover.options.placement);

任何想法我该如何解决？

根据评论进行了更新。它几乎可以正常工作，但是当我单击一个接一个的另一个项目时，如果我将鼠标移出并悬停在同一项目上，即使我看到远程调用发生，它也无法显示弹出窗口。

    <script>
    function showPopup(recId,e)
  {  

    var res='';

    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ControllerClass.getData}',
        recId,"{!record.Id}",
        function (result, event) {
        if(event.status)
          res=result;
        $('.li').popover("destroy").popover({content:res, placement: "bottom", template: '<div class="popover" style="width:250px; font-size:12px"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

                 });
        },{ buffer: false}

      );     

  }

</script>

Answer 1

根据您拥有的BS3文档，给出一个基本的弹出窗口：

<button type="button" class="btn btn-primary li" 
    title="Popover title" >
    Click to toggle popover
</button>

使用<script>：

// Where the `html` property is true or false 
// if your returned dynamic data is 
// html or simple text respectively.

var po_options = { 
  html    : true, 
  content : function() {

               // $(this) is set to the element with the popover
               // get your_data, 

               return your_data;
            }
};

并通过以下方式初始化

：

 $('.li').popover(po_options);

在此代码段中，您可以看到弹出窗口以及返回的内容出现。您需要做的就是根据单击的.li传递适当的参数，并将其传递给您的数据检索代码，您应该会很好

var po_options = {
  html: true,
  content: function() {
    var p1 = $(this).data("param1");
    return '<span>' + p1 + '</span>';
  }
};


$('.li').popover(po_options);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary li" title="Popover 1" data-param1="Parameter1">
        Click to toggle popover 1
</button>
<br />
<br />
<button type="button" class="btn btn-primary li" title="Popover 2" data-param1="Parameter2">
        Click to toggle popover 2
</button>

附录

不太正确。上面的示例旨在显示从单击的按钮的数据属性中获取的信息，并旨在向您展示一种将参数传递给工具提示内容处理程序的方法

请考虑以下内容：

我假设您所有的弹出按钮都标有.li类，因此可以这样初始化弹出窗口：

 $('.li').popover(po_options);

po_options被定义为

var po_options = { 
  html    : true, 
  content : function() {
    var p1 = 'Loading...';

    Visualforce.remoting.Manager.invokeAction(
      '{!$RemoteAction.ControllerClass.getData}',
       recId,"{!record.Id}",
       function (result, event) {
         if(event.status) {
           p1 = result; 
         }
      });

      return p1;
    }
};

现在有几件事要考虑：

如果该呼叫成功，则result中是什么？
对invokeAction的调用是阻塞的还是非阻塞的，是同步的还是异步的？

项目2非常重要。

如果通话是同步的，那么假设result是html文本，就可以了。

但是，如果调用是异步的，则您不太可能看到工具提示内容，因为po_options.content处理程序可能会在invokeAction参数result获得值之前返回。

如何使用content和setcontent在自举程序弹出窗口中设置变量值？

1 个答案:

附录