标签: htmx

我正在使用HTMXJS一个 javascript 库，它允许您直接在 HTML 中访问 AJAX。

虽然了解了HTMX的基本逻辑，但还是有一些方面没搞懂。

我设法制作了一个表格并将数据写入服务器：

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">

    <button type="button"
        hx-post="write.php"
        hx-target="#container-div"
        hx-swap="innerHTML"> 
        Submit
    </button>
</form>

<div id="container-div"></div>

HTMX 将读取所有name内容并将它们提交到write.php可以使用以下循环读取的位置$_POST：

写.php：

foreach ($_POST as $key => $value) {
    echo "Field ".htmlspecialchars($key)." is ".htmlspecialchars($value)."<br>";
}

我不明白如何用服务器返回的数据填充表单。例如，给定以下表单和以下输出，我想INPUT在按下按钮时填充单个字段：

HTML：

<button type="button"
    hx-get="load.php"
    hx-target="#my-form"
    hx-swap="innerHTML">
    Load data
</button>

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">
</form>

加载.php：

$a = …

我正在尝试使用django-htmx与 Django 和htmx实现类似按钮，但我不知道如何将其作为参数传递给我的视图以保存相关项目。id

# models.py
class Item(models.Model):
    name = models.CharField()
    like = models.BooleanField(null=True, default=None)

（简化）表显示如下项目：

id  name    like
--  -----   ----
 1  Alpha   None
 2  Beta    None

这个想法是通过点击第一个“None”，Django应该将数据库中第一个项目的相似值更改为“True”，这应该反映在表中：

id  name    like
--  -----   ----
 1  Alpha   True
 2  Beta    None

该表是由如下模板生成的：

<table>
{% for item in page_obj %}
    <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td id="like-{{ item.id }}"
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-post="{% url 'save-like' %}?id={{ item.id }}"
            hx-target="#like-{{ item.id }}" 
            hx-swap="outerHTML">
            {{ item.like }} …

我正在使用 htmx 和 hyperscript，我希望在提交时清除下面表单中的所有输入字段：

<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend"
      _="<what should I write here??>">
        <label class="control-label" for="firstNameInput">First Name</label>
        <input id="firstNameInput" name="firstName" class="form-control" type="text" required placeholder="John"/>
        
        <label class="control-label" for="lastNameInput">Last Name</label>
        <input id="lastNameInput" name="lastName" class="form-control" type="text" required placeholder="Doe"/>
        <button class="btn btn-primary">Add User</button>
    </div>
</form>

我尝试<what should I write here??>用例如on submit put '' into <input/>和on submit put '' into <input[value]/>许多其他组合替换，但我无法完成这项工作。

问：提交表单后如何清除所有输入字段？

我正在使用 htmx 和 hyperscript，我希望当表单中所有必需的输入字段都有效时启用“提交按钮”（添加用户）。在这种情况下，必须定义非空名称和有效的电子邮件地址。

<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
        <label class="control-label" for="nameInput">Name</label>
        <input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
        
        <label class="control-label" for="emailInput">Email</label>
        <input id="emailInput" name="email" class="form-control" type="email" required placeholder="john@doe.org"/>
        <button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
    </div>
</form>

我应该写什么而不是<what should I write here??>让这种情况发生？

我有一些输入片段，当满足条件时，我会渲染到 html 页面，除了文件类型的输入之外，一切正常，我想在发生更改时上传文件，但文件对象不在 request.FILES 中，它现在在 request.POST 中我不介意它是 request.POST 但文件显示为'multiple': ['[object File]']

我的部分模板

<div class="my-2">
    <div id="uploaded"></div>
    <p class="lead">{{question.prompt}}</p>
    <input name="multiple" type="file" accept="image/*, .pdf" id="image_{{question.id}}"
        {% if question.required %}required{% endif %} {% if question.disabled %}disabled{% endif %} class="form-control"
        placeholder="{{question.placeholder}}" hx-post="{% url 'survey:file_multiple' %}" hx-trigger="change">
    <input type="hidden" name="filemultipleId"
        value="{% if question.form_input_type == 'file-multiple' %}{{question.id}}{% endif %}">
</div>

我没有使用 django 表单渲染表单，因为实现我正在寻找的动态性将是困难且几乎不可能的

request.POST 查询字典

<QueryDict: {'csrfmiddlewaretoken': ['TiLZFEWw88cqItD8MABv6lZKYDrNaVxGF4ZMDOV3sK43540z6uOcrx5uQO6iYldA', 'date': [''], 'dateId': ['20', '5'], 'multiple': ['[object File]'], 'filemultipleId': ['18'], 'fileId': ['17']}>

追溯

Internal Server Error: …

对于 HTMX 和 Django 来说，我想要实现的是在页面上有一个 ModelForm，并带有一个按钮，允许用户直接在页面上“编辑”字段值。按“编辑”按钮后，页面应显示“取消”和“提交”按钮。它与 HTMX 网站上的这个示例基本相同：Edit Row

• 取消应该放弃编辑并再次显示表格（原样）
• 提交应该将所做的更改发布回模型中

在索引页查看：

这是我到目前为止所拥有的（当用户按下“编辑条目”时），但它没有按预期工作：

有几个问题：

1. 当按下“编辑”按钮时，ModelForm 会将所有内容加载到 HTML 表的第一列中。理想情况下，我希望模型的每个字段都位于表中的“正确”位置。

2. 当按下“取消编辑”按钮时，会将 ModelForm 交换回 HTML 模板。我不想要这个，只是想让表行恢复到以前的状态。

3. 提交按钮不会将数据发送回模型。

我不确定如何真正考虑这里的设计以使 HTML 表和 ModelForm 按预期工作（#1 和 #2）。

对于#3，问题似乎是 PUT request.method 作为空的 QuerySet 返回。

感谢您提供的任何帮助。一旦我开始工作，我将上传一个简短的视频到 YouTube，以帮助其他初学者，因为除了这个简单的实现的文档之外，我无法在网上找到任何示例。

基本 HTML 模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>

</head>

{% block …

我正在使用htmx i制作带有嵌套动态表单集的表单（想要逃避 usign JS，但如果别无选择...）来实例化更多表单集字段以制作动态嵌套表单，但是当我POST时，仅来自1 个实例（最后一个）的数据被 POSTed，表单的其余部分正确 POST，并且获取与Chlid formset Child modelParent model

****views.py****

def createPlan(request):#Requst for the Parent form 

    form = PlanForm(request.POST or None)
    sformset = StructureFormset(request.POST or None) #Nesting the Child formset

    context = { …