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](https://i.stack.imgur.com/VrOpm.jpg)
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)