Is it possible to conditionally use AlpineJS event with Django templates?

Question

I have a select with an AlpinheJS @change event that changes the path based on the selected option:

<select role="menu"
        id="LanguageSelector"
        @change="location.pathname = '/' + $event.target.value + '{{ request.path }}'.slice(3)">
</select>

I want to use this select in another page where I don't want the @change to work:

{% include "shop/components/layout/header/language_selector.html" with enable_onchange=False %}

But I can't figure it out.

I've modified the select in any way I knew, but nothing works:

<div x-data="{ shouldChange: `{{ enable_onchange|default:True }}` }">
{#{% with should_change=enable_onchange|default:True|yesno:"true,false" %}#}
{#  <div x-data="{ shouldChange: '{{ should_change }}' }">#}
{#{% endwith %}#}
<select role="menu"
        id="LanguageSelector"
          {% if enable_onchange|default:True %}@change="location.pathname = '/' + $event.target.value + '{{ request.path }}'.slice(3)"{% endif %}>
{#        @change="shouldChange ? location.pathname = '/' + $event.target.value + '{{ request.path }}'.slice(3) : void(0)">#}
</select>
</div>

I've commented out the alternative method I attempted.
@change fires no matter the code.

But if I modify default to False then @change won't work.
So it seems that I don't receive enable_onchange from {% include "shop/components/layout/header/language_selector.html" with enable_onchange=False %} ?

I don't want to use <script> tags.

What do you think ?

TUPKAP · Accepted Answer · 2023-11-01 16:48:43Z

0

I don't use Django, but I think you must remove quotes and backticks when you echo the enable_onchange in the html. If you enclose the value in quotes, it will always be true because as a boolean value it will be equivalent to a non-empty string, therefore always true
Try something like:

<div x-data="{ shouldChange: {{ enable_onchange|default_if_none:True|yesno:"true,false" }} }">

You can also check the result in your browser DOM inspector

Regarding the "default" filter, from the documentation I can see that it is used to convert False value to another value, so, in your way, when you pass False, the result will ever be True. Instead of "default" filter try the "default_if_none" filter

edited Nov 1, 2023 at 16:48

answered Nov 1, 2023 at 15:35

TUPKAP

5,5642 gold badges5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to conditionally use AlpineJS event with Django templates?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related