Django htmx更改hx-get url后，用户从单选按钮输入

yrdbyhpb 于 2022-12-05 发布在 Go

关注(0)|答案(1)|浏览(152)

这里是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()}

于飞：

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

这是单击以下单选按钮之一时出现的错误：当前路径planner/detail/None/与上一个路径匹配。它显示None/是因为当您加入页面时，没有单击任何单选按钮，因此没有slug来替换它。我需要一种方法来将None替换为用户选择的对象的slug / id。我需要在每次更改选择时更改url。
我对使用apline.js持开放态度，但我想在htmx/django中使用它。
非常感谢你。

django

来源：https://stackoverflow.com/questions/74680668/django-htmx-change-hx-get-url-after-user-input-from-radio-buttons

1条答案

按热度按时间

9jyewag01#

基本上，您是基于一次点击来更改一个属性（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>

赞(0）回复(0）举报 2022-12-05

我来回答

Django htmx更改hx-get url后，用户从单选按钮输入

1条答案

相关问题

热门标签

最新问答