Как установить значение переменной в загрузочном поповере, используя контент и setcontent? - PullRequest
Новая
       28

Как установить значение переменной в загрузочном поповере, используя контент и setcontent?

0 голосов
/ 26 июня 2018 

   <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 элемента, первый из которых я нажимаю, отображаются правильные данные, но при щелчке по любому другому элементу отображаются те же самые предыдущие данные, пока яобновите страницу и нажмите.Однако в удаленном режиме я вижу, что правильные данные выбираются каждый раз, но на странице всегда отображается первый элемент, который я щелкаю.

Оповещение показывает правильный обновленный контент, но popover не устанавливает его в поле.

Я также попробовал следующий способ, который я нашел в одном из ответов, используя setcontent.Это работает несколько, но мне нужно дважды щелкнуть, чтобы получить правильный контент.В первом щелчке он показывает предыдущее значение: 

   $('.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>

1 Ответ

0 голосов
/ 26 июня 2018

При наличии базового всплывающего окна для каждой документации 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>

Приложение

Не совсем верно.Мой пример выше предназначен для отображения информации, взятой из атрибутов данных с нажатых кнопок, и для того, чтобы показать вам один из способов передачи параметров в обработчик содержимого всплывающей подсказки

Вместо этого рассмотрим следующее:

IПредположим, что все ваши всплывающие кнопки помечены классом .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 получает значение.

...