时间戳

首页 > 解决方案 > 如何使用内容和设置内容在引导弹出窗口中设置变量值？

javascript - 如何使用内容和设置内容在引导弹出窗口中设置变量值？

问题描述

 

   <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>

标签： javascripttwitter-bootstraptwitter-bootstrap-3popoverbootstrap-popover

解决方案

给定每个 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;
    }
};

现在有几点需要考虑：

  1. 如果那个调用成功，里面有什么result？
  2. 是阻塞调用还是invokeAction非阻塞调用，即同步还是异步？

第 2 项非常重要。

如果调用是同步的，你应该没问题，假设result是 html 文本。

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

推荐阅读