1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

OverlayTrigger embedded in dataTable

Discussion in 'XenForo Development Discussions' started by MtoR, May 20, 2015.

  1. MtoR

    MtoR Well-Known Member


    I am trying to use OverlayTrigger inside a dataTable in which I am using an external js called listjs (http://www.listjs.com/) to provide easy sorting capability.

    However, it seems that encapsulation of the OverlayTrigger in such construct is stopping Overlay from functioning as I get redirected to the page instead of it getting loaded in the nice overlay popup.

    I have attached a code snippet of the template here below, is there anything that would avoid the XenForo initialization to parse the OverlayTrigger ? I thought at an issue of selector, could it something like that ?

    I am trying to figure this out since some hours now but can't seem to find what's going wrong... Hope someone might help.

    Thank you,

    <xen:require js="js/themescorp/third_party/listjs/1.1.1/list.min.js" />
    <xen:require js="js/themescorp/third_party/listjs/1.1.1/list.pagination.min.js" />
    <script type="text/javascript">
    $(document).ready(function() {
        var options = {
            valueNames: [ 'username', 'domainName', 'manage' ],
            page: 2,
            includeDirectionLinks: true,
            plugins: [
        var myList = new List('dataList', options);  
    <div id="dataList">  
        <table class="dataTable">
        <tr class="dataRow">
            <th class="username">Username</th>
            <th class="domainName">Domain name</th>
            <th class="manage">Manage</th>
        <tbody class="list">
            <xen:foreach loop="$myDatas" value="$myData">
            <tr class="dataRow">
                <td class="username"><xen:username user="$myData" /></td>    
                <td class="domainName">{$myData.domainName}</th>
                <td class="manage">
                    [<a href="{xen:link 'myPage/myAction', $myData}" class="OverlayTrigger"><span>{xen:phrase edit}</span></a>]<br />
                    [<a href="{xen:link 'myPage/myAction', $myData}" class="OverlayTrigger"><span>{xen:phrase delete}</span></a>]
        <div class="pageNavLinkGroup">
            <div class="PageNav">
                <ul class="pagination"></ul>

Share This Page