如何滚动锁定 Django HTML Web 页

Question

I am currently using a page that has a list of in-line forms我目前使用的页面包含内联列表 forms

However when the user enters submits each form (line) they are sent back to the top of the page.但是，当用户输入提交每个表单（行）时，它们将被发送回页面顶部。 This becomes really tedious as the users need to enter data quickly and can't when they need to scroll for 2 minutes every time they add an entry.这变得非常乏味，因为用户需要快速输入数据，而当他们每次添加条目时都需要滚动 2 分钟时却不能。

Does anyone know how to implement a scroll lock to stock this from happening有谁知道如何实现滚动锁以防止这种情况发生

Views.py: Function:视图.py: Function:

class AvonleaView( View): class AvonleaView（查看）：

def get(self,request):
    created_nums= AvonleaClass.objects.all().values('unitNumber')

    Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
    # created_nums= AvonleaClass.objects.all()
    print(created_nums )

    created_nums =[int(i['unitNumber']) for i in created_nums]
    print(created_nums )

    form = AvonleaForm()
    return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })

def post(self,request):
    created_nums= AvonleaClass.objects.all().values_list('unitNumber')
    print(created_nums)
    form = AvonleaForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('Avonlea')
        messages.success(request , 'creates successfully ')
    else:
        return render(request, 'meter_readings/avonlea.html', {'form': form ,  created_nums:created_nums })

HTML page: HTML 页面：

{% extends 'meter_readings/base.html' %}

{% block content %}
<!-- CSS only -->


<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
  <meta name="viewport" content="width=device-width">
  
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>


<form class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >
  {% csrf_token %}
  <div class="container">
    <div class="row mb-3">
<div class="col">
  <h5 style="font-size: 14px"> Unit number </h5>
  {{ unit_number.data.value}}
</div>

<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">

<div class="col" id="prev{{unit_number.data.value}}" >
  <h5 style="font-size: 14px"> Previous Reading </h5>
  {{ previousReading }}
</div>
<div class="col"   id="readings{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Current Reading </h5>
  {{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Units Used </h5>
  {{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
  {{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit"   {% if unit_number.data.value in created_nums %}  disabled {% endif %} > Save</button>
</div>


    </div>
  </div>



</form>

  {% endfor %}

<br>
<br>

Answer 1

If I understand correctly, you can add #<some_id> to the action attribute of your forms and when the page loads the browser will automatically put the element with the id="some_id" in view.如果我理解正确，您可以将#<some_id>添加到 forms 的 action 属性中，当页面加载时，浏览器会自动将id="some_id"的元素置于视图中。

Example:例子：

<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>

If you submit #form1 when the page reloads the browser will scroll to #form2 even if it's at the bottom of the page.如果您在页面重新加载时提交#form1 ，浏览器将滚动到#form2 ，即使它位于页面底部。

Or if you only have one form, you can do:或者如果你只有一种形式，你可以这样做：

<form id="form1" action="#form1" method='POST'>...</form>

EDIT:编辑：

<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >

如何滚动锁定 Django HTML Web 页

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-01 12:33:43

如何滚动锁定 Django HTML Web 页

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-01 12:33:43

解决方案1
1 已采纳 2021-10-01 12:33:43