On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • I'm trying to get the grouped results to display as tabs. I got it working well as non-ajax, but then of course the page is refreshed whenever using the paging links, resetting the tabs to their default state. Adding Ajax search to the mix broke everything.

    So how would one produce tabbed grouped results, using jquery for the Ajax search?
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
    • Question: how do you access the category name? Is there a placeholder for that? For example, the default "uncategorized" category name for items found without a value in their category TV.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
      • I did it! I made tabs! Here's how I did it, using JQuery UI http://jqueryui.com/demos/tabs/.

        In the main Ajax Search results tpl, I added:

        <div id="tabs">
        <ul id="tablist">
        </ul>
        [+as.listGrpResults+]
        </div>
        <script>
        $(function() {
            $( "#tabs" ).tabs();
        });
        </script>

        The div "tabs" surrounding the as.listGrpResults satisfied the requirements of a basic JQuery UI tabbed element. Then empty "tablist" ul gets populated dynamically from the groups themselves.

        This is put in the beginning of the grpResult tpl:
        [+as.grpResultsDef:is=`1`:then=`
        <style type="text/css">
        #tablist li{display:none;}
        #tablist li.ui-state-default{display:inline;}
        </style>
        <script>
        var parent = document.getElementById('tablist');
        var listItem = document.createElement('li');
        var str = '[+as.grpResultId+]';
        var title = str.substring(10);
        listItem.innerHTML = '<a href="#[+as.grpResultId+]">'+title+'</a>';
        parent.appendChild(listItem);
        </script>

        The script creates and loads li elements for the tabs on-the-fly. The title is extracted from the as.grpResultId string by stripping the prefix that AjaxSearch adds to the value of the grouping TV. There should be some other way of getting the group title, but I couldn't find anything.

        The style block is an ugly hack to deal with the problem of new li elements being added every time the user clicks the "next" or "previous" paging links. These tags aren't given the classnames by the UI tabs script, so it's safe to hide all classless li elements, and show the ones with the classnames. It would be better to figure out javascript code to simply not create the li element if an li element with the same content already exists, but I hate javascript and have done enough for one day.

        Anyway, aside from some basic styling, it makes working tabs of a grouped Ajaxified AjaxSearch, using JQuery.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org