Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to use webui-popover with dynamically generated table (JQuery)

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 755
    Answer it

    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:

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

    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 =;
        // Popover
          trigger:'click' ,
          style: 'v2',
          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>

    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.

 0 Answer(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: