Django 和 JQuery：出现提示时显示表单答案

【问题标题】：Django and JQuery: Show form when promptedDjango 和 JQuery：出现提示时显示表单
【发布时间】：2015-01-09 16:39:08
【问题描述】：

我目前正在使用 Django 和 JQuery 设计一个食谱网站。我将配料和配方说明存储在数据库中，并带有适当的 Django 视图。这是一个示例截图：

我想为用户提供选项来编辑食谱的成分。当用户点击“编辑”按钮时，我想用一个预先填充了当前成分组件的表单来替换它左边的文本。像这样的：

添加/删除这些文本输入区域的最佳方法是什么？目前，我正在使用样式元素 display: none 和 display: initial 来完成工作。有没有更好的办法？

【问题讨论】：

我认为这个问题非常广泛。有很多活动部件。对于初学者，通过检查模板中的{% user.is_authenticated %} 来隐藏编辑按钮。接下来，通过 ajax 单击按钮（编辑）。如果您发现自己卡在那里，也许您可以编辑问题，并发布您面临的更具体的问题。
是的。我确实让它很笼统。我会尽量减少它。

标签： jquery python django forms

【解决方案1】：

您可以在您的视图中检查用户是否已通过身份验证。如果用户通过身份验证，则设置变量True，否则设置False。

# views.py

def my_view(request):
    if user.is_authenticated():
        auth_user = True
    else:
        auth_user = False
    # other code ...
    return render(... {'auth_user': auth_user, ...})

然后在你的模板中，根据变量auth_user渲染表单。

{% if auth_user %}
    Display the form
{% else %}
    Display something else
{% endif %}

【讨论】：

感谢您的回复！但是，我刚刚编辑了缩小问题范围的帖子。很遗憾，您的回复回答了我删除的部分问题
我最终将您的答案融入了我一直在做的事情中。

【解决方案2】：

所以，我想我找到了正确的解决方案，它结合了 xyres 的答案和我一直在尝试做的事情。这是我最终结果的一些示例代码：

<h1>{{ recipe.name }}</h1>

<ul>
    {% for item in recipe.line_items.all %}
        <li>
            <span id="item{{forloop.counter}}_hide">{{ item.full_name }}</span>
            {% if user_auth %}
            <form id="item{{forloop.counter}}_show"
{#                  action="{% url 'line_item:edit' %}"#}
                  class="hide-initial"
                  style="display: inline">
            {% csrf_token %}
                <input type="text" name="amount" size="2" value="{{ item.amount }}"/>
                <input type="text" name="unit"   size="4" value="{{ item.unit }}"/>
                <input type="text" name="name"   size="10" value="{{ item.ingredient_adjective }}"/>
                <input type="text" name="name"   size="10" value="{{ item.ingredient_name }}"/>
                <br>
                <input type="submit" name="submit" value="Submit">
                <input type="button" name="cancel" value="Cancel"
                       onclick="myFunction('item'+{{forloop.counter}}, true)">
            </form>
            <button id="item{{forloop.counter}}_hide" onclick="myFunction('item'+{{forloop.counter}})">Edit</button>
            {% endif %}
        </li>
    {% empty %}
        <li>No ingredients required!</li>
    {% endfor %}
    {% if user_auth %}
        <button>Add Ingredient</button>
    {% endif %}
</ul>

此模板连同以下 JavaScript 代码将允许用户针对每种不同的成分单独切换表单的可见性。

$(".hide-initial").css( "display", "none" );

function myFunction(inp, reverse) {
    var show_elements = $("#" + inp + "_show");
    var hide_elements = $("#" + inp + "_hide");
    if(!reverse) {
        show_elements.css("display", "initial");
        hide_elements.css("display", "none");
    } else {
        hide_elements.css("display", "initial");
        show_elements.css("display", "none");
    }
}

【讨论】：