标签: htmx

使用 HTMX 处理错误

<form  
 class="" id="form" hx-post="/add/" hx-swap="afterbegin" hx-target="#big_list" hx-trigger="submit">
    <input type="text" name="langue1" >
    <input type="text" name="langue2">
    <div id="errors"></div>
    <button type="submit">GO</button>
</form> 
<div id="big_list"> 
.....
</div>
Run Code Online (Sandbox Code Playgroud)

我有一个很大的列表#big_list,我希望#form在提交时只附加一行。

如何使用 htmx 处理错误并在 中显示消息#errors

htmx

21
推荐指数
4
解决办法
1万
查看次数

使用 htmx 从表单外部提交表单

如何使用提交按钮或表单外的输入类型提交来提交表单?在 HTML 中,使用表单 ID 可以轻松完成,但我没有找到在 HTMX 表单之外提交表单的方法?

有人可以在这方面提供帮助吗?

htmx

10
推荐指数
1
解决办法
9683
查看次数

如何在 Django 中处理来自 HTMX 的 PATCH 请求?

我想向我的应用程序发送 PATCH 请求,但我不确定如何在 Django 中使用该请求。我目前收到以下错误。

AttributeError: 'WSGIRequest' object has no attribute 'PATCH'
Run Code Online (Sandbox Code Playgroud)

HTMX 文件中的输入字段如下所示(我还确保发送 CSRF 令牌):

<input 
        name="myfield"
        hx-patch="{% url 'my_update' myobj.id %}"
        hx-swap="none" />
Run Code Online (Sandbox Code Playgroud)

这是 Django 视图

class MyHtmxView(View):

def patch(self, request, *args, **kwargs):
    form = MyForm(request.PATCH)
    if form.is_valid():
        form.save()
        # return an okay status? 200?
    else:
        return HttpResponse(self.form_invalid(form))
Run Code Online (Sandbox Code Playgroud)

Django 正在接收请求,但不确定如何处理 request.PATCH。我可以在 Django 文档中看到有 HttpRequest.GET 和 HttpRequest.POST 但没有 HttpRequest.PATCH https://docs.djangoproject.com/en/3.2/ref/request-response/#httprequest-objects。处理补丁的最佳方法是什么?

django django-templates django-models django-views htmx

9
推荐指数
1
解决办法
877
查看次数

Select2“更改”事件不触发htmx

这按照我想要的方式工作:如果<select>发生更改,则触发htmx 。

<script src="https://unpkg.com/htmx.org@1.1.0"></script>

<table>
 <tr hx-post="//example.com" hx-trigger="change">
  <td>
    <select name="runner">
     <option value="a">a</option>
     <option value="b">b</option>
    </select>
  </td>
 </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

如果我使用 django-autocomplete-light 小部件,那么它不起作用。

我使用这个版本:django-autocomplete-light==3.8.1

javascript autocomplete htmx

8
推荐指数
2
解决办法
2604
查看次数

如何从 JavaScript 手动触发元素的 hx-get 事件

我正在使用htmx向我的页面添加一些 AJAX 调用。我有一个cart-count元素,定义为在页面加载后 1 秒内检索购物车中的商品数量:

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML">
</span>
Run Code Online (Sandbox Code Playgroud)

我还有一个add-to-cart按钮,在它自己的东西之后(例如将其自身更改为remove from cart使用 htmx),发送一个额外的属性

    response['HX-Trigger-After-Swap'] = "cart-updated"
Run Code Online (Sandbox Code Playgroud)

到前端(请参阅此处的文档)。

我有一个有效的事件侦听器,

document.body.addEventListener("cart-updated",
    function (evt) {
        alert("cart updated")
    })
Run Code Online (Sandbox Code Playgroud)

但是我怎样才能触发JS中的元素呢hx-get#cart-count

注意

hx-trigger="load delay:1s, cart-updated"
Run Code Online (Sandbox Code Playgroud)

如果购物车内容位于元素的父链中,则可以工作add-to-cart,但不幸的是,我的网页并非如此。

请注意,这里也提出了这个问题

javascript htmx

8
推荐指数
1
解决办法
1万
查看次数

单元测试 Htmx?

如何为Htmx编写单元测试?

堆栈溢出不允许我发布这么短的问题,所以这一段说我没有看到关于此的文档或库。

编辑:具体来说,我希望在 Django 中进行单元测试。

unit-testing htmx

8
推荐指数
2
解决办法
1652
查看次数

htmx:onLoad:“全页加载”和“交换后”

我想用我自己的方法初始化一个select元素,如tom-select 示例中的元素:

<select id="select-repo" placeholder="Pick a repository..." multiple></select>
Run Code Online (Sandbox Code Playgroud)
function my_select_init(el) {
  new TomSelect(el, {
    persist: false,
    createOnBlur: true,
    create: true
  })
}
Run Code Online (Sandbox Code Playgroud)

有两种不同的方式:

情况 1:加载整个页面

在这种情况下,您可以使用现代 onLoad 方法之一。

例如:

document.addEventListener('DOMContentLoaded', function () {
  // do something here ...
}, false);
Run Code Online (Sandbox Code Playgroud)

情况2:片段通过htmx插入到DOM中

如何初始化片段?

首选解决方案

我希望 HTML 和加载代码位于一处(行为局部性),并且我希望该 html 片段在两种情况下都相同。

到目前为止,我没有使用 Hyperscript 或 Alpine.js,但我愿意使用这些库之一,如果这能让解决方案更简单的话。

javascript htmx

8
推荐指数
1
解决办法
7977
查看次数

如何使用 HTMX 实现重定向?

HTMX 非常棒,并且使用 AJAX 来完成大部分工作也非常棒!但有时我只需要真正的“物理”重定向到另一个页面。

有什么想法如何在不开始编写自定义 JS 代码的情况下实现这一目标吗?

谢谢!

javascript redirect htmx

8
推荐指数
1
解决办法
1万
查看次数

我们如何让 htmx 响应触发表单重置?

我正在创建一个非常基本的 Django 消息应用程序,并想用它htmx来发送和呈现消息。我可以毫无问题地发布、保存消息并呈现部分消息。但是,我遇到了一个奇怪的问题,我的表单文本区域没有被重置。因此,我会发送一条消息,插入交换后,我的旧消息仍会在文本区域中。这不太理想!

我尝试通过添加 onclick 事件来手动清除文本区域,如下所示:

网页

<div id="new-message-div"></div>


<form id="message-form" class="chat-form rounded-pill bg-dark" data-emoji-form="" hx-post="{% url "chat:create-message" object.pk %}" hx-target="#new-message-div">
...

{{ message_form }}

...

<button class="btn btn-icon btn-primary rounded-circle ms-5" type="submit" onclick="submitForm()"> </button>
</form>
Run Code Online (Sandbox Code Playgroud)

脚本(/sf/answers/1021247601/

<script>
function submitForm() {
   var message_form = document.getElementById('message-form');
   message_form.submit(); // Submit the form
   message_form.reset();  // Reset all form data
   return false; // Prevent page refresh
}
</script>
Run Code Online (Sandbox Code Playgroud)

尽管在submitForm()中有message_form.submit(),我的表单没有被提交,但文本区域正在重置。

问题:

成功发送和渲染消息后,如何重置我的文本区域?

Django 视图,基于https://github.com/legionscript/socialnetwork/blob/84375841429887e394a2a31e1b67919f81a3cb06/social/views.py#L428

def create_message(request, pk):
    message …
Run Code Online (Sandbox Code Playgroud)

javascript django django-templates htmx

7
推荐指数
2
解决办法
7373
查看次数

htmx发出ajax请求后如何执行javascript代码?

我目前正在使用 django 和 htmx 构建一个网站,到目前为止我很喜欢这个组合。假设我在按钮上使用 htmx 属性,将 DOM 中的一个 div 替换为另一个应该包含所见即所得编辑器的 div。现在必须使用 javascript 初始化所见即所得编辑器。我该怎么做呢?我可以只返回 htmx 请求的编辑器 div 下的脚本标签吗?这不是有点丑陋或不好的做法吗,因为你在 html 正文的中间有脚本标签?解决这个问题的最好方法是什么?提前致谢

django htmx

7
推荐指数
2
解决办法
9040
查看次数