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

XF 1.3 Creating a drop down selection box on a page

Discussion in 'Troubleshooting and Problems' started by jayramfootball, Aug 13, 2014.

  1. jayramfootball

    jayramfootball Active Member

    Is it possible to create a drop down selection box on a xenforo page based on a data field i have in a table within my xenforo database?

    I have managed to create a php page and querying a data table and outputting the results of a query I use to update that table via an hourly cron job, but I want to simplify the user experience by allowing them to filter based on column 1 of the output below...

    Screen Shot 2014-08-13 at 14.37.20.png

    The current page will just create a long list of all matches... but i would like to have a little filter/selection box at the top to select each match...

    Any help appreciated!
     
  2. jayramfootball

    jayramfootball Active Member

    Just for a bit more context - my page has the following code...
    HTML:
    <div style="width:99%">
         <h2 class="subHeading">Player Ratings : Your Scores</h2>
        <table border="0" bordercolor="#a5cae4"width="100%" >
    <tr ALIGN="center" style = "background-color:#991010; font-size:8pt; color:#f0f0f0;">
    <td >Game</td>
    <td></td>
    <td ALIGN="left" style = "padding-left:20px;">Name</td>
    <td>Rating Given</td>
    
    </tr>
            <xen:foreach loop="$rows4" value="$row" i="$i">
    <xen:if is="{$row.user_id} == {$visitor.user_id}">             
    <tr style="color:#646464;">
                    <td ALIGN="center" BGCOLOR="#f0f0f0" style = "font-size: 10pt; width:30%;">{$row.title}</td>
            <td ALIGN="center" BGCOLOR="#f0f0f0" style="width:10%;"><img src="data:image/jpeg;base64,{$row.player_image}"/></td>
                    <td BGCOLOR="#f0f0f0"style = "padding-left:20px; font-size: 14pt;width:25%;">{$row.player_name}</td>
                    <td ALIGN="center" style = "font-size: 18pt; color:#991010; width:25%;"> <b>{$row.rating}</b></td>
                  
            </tr>
    </xen:if>
            </xen:foreach>
         </table>
    </div>
    I am already using a <xen:if is></xen:if> to filter the results in the table directly from the data ($rows4 is just the parameter output from a PHP callback) but I want to take the result of a drop down list to filter the table even further...in other words make a user selectable filter as opposed to a hard coded data filter...
     
  3. jayramfootball

    jayramfootball Active Member

    For those interested I went with a text filter using a bit of javascript....adapting some code from here:
    http://codepen.io/chriscoyier/pen/tIuBL

    Code:
    <style>
      .light-table-filter {
        background: white;
        border: 1px double #DDD;
        border-radius: 5px;
        box-shadow: 0 0 5px #333;
        color: #666;
        outline: none;
        height:25px;
        width: 400px;
      }
    </style>
    
    <script>
    (function(document) {
        'use strict';
    
        var LightTableFilter = (function(Arr) {
    
            var _input;
    
            function _onInputEvent(e) {
                _input = e.target;
                var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
                Arr.forEach.call(tables, function(table) {
                    Arr.forEach.call(table.tBodies, function(tbody) {
                        Arr.forEach.call(tbody.rows, _filter);
                    });
                });
            }
    
            function _filter(row) {
                var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
                row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
            }
    
            return {
                init: function() {
                    var inputs = document.getElementsByClassName('light-table-filter');
                    Arr.forEach.call(inputs, function(input) {
                        input.oninput = _onInputEvent;
                    });
                }
            };
        })(Array.prototype);
    
        document.addEventListener('readystatechange', function() {
            if (document.readyState === 'complete') {
                LightTableFilter.init();
            }
        });
    
    })(document);
    </script>
    
    <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter by typing match opponent, player name or score given">
    <br />
    <br />
    <div style="width:99%">
         <h2 class="subHeading">Player Ratings : Your Scores</h2>
        <table class="order-table table" border="0" bordercolor="#a5cae4"width="100%" >
    <thead>
    <tr ALIGN="center" style = "background-color:#991010; font-size:8pt; color:#f0f0f0;">
    <td >Game</td>
    <td></td>
    <td ALIGN="left" style = "padding-left:20px;">Name</td>
    <td>Rating Given</td>
    </tr>
    </thead>
            <xen:foreach loop="$rows4" value="$row" i="$i">
    <xen:if is="{$row.user_id} == {$visitor.user_id}  ">         
    <tbody>
    <tr style="color:#646464;">
                    <td ALIGN="center" BGCOLOR="#f0f0f0" style = "font-size: 10pt; width:30%;">{$row.title}</td>
            <td ALIGN="center" BGCOLOR="#f0f0f0" style="width:10%;"><img src="data:image/jpeg;base64,{$row.player_image}"/></td>
                    <td BGCOLOR="#f0f0f0"style = "padding-left:20px; font-size: 14pt;width:25%;">{$row.player_name}</td>
                    <td ALIGN="center" style = "font-size: 18pt; color:#991010; width:25%;"> <b>{$row.rating}</b></td>
                  
            </tr>
    </tbody>
    </xen:if>
            </xen:foreach>
         </table>
    </div>
     
  4. jayramfootball

    jayramfootball Active Member

    Looks like this and text filter on top left works really well - filters on all table data....
    Screen Shot 2014-08-14 at 00.04.47.png
     

Share This Page