Django htmx изменение hx-get url после ввода пользователем с радиокнопок

Это forms.py:

class OrderForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.attrs = {
            "hx_get": reverse("planner:detail", kwargs={"slug": self.instance.venue}),
            "hx_target": "#services",
        }

    class Meta:
        model = Order
        fields = ["venue"]

        widgets = {"venue": forms.RadioSelect()}

HTML:

<div id="venue-options" class="p-3">
  {% crispy form %}
</div>

Это ошибка при нажатии одной из радиокнопок: Текущий путь, planner/detail/None/, совпал с последним. Он говорит None/, потому что когда вы присоединяетесь к странице, ни одна из радиокнопок не нажимается, поэтому нет slug для замены. Мне нужен способ заменить None на slug / id объекта, выбранного пользователем. Мне нужно, чтобы url менялся каждый раз при изменении выбора.

Я открыт для использования apline.js, но я хотел бы получить способ сделать это в htmx/django.

Большое спасибо.

По сути, вы изменяете один атрибут (hx_get) на основе щелчка мыши. HTMX сделает это обходным путем на сервер, что кажется неэффективным, так как все данные находятся на странице (предполагая, что значение радиобаттонов является slug, который вам нужен). Вы можете сделать это с помощью чистого javascript, что значительно ускорит процесс

<script>
    //get the form
    const venueForm = document.getElementById('venue-options')
    //when implementing, replace [name='radio'] with name of radio input fields
    const venueRadioButtons = document.querySelectorAll("input[name='radio']")
    //get the default venue URL for later alteration
    const venueURL = venueForm.getAttribute('hx_get')
    
    // create a clickhandler to change the URL to selected radiobutton
    const clickHandler = () => {
      //get the slug value
      let radioButtonSlug=document.querySelector("input[name='radio']:checked").value
      //use reguylar expression to replace last '/word/' value with slug value
      let newVenueUrl = venueURL.replace(/\/\w+\/$/, "/" + radioButtonSlug + "/")
      //reset the the hx_get value
      venueForm.setAttribute('hx_get', newVenueUrl)
    };
    
    // Assign the handler to the radiobuttons
    venueRadioButtons.forEach(i => i.onchange = () => clickHandler());
</script>
Вернуться на верх