3

当我的 Django 表单无法验证时，它会自动返回表单失败的页面，但我希望它转到页面上的 html 锚点。这是我的代码：


def detail(request, post_id):
    p = get_object_or_404(Post, pk=post_id)
    # get all the comments for the post
    comments = p.comment_set.all().order_by('pub_date')
    # to add a comment to the post
    if request.method=='POST':
        form = CommentForm(request.POST)
        if form.is_valid():
            c = Comment()
            c.body = request.POST['body']
            c.post = p
            c.save()
            return HttpResponseRedirect(reverse('journal.views.detail', kwargs={'post_id': post_id}) + "#comment-" + str(c.id))
    else:
        form = CommentForm()
    return render(request, 'posts/detail.html', {'post': p, 'comments': comments, 'form': form})

该表单是博客文章底部的评论表单。当表单无效时，我希望它跳转到页面底部的评论表单的 html 锚点。现在它转到页面顶部，您必须向下滚动才能注意到有错误。

我尝试了一些不起作用的东西。请帮忙！

4

4 回答 4

3

我认为这很公平：

  <script>
    function goToId() {
      if (!window.location.hash) window.location = window.location + '#your-id';
    }
    {% if form.is_bound %}
      $(window).on("load", goToId);
    {% endif %}
  </script>
于 2020-03-18T21:29:34.420 回答
1

一种方法是在 dict 中传递一个额外的键值对来包含锚名称，并在需要时在模板中使用 JavaScript 跳转到它。

蟒蛇方面：

// ...
return render(request,
              'post/detail.html',
              {
                  // ...
                  'anchor': 'comment'
              })

模板：

function goToOnLoadAnchor()
{
    window.location.hash('{{ anchor }}');   // Or something with the same effect
}

{% ... %}
<body onload="goToOnLoadAnchor">
{% ... %}

您还可以利用自定义模板标签来增加灵活性。

于 2012-12-08T04:24:52.190 回答
0

CBV 和 jQuery

窗体视图

def form_invalid(self, form):
    return self.render_to_response(self.get_context_data(form=form, anchor='my-form'))

模板

<form ... id='my-form'> ... </form>
<script>
    $(function () {
        {% if anchor %}
            $(document.body).animate({
                'scrollTop':   $('#{{ anchor }}').offset().top
            }, 2000);
        {% endif %}
    });
</script>

使用 jQuery 进行滚动（而不是跳跃）。

于 2014-11-13T04:37:30.107 回答
0

使用香草 JavaScript：

{% if form.is_bound %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("your_id").scrollIntoView();
  });
</script>
{% endif %}

它适用于addEventListener("DOMContentLoaded")听众。否则它会给出一些奇怪的结果。

于 2020-08-06T13:34:38.243 回答