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
    • 98
    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:

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

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

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