Custom Joomla Component: Filtered Search Refresh and Scroll to #Anchor

Question

I'm working on a custom component that uses Joomla's standard "filters" to filter the results on my form:

<form action="<?php echo JRoute::_('index.php?option=com_event&view=events'); ?>" method="post" name="adminForm" id="adminForm">
<?php echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this,'options' => array('filtersHidden' =>$hidden))); ?>

The filters work fine, except when a user selects a filter, the page refreshes and leave the user all the way at the top of the page. I am looking for the page to reload and scroll down to #adminForm so that the user is brought back to this part of the page instead of needing to scroll again.

Here is the some code I found where the filters are loaded:

defined('JPATH_BASE') or die;

use \Joomla\CMS\HTML\HTMLHelper;
use \Joomla\CMS\Factory;
use \Joomla\CMS\Language\Text;

$data = $displayData;

// Receive overridable options
$data['options'] = !empty($data['options']) ? $data['options'] : array();

// Check if any filter field has been filled
$filters       = false;
$filtered      = false;
$search_filter = false;

if (isset($data['view']->filterForm))
{
    $filters = $data['view']->filterForm->getGroup('filter');
}

// Check if there are filters set.
if ($filters !== false)
{
    $filterFields = array_keys($filters);
    $filled       = false;

    foreach ($filterFields as $filterField)
    {
        $filterField = substr($filterField, 7);
        $filter      = $data['view']->getState('filter.' . $filterField);

        if (!empty($filter))
        {
            $filled = $filter;
        }

        if (!empty($filled))
        {
            $filtered = true;
            break;
        }
    }

    $search_filter = $filters['filter_search'];
    unset($filters['filter_search']);
}

$options = $data['options'];

// Set some basic options
$customOptions = array(
    'filtersHidden'       => isset($options['filtersHidden']) ? $options['filtersHidden'] : empty($data['view']->activeFilters) && !$filtered,
    'defaultLimit'        => isset($options['defaultLimit']) ? $options['defaultLimit'] : Factory::getApplication()->get('list_limit', 20),
    'searchFieldSelector' => '#filter_search',
    'orderFieldSelector'  => '#list_fullordering'
);

$data['options'] = array_unique(array_merge($customOptions, $data['options']));

$formSelector = !empty($data['options']['formSelector']) ? $data['options']['formSelector'] : '#adminForm';

// Load search tools
HTMLHelper::_('searchtools.form', $formSelector, $data['options']);
?>

<div class="js-stools clearfix">
    <div class="clearfix">
        <div class="js-stools-container-bar">
            <label for="filter_search" class="element-invisible"
                aria-invalid="false"><?php echo Text::_('COM_EVENT_SEARCH_FILTER_SUBMIT'); ?></label>

            <div class="btn-wrapper input-append">
                <?php echo $search_filter->input; ?>
                <button type="submit" class="btn hasTooltip" title=""
                    data-original-title="<?php echo Text::_('COM_EVENT_SEARCH_FILTER_SUBMIT'); ?>">
                    <i class="icon-search"></i>
                </button>
            </div>
            <?php if ($filters): ?>
                <div class="btn-wrapper hidden-phone">
                    <button type="button" class="btn hasTooltip js-stools-btn-filter" title=""
                        data-original-title="<?php echo Text::_('COM_EVENT_SEARCH_TOOLS_DESC'); ?>">
                        <?php echo Text::_('COM_EVENT_SEARCH_TOOLS'); ?> <i class="caret"></i>
                    </button>
                </div>
            <?php endif; ?>

            <div class="btn-wrapper">
                <button type="button" class="btn hasTooltip js-stools-btn-clear" title=""
                    data-original-title="<?php echo Text::_('COM_EVENT_SEARCH_FILTER_CLEAR'); ?>"
                    onclick="jQuery(this).closest('form').find('input').val('');">
                    <?php echo Text::_('COM_EVENT_SEARCH_FILTER_CLEAR'); ?>
                </button>
            </div>
        </div>
    </div>
    <!-- Filters div -->
    <div class="js-stools-container-filters hidden-phone clearfix" style="">
        <?php // Load the form filters ?>
        <?php if ($filters) : ?>
            <?php foreach ($filters as $fieldName => $field) : ?>
                <?php if ($fieldName != 'filter_search') : ?>
                    <div class="js-stools-field-filter">
                        <?php echo $field->renderField(array('hiddenLabel' => true)); ?>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

I'm not sure if I'm looking in the correct area or not. Any pointers or guidance would be much appreciated!

Answer 1

The simplest solution is to add the anchor to form's destination:

<form action="<?php echo JRoute::_('index.php?option=com_event&view=events#adminForm'); ?>" method="post" name="adminForm" id="adminForm">