Search code examples
javascriptjquerypopover

How to use webui-popover with dynamically generated table (JQuery)

I have a table outputting some results to the screen in tabular form. For each table row, I have a column with an icon (more). What I want to achieve is that for each icon, on click, it shows a pop-over, similar to what Tidal does. But so far, it's only working for the last item in the list. I'm using webui-popover to get this done.

enter image description here

Here is what I've done so far. Please note that the CSS and JavaScript for webui-popover have been properly included in the project.

My HTML Markup for my rows:

<tr>
  <td>'.$name.'</td>
  <td>'.$title.'</td>
  <td>
    <a id="'.$id.'" class="more" data-id="'.$id.'" href="javascript:void(0);">
      <i class="material-icons">more_horiz</i>
    </a>
  </td>
</tr>

My JavaScript for functionality:

var more = document.getElementsByClassName('more');

First I'm getting all items with the class more, and looping through them:

for (var i = 0; i < more.length; i++) {

   more[i].onclick = function(){
   var uid = this.dataset.id;

    // Popover
    $('#'+i).webuiPopover({
      url:'#pop-content',
      trigger:'click' ,
      style: 'v2',
      placement:'bottom-left',
      animation:'pop',
      width: '180'});
    }
 }

HTML for pop-over content:

<div id="pop-content">
  <a class="collection-item title">Signed in as</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Support</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Settings</a>
</div>

Straight out of the box, you can see that each row is supposed to show the pop-over upon clicking the "more" icon, but it's not doing that.

Solution

  • I think it's because every pop-over is sharing the same content. You can fix it by adding:

    cache: false

    Besides that, you should setup the webuiPopover outside the 'onclick' listener. That listener seems completely redundant and could be removed, unless you're using the variable 'uid' somewhere else. I've created a working example based on your code:

    JSFIDDLE