XF 2.1 Problem with filtering

[Matt C.]

Okay in my add-on I'm filtering between platforms.



The filtering works, there's just a few issues. The first problem is that the URL doesn't change to matchmaking/&platform=PC, for example, when I hit the filter button.

The second problem is that sometimes when I reload I get a confirm form re submission notice.


Here is the filter template code:

<xf:macro name="filter_bar">
<div class="block-filterBar">
    <div class="filterBar">
        <xf:form action="{{ link('matchmaking') }}">
            <div class="inputGroup inputGroup--auto">
                <xf:select name="platform" value="{$params.platform}" class="input--autoSize">
                    <xf:option>{{ phrase('ah_mm_any_platform') }}</xf:option>
                    <xf:option value="PC">{{ phrase('ah_mm_pc') }}</xf:option>
                    <xf:option value="PlayStation 4">{{ phrase('ah_mm_playstation_4') }}</xf:option>
                    <xf:option value="Xbox One">{{ phrase('ah_mm_xbox_one') }}</xf:option>
                </xf:select>

                <xf:button type="submit">{{ phrase('filter') }}</xf:button>
            </div>
        </xf:form>
    </div>
</div>
</xf:macro>

I'm pretty sure there's something in the xf:form action part, but I'm not sure what to change.

Thank you to anyone who can help.

 

[DragonByte Tech]

Might need to change the relevant line to <xf:form action="{{ link('matchmaking') }}" type="get"> though I'm not sure if that's the right value as I've never actually needed to switch to a get request for forms


Fillip

 

[Matt C.]

Might need to change the relevant line to <xf:form action="{{ link('matchmaking') }}" type="get"> though I'm not sure if that's the right value as I've never actually needed to switch to a get request for forms


Fillip

That doesn't do anything.

Could there be something wrong with this part?

public function actionFilters()
{
    $filters = $this->getMatchFilterInput();

    if ($this->filter('apply', 'bool'))
    {
        return $this->redirect($this->buildLink(
            'matchmaking', null, $filters
        ));
    }

    $showTypeFilters = true;

    $viewParams = [
        'filters' => $filters,
        'showTypeFilters' => $showTypeFilters
    ];

    return $this->view('AH\Matchmaking:Filters', 'ah_mm_filters', $viewParams);
}

 

[DragonByte Tech]

I'm not sure to be honest, I've not done any work with that sort of filtering before so I couldn't say, sorry


Fillip

 

[Matt C.]

I'm not sure to be honest, I've not done any work with that sort of filtering before so I couldn't say, sorry


Fillip

No worries, thank you Fillip. Hopefully someone else will come along.

 

[HappyWorld]

That doesn't do anything.

Ah i noticed. It should be

method="get"

instead of

type="get"

 

[Matt C.]

Yes that worked! Thank you!

But I still have some issues.

The route is a bit weird, and the filter doesn't reflect the route.

 

[HappyWorld]

Try to view HTML source in your browser and see what is within

<form>...</form>

tag.

I think there could be a kind of hidden input field, which explains the "_xfRoute" thing in your URL.

 

[Matt C.]

Yes there is. How do I remove that? It's not in the template.

 

[HappyWorld]

I think that is automatically generated by the

<xf:form>

tag

 

[Matt C.]

I think that is automatically generated by the

<xf:form>

tag

Okay that makes sense. Can you help me with getting the filter to reflect the route? I have the value set as {params.platform}

 

[HappyWorld]

I think because your problem now is getting rid of _xfRoute, you can use normal <form> tag instead of <xf:form>.

Reference :

XF 2.0 - Question regarding custom form in template

Hi, I know its best practice to use xf:form (which I can't find any documentation on) however is it OK to use a custom form in a template or is it BAD practice? (I differentiate OK and BAD practice) Thanks in advance :)

xenforo.com

Now please try this one

<xf:macro name="filter_bar">
<div class="block-filterBar">
    <div class="filterBar">
        <form action="{{ link('matchmaking') }}" method="get">
            <div class="inputGroup inputGroup--auto">
                <xf:select name="platform" value="{$params.platform}" class="input--autoSize">
                    <xf:option>{{ phrase('ah_mm_any_platform') }}</xf:option>
                    <xf:option value="PC">{{ phrase('ah_mm_pc') }}</xf:option>
                    <xf:option value="PlayStation 4">{{ phrase('ah_mm_playstation_4') }}</xf:option>
                    <xf:option value="Xbox One">{{ phrase('ah_mm_xbox_one') }}</xf:option>
                </xf:select>

                <xf:button type="submit">{{ phrase('filter') }}</xf:button>
            </div>
        </form>
    </div>
</div>
</xf:macro>

 

[Matt C.]

If I change it to <form>, then when I hit the filter button it goes to http://localhost/index.php?platform=PC

 

[HappyWorld]

If I change it to <form>, then when I hit the filter button it goes to http://localhost/index.php?platform=PC

Sorry i don't know what variable contains the correct route value. ,

If you know it, you can add this somewhere within the <form> tag.

<input type="hidden" name="_xfRoute" value="{$someVariableHere}" />

 

[Matt C.]

Sorry i don't know what variable contains the correct route value. ,

If you know it, you can add this somewhere within the <form> tag.

<input type="hidden" name="_xfRoute" value="{$someVariableHere}" />

That still has that extra information in the route. It's fine tho, I can live with that. Do you know how to get the filter to reflect the route parameters?

 

[HappyWorld]

Assuming the route parameter is $someVariableHere , you can use this HTML code

<xf:macro name="filter_bar">
<div class="block-filterBar">
    <div class="filterBar">
        <form action="{{ link('matchmaking') }}" method="get">
            <div class="inputGroup inputGroup--auto">
                <xf:select name="platform" value="{$params.platform}" class="input--autoSize">
                    <xf:option>{{ phrase('ah_mm_any_platform') }}</xf:option>
                    <xf:option value="PC">{{ phrase('ah_mm_pc') }}</xf:option>
                    <xf:option value="PlayStation 4">{{ phrase('ah_mm_playstation_4') }}</xf:option>
                    <xf:option value="Xbox One">{{ phrase('ah_mm_xbox_one') }}</xf:option>
                </xf:select>

                <xf:button type="submit">{{ phrase('filter') }}</xf:button>
            </div>
            <input type="hidden" name="_xfRoute" value="{$someVariableHere}" />
        </form>
    </div>
</div>
</xf:macro>

 

[Matt C.]

That's not what I mean.



In the template the value equals {$params.platform}. <xf:select name="platform" value="{$params.platform}" class="input--autoSize">

It's not getting the parameters from the route.