【问题标题】:Bootstrap modal form disappears when submitted with errors提交错误时,引导模式表单消失
【发布时间】:2016-08-10 13:20:45
【问题描述】:

我刚刚将表单转换为 Bootstrap 模式,它工作正常,除非提交时出现错误,模式会消失。单击模态触发按钮会使模态与用户的数据和错误消息一起备份。

这是我的代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form method='POST' action=''>
                    {% csrf_token %}
                    {{ form.as_p }}
                    <input id='submit-button' type="submit" value="Submit">
                </form>
            </div> <!-- modal-body -->
        </div>
    </div>
</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Apply now</button>

我正在使用 Django,但我认为这与它没有任何关系,因为在我将表单包装在模式中之前一切正常。这是我的观点.py:

def homepage(request):
    form = MyForm(request.POST or None)
    if form.is_valid():
        instance = form.save(commit=False)
        instance.user = request.user
        instance.save()
        return HttpResponseRedirect(reverse('success'))
    context = {
        "form": form,
    }
    return render(request, 'home.html', context)

谁能告诉我我做错了什么?

【问题讨论】:

    标签: bootstrap-modal


    【解决方案1】:

    提交后没有modal相关的信息,就像第一次打开页面一样隐藏。如果出现错误,您可以添加一些条件来打开模态。

    我不了解 Django,但想法是为模型添加一些参数:

    if (bindingResult.hasErrors()) {
        model.addAttribute("formErrors", true);
    }
    

    然后检查(我在这个例子中使用 Thymeleaf):

    <th:block th:if="${formErrors}">
        <script>$('#myModal').modal('show');</script>
    </th:block>
    

    【讨论】:

    • 这对我有用,但我必须将它包含在 document.ready() 函数中。
    猜你喜欢
    • 2021-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-02
    • 1970-01-01
    • 2016-01-03
    • 2014-07-09
    • 1970-01-01
    相关资源
    最近更新 更多